@porsche-design-system/components-react 4.4.0-rc.0 → 4.4.0

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

@@ -7,8 +7,8 @@ var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var fcDismissButton = require('./fc-dismiss-button.cjs');
 var notificationBase = require('./notification-base.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 
 /**
@@ -26,7 +26,7 @@ class DSRInlineNotification extends react.Component {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(notificationBase.NotificationBase, { ...utilsEntry.getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
                                 actionLabel: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })),
                             }), ...(this.props.dismissButton && {
-                                dismissButton: (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close notification" })),
+                                dismissButton: (jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: "Close notification", ariaDescription: headingText || undefined })),
                             }) })] }), this.props.children] }));
     }
 }

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

@@ -22,6 +22,9 @@ class DSRModal extends react.Component {
     footer;
     hasHeader;
     hasFooter;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = utilsEntry.createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -35,7 +38,17 @@ class DSRModal extends react.Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss.minifyCss(stylesEntry.getModalCss(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        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, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),

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

@@ -22,6 +22,10 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 class DSRPopover extends react.Component {
     host;
     isOpen = false;
+    // Tracks the component's first render. While `true`, the entry transition (`@starting-style`) is suppressed so an
+    // initially-open popover (`open=true` on page load) appears instantly instead of fading in; flipped to `false` in
+    // `componentDidLoad`, so every later (user-triggered) open keeps the fade-in.
+    isInitialRender = true;
     // The `[popover]` panel element on the #top-layer that holds the content and the arrow.
     refPopover;
     // The default info button rendered in the Shadow DOM (only present when no `button` slot is used).
@@ -75,7 +79,7 @@ class DSRPopover extends react.Component {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const id = 'popover';
-        const style = minifyCss.minifyCss(stylesEntry.getPopoverCss(this.props.effectiveOpen, this.props.compact).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
+        const style = minifyCss.minifyCss(stylesEntry.getPopoverCss(this.props.effectiveOpen, this.props.compact, this.props.isInitialRender).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedButton ? (jsxRuntime.jsx("slot", { name: "button" })) : (jsxRuntime.jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxRuntime.jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsxRuntime.jsx("div", { className: "arrow" }), this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {})] })] })] }), this.props.children] }));
     }
 }

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

@@ -19,6 +19,9 @@ class DSRSheet extends react.Component {
     dialog;
     scroller;
     hasHeader;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = utilsEntry.createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -30,7 +33,17 @@ class DSRSheet extends react.Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stylesEntry.getSheetCss(this.props.open, this.props.background, this.props.dismissButton));
-        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, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,

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

@@ -3847,7 +3847,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.4.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.4.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4220,9 +4220,6 @@ const getComponentCss$19 = () => {
     });
 };
 
-const TOAST_Z_INDEX = 999999;
-const BANNER_Z_INDEX = 99;
-
 const colorMap$3 = {
     primary: ref(colorPrimary),
     'contrast-higher': ref(colorContrastHigher),
@@ -4287,6 +4284,86 @@ const weightMap = {
     bold: ref(fontWeightBold),
 };
 
+// Inlined `close` icon (mirrors packages/assets/projects/icons/src/close.svg) rendered as a CSS mask, so the dismiss
+// button needs neither a nested `p-button` nor a `p-icon` (which would fetch the SVG from the CDN asynchronously).
+const iconClose = getInlineSVGBackgroundImage('<path d="m18 6.706-5.294 5.294 5.294 5.294-.706.706-5.294-5.294-5.294 5.294-.706-.706 5.294-5.294-5.294-5.294.706-.706 5.294 5.294 5.294-5.294z"/>');
+// NOTE: Values copied (and reduced to the fixed `compact` + `hideLabel` case the dismiss button always uses) from
+// `getVariantColors` in `packages/components/src/styles/link-button-styles.ts` to keep the visual identical to the
+// previously nested `p-button`. If the shared button styling changes, mirror it here (or extract a shared helper).
+const getVariantColors$1 = (variant) => {
+    const colors = {
+        primary: {
+            textColor: ref(colorCanvas),
+            backgroundColor: ref(colorPrimary),
+            backgroundColorHover: ref(colorContrastHigh),
+        },
+        secondary: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorFrostedStrong),
+            backgroundColorHover: ref(colorFrosted),
+        },
+    };
+    return colors[variant];
+};
+/**
+ * Visual styles for the shared native `<button class="dismiss">` dismiss button. Returns the button rule (reset,
+ * variant colors, focus ring, High Contrast Mode, hover, inlined close-icon mask and the visually-hidden label). Each
+ * consumer merges this with its own positioning styles for the `dismiss` key (e.g. grid placement in
+ * `notification-base-styles` / `dialog-base-styles`).
+ *
+ * Reduced to the dismiss button's fixed configuration (always `compact` + `hideLabel`): padding `6px`, full border
+ * radius and no gap — the responsive `compact`/`hideLabel` branches from `getLinkButtonStyles` are therefore collapsed.
+ */
+const getFCDismissButtonStyles = (variant) => {
+    const { textColor, backgroundColor, backgroundColorHover } = getVariantColors$1(variant);
+    return {
+        all: 'unset',
+        boxSizing: 'border-box',
+        display: 'grid',
+        placeItems: 'center',
+        padding: '6px',
+        borderRadius: ref(radiusFull),
+        font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
+        backgroundColor,
+        color: textColor,
+        cursor: 'pointer',
+        // The frosted backdrop-filter is only meaningful for the translucent `secondary` (frosted) background. For the
+        // opaque `primary` background it is invisible AND — because the dialog consumer additionally applies
+        // `filter: invert(1)` on the same element (see `getDialogDismissButtonJssStyle`) — the blurred backdrop bleeds past
+        // the circular edge and the invert amplifies it into a visible glow/halo. So it is applied for `secondary` only.
+        ...(variant === 'secondary' && {
+            WebkitBackdropFilter: ref(blurFrosted),
+            backdropFilter: ref(blurFrosted),
+        }),
+        transition: `${getTransition('background-color')}, ${getTransition('color')}`,
+        ...forcedColorsMediaQuery({
+            forcedColorAdjust: 'none',
+            background: 'Canvas',
+            boxShadow: 'inset 0 0 0 2px ButtonBorder',
+            color: 'ButtonText',
+        }),
+        '&:focus-visible': getFocusBaseStyles(),
+        ...hoverMediaQuery({
+            '&:hover': {
+                backgroundColor: backgroundColorHover,
+                ...forcedColorsMediaQuery({
+                    background: 'Canvas',
+                }),
+            },
+        }),
+        '&::before': {
+            content: '""',
+            width: ref(leadingNormal$1),
+            height: ref(leadingNormal$1),
+            WebkitMask: `${iconClose} center/contain no-repeat`, // necessary for Sogou browser support :-)
+            mask: `${iconClose} center/contain no-repeat`,
+            background: 'currentColor', // follows the button's text color (variant + HCM `ButtonText`)
+        },
+        // visually-hidden accessible name (mirrors `hideLabel` on the former `p-button`)
+        '& span': getHiddenTextJssStyle(),
+    };
+};
+
 const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
     return {
         '@global': {
@@ -4337,6 +4414,8 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
         },
         ...(hasDismissButton && {
             dismiss: {
+                // native dismiss button visual (secondary variant); grid positioning is applied on top
+                ...getFCDismissButtonStyles('secondary'),
                 gridArea: `1/4/-1`,
                 alignSelf: 'flex-start',
                 marginBlock: `calc(-6 * ${ref(spacingStatic2Xs)})`,
@@ -4377,12 +4456,12 @@ const cssVarInsetX = '--p-banner-inset-x';
 const cssVarPositionTop = '--p-banner-position-top'; // deprecated (aliased)
 const cssVarPositionBottom = '--p-banner-position-bottom'; // deprecated (aliased)
 const topBottomFallback = '56px';
-const cssVariableZIndex = '--_p-banner-a';
-const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot) => {
+const cssVarTransform = '--_p-banner-a';
+const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot, skipEntryTransition) => {
     const duration = isOpen ? 'moderate' : 'short';
     const easing = isOpen ? 'in' : 'out';
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isOpen ? '0s' : motionDurationMap[duration])},${getTransition('transform', duration, easing)}`;
-    return getCss({
+    const transition = getTransition('transform', duration, easing);
+    const css = getCss({
         ...mergeDeep({
             '@global': {
                 ':host': {
@@ -4391,46 +4470,36 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
                         ...hostHiddenStyles,
                     }),
                 },
-                ...preventFoucOfNestedElementsStyles,
                 '[popover]': {
                     all: 'unset',
                     position: 'fixed',
-                    zIndex: ref(cssVariableZIndex, BANNER_Z_INDEX), // Fallback for browsers lacking `transition-behavior: allow-discrete` — keeps the banner visible during fade-out after leaving the top layer.
                     ...buildResponsiveStyles(position, (v) => ({
                         ...(v === 'top' && {
+                            [cssVarTransform]: `translate3d(-50%,calc(-100% - ${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))}),0)`,
                             insetBlock: `${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))} auto`,
-                            ...(!isOpen && {
-                                transform: `translate3d(-50%,calc(-100% - ${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))}),0)`,
-                            }),
                         }),
                         ...(v === 'bottom' && {
+                            [cssVarTransform]: `translate3d(-50%,calc(${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))} + 100%),0)`,
                             insetBlock: `auto ${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))}`,
-                            ...(!isOpen && {
-                                transform: `translate3d(-50%,calc(${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))} + 100%),0)`,
-                            }),
                         }),
                     })),
                     left: '50vw',
                     width: `min(calc(100vw - 2 * ${ref(cssVarInsetX, gridExtendedOffsetBase)}),${ref(cssVarMaxWidth, '100ch')})`,
+                    transform: isOpen ? 'translate3d(-50%,0,0)' : ref(cssVarTransform),
+                    transition,
+                    // 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, ${getTransition('display', duration, easing)} allow-discrete`,
+                    }),
                     overlay: 'none',
+                    display: 'none',
                     '&:popover-open': {
                         overlay: 'auto',
+                        display: 'grid',
                     },
                     '&::backdrop': {
-                        display: 'none',
+                        display: 'none', // reset ua-style
                     },
-                    visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
-                    pointerEvents: 'none', // element can't be interacted with mouse
-                    ...(isOpen && {
-                        visibility: 'inherit',
-                        pointerEvents: 'inherit',
-                        transform: 'translate3d(-50%,0,0)',
-                    }),
-                    transition,
-                    // 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`,
-                    }),
                 },
             },
         }, {
@@ -4441,6 +4510,17 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
             },
         }, getFunctionalComponentNotificationBaseStyles(state, false, hasDismissButton, hasHeadingOrHeadingSlot)),
     });
+    // Both the `[popover]` box (transform) and its nested `.notification` (opacity) need a `@starting-style`: while closed
+    // the popover is `display: none`, so on open `.notification` renders fresh with a computed `opacity: 1` and has no
+    // prior value to transition from — without the starting value it snaps to full opacity instead of fading in. The
+    // opacity is split onto `.notification` (not `[popover]`) so the frosted-glass backdrop-filter renders correctly.
+    //
+    // `skipEntryTransition` omits the append on the component's FIRST render, so an initially-open banner (`open=true` on
+    // page load) computes straight to its visible transform/opacity and appears instantly instead of sliding/fading in.
+    // Every later render passes `false`, so a user-triggered open still animates normally.
+    return isOpen && false
+        ? `${css}\n@starting-style {\n  [popover] {\n    transform: ${ref(cssVarTransform)};\n  }\n  .notification {\n    opacity: 0;\n  }\n}`
+        : css;
 };
 
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
@@ -5824,28 +5904,14 @@ const dialogHostJssStyle = (background) => {
         [cssVarBackgroundColor]: background === 'surface' ? ref(colorSurface) : ref(colorCanvas),
     };
 };
+// INTENTIONAL DIVERGENCE from `popover-styles.ts` (kept, not aligned — see the mirrored note there):
+// This dialog stays permanently rendered and collapses its CLOSED state via delayed `visibility: hidden` + `width/height: 0`
+// (driven by `isVisible`), so `opacity`/`background` fade in BOTH directions with NO `@starting-style`, and an initial
+// `open=true` computes straight to the visible state (no entry fade on load). `p-popover`/`p-banner` instead use the native
+// `[popover]` `display: none`/`:popover-open` toggle plus a `@starting-style` entry fade, because those components mimic the
+// native popover box model. Both share `createTopLayerController` + the Chromium-only `overlay allow-discrete` transition
+// (`overlayTransitionSupportsQuery`) and the `inert` toggle for tabbability; only the closed-state expression differs.
 const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') => {
-    return {
-        dialog: {
-            ...dialogBackdropResetJssStyle,
-            ...getDialogBackdropTransitionJssStyle(isVisible, backdrop),
-        },
-    };
-};
-const dialogBackdropResetJssStyle = {
-    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)
-    },
-};
-const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
@@ -5853,14 +5919,21 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
     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.
+        all: 'unset',
+        position: 'fixed',
+        inset: 0,
+        maxWidth: '100dvw',
+        maxHeight: '100dvh',
+        overflow: 'hidden',
+        display: 'block',
+        userSelect: 'text', // allows text selection within dialog element (e.g. for copy & paste)
+        outline: 0, // we always expect a focusable element to be within the dialog
         ...(isVisible
             ? {
                 width: '100dvw',
                 height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                overlay: 'auto',
                 background: ref(colorBackdrop),
                 ...(isBackdropBlur && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -5876,7 +5949,6 @@ 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,
@@ -5884,6 +5956,13 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
         ...overlayTransitionSupportsQuery({
             transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
         }),
+        overlay: 'none',
+        '&:modal': {
+            overlay: 'auto',
+        },
+        '&::backdrop': {
+            display: 'none', // reset ua-style (we can't use it atm because it's not animatable in all browsers)
+        },
     };
 };
 const getScrollerJssStyle = (position) => {
@@ -5963,6 +6042,9 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
 };
 const getDialogDismissButtonJssStyle = () => {
     return {
+        // native dismiss button visual (primary variant); positioning + the `invert` filter (renders it light on the
+        // dialog) are applied on top below
+        ...getFCDismissButtonStyles('primary'),
         gridArea: '1/3',
         zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
         position: 'sticky',
@@ -7087,7 +7169,6 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7110,7 +7191,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     '&[name=sub-footer]': getSlotSubFooterJssStyle(),
                 }),
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end'),
@@ -7940,7 +8021,6 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7954,7 +8034,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -8390,7 +8470,7 @@ const cssVariableMaxHeight = '--p-popover-max-h';
  */
 const cssVarPaddingInline = '--p-popover-px';
 /**
- * @css-variable {"name": "--p-popover-py", "description": "Vertical padding of the popover. It is recommended to apply an existing Porsche Design System spacing token, e.g. the CSS declaration `--p-popover-py: var(--p-spacing-static-sm)`, the Tailwind CSS arbitrary property `[--p-popover-py:var(--spacing-static-sm)]` or the equivalent SCSS/JS token.", "defaultValue": "12px"}
+ * @css-variable {"name": "--p-popover-py", "description": "Vertical padding of the popover. It is recommended to apply an existing Porsche Design System spacing token, e.g. the CSS declaration `--p-popover-py: var(--p-spacing-static-sm)`, the Tailwind CSS arbitrary property `[--p-popover-py:var(--spacing-static-sm)]` or the equivalent SCSS/JS token.", "defaultValue": "16px"}
  */
 const cssVarPaddingBlock = '--p-popover-py';
 /**
@@ -8402,14 +8482,19 @@ const iconInfo = getInlineSVGBackgroundImage(`<path d="M12.5 10v6h-1v-6zm0-2v1h-
  * Builds the popover's scoped CSS.
  * @param isOpen - The effective open state; drives the fade-in/fade-out direction and the `@starting-style` append.
  * @param isCompact - Reduces padding/spacing and uses smaller radii (mirrors the `compact` prop).
- * @returns The component CSS string, with a trailing `@starting-style` rule appended while opening.
+ * @param skipEntryTransition - Suppresses the `@starting-style` entry fade. Set on the component's first render so an
+ *   initially-open popover (`open=true` on page load) appears instantly instead of fading in. Later user-triggered opens
+ *   render with this `false`, so they keep the fade-in.
+ * @returns The component CSS string, with a trailing `@starting-style` rule appended while opening (unless skipped).
  */
-const getComponentCss$v = (isOpen, isCompact) => {
+const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
     // fade-in on open (via `@starting-style` below), fade-out on close. While closing, the panel keeps `display: grid`
     // (Chromium via `overlay` + `display` `allow-discrete`; Safari/Firefox via the deferred `hidePopover()`), so
     // `display: none` only describes the fully-closed terminal state. Tabbability / a11y-tree removal during the fade-out
     // is handled immediately via the `inert` attribute on the panel (see popover.tsx), so no `visibility` toggle is needed.
-    const transition = getTransition('opacity', 'short', isOpen ? 'in' : 'out');
+    const duration = 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const transition = getTransition('opacity', duration, easing);
     const css = getCss({
         '@global': {
             ':host': {
@@ -8428,7 +8513,8 @@ const getComponentCss$v = (isOpen, isCompact) => {
                 maxWidth: 'inherit',
                 maxHeight: 'inherit',
                 boxSizing: 'border-box',
-                padding: `${ref(cssVarPaddingBlock, isCompact ? ref(spacingStaticXs$1) : `calc(12 * ${ref(spacingStatic2Xs)})`)} ${ref(cssVarPaddingInline, isCompact ? ref(spacingStaticSm$1) : ref(spacingStaticMd))}`,
+                paddingBlock: `${ref(cssVarPaddingBlock, isCompact ? ref(spacingStaticSm$1) : ref(spacingStaticMd))}`,
+                paddingInline: `${ref(cssVarPaddingInline, isCompact ? ref(spacingStaticSm$1) : ref(spacingStaticMd))}`,
                 overflow: 'hidden auto',
                 overscrollBehaviorY: 'none',
             },
@@ -8491,7 +8577,7 @@ const getComponentCss$v = (isOpen, isCompact) => {
                 transition,
                 // keep the popover on the #top-layer while the fade-out runs (Chromium only; see `overlayTransitionSupportsQuery`)
                 ...overlayTransitionSupportsQuery({
-                    transition: `${transition},${getTransition('overlay', 'short', isOpen ? 'in' : 'out')} allow-discrete,${getTransition('display', 'short', isOpen ? 'in' : 'out')} allow-discrete`,
+                    transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete, ${getTransition('display', duration, easing)} allow-discrete`,
                 }),
                 // Unlike `opacity` (driven by the `isOpen` render flag), `overlay` and `display` are toggled via the
                 // `:popover-open` UA state instead of `isOpen`. Both are owned by the browser: they only flip once
@@ -8535,7 +8621,17 @@ const getComponentCss$v = (isOpen, isCompact) => {
     // engines (< Chromium 117 / Safari 17.5 / Firefox 129) ignore the unknown at-rule and skip the entry fade (graceful
     // degradation). Formatting mirrors JSS output so the unit-test CSS parser can read it.
     //
-    // ALTERNATIVE APPROACH (not implemented) — mirror the `dialog-base` (p-modal/p-flyout) pattern and drop `@starting-style`:
+    // `skipEntryTransition` omits the append on the component's FIRST render, so an initially-open popover (`open=true` on
+    // page load) computes straight to `opacity: 1` and appears instantly instead of fading in. Every later render passes
+    // `false`, so a user-triggered open still fades in normally.
+    //
+    // ALTERNATIVE APPROACH (INTENTIONALLY NOT IMPLEMENTED) — mirror the `dialog-base` (p-modal/p-flyout) pattern and drop `@starting-style`:
+    // Decision: KEEP this divergence (see the mirrored note in `common/dialog-base/dialog-base-styles.ts`). `p-popover`/`p-banner`
+    // mimic the native `[popover]` box model, so they use the native `display: none`/`:popover-open` toggle + `@starting-style`
+    // entry fade rather than the dialog's permanently-rendered `visibility`/`width`/`height` collapse. Both approaches share
+    // `createTopLayerController`, the Chromium-only `overlay allow-discrete` transition (`overlayTransitionSupportsQuery`) and
+    // the `inert` toggle for tabbability; only the closed-state expression differs. The alternative below is documented for
+    // context (and to record its one upside — no entry fade on initial `open=true`), but is deliberately left unimplemented.
     //   • Keep the panel permanently rendered (never `display: none`); collapse the closed state via `visibility: hidden`
     //     + `width/height: 0` instead. Because the element stays rendered, `opacity` fades normally in BOTH directions with
     //     no `@starting-style`, and an initial `open=true` computes straight to `opacity: 1` (appears instantly, no entry
@@ -8551,7 +8647,7 @@ const getComponentCss$v = (isOpen, isCompact) => {
     //     tabbable during the fade-out).
     //   • Trade-off: removes the `@starting-style` raw-CSS append + the initial-load fade, at the cost of reintroducing the
     //     delayed `visibility` plus delayed `width/height` and tighter coupling to the motion duration.
-    return isOpen ? `${css}\n@starting-style {\n  [popover] {\n    opacity: 0;\n  }\n}` : css;
+    return isOpen && !skipEntryTransition ? `${css}\n@starting-style {\n  [popover] {\n    opacity: 0;\n  }\n}` : css;
 };
 
 const cssVarInternalRadioGroupOptionScaling = '--_p-radio-group-option-a';
@@ -9131,7 +9227,6 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -9140,7 +9235,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
@@ -10278,7 +10373,7 @@ const getComponentCss$1 = () => {
                 [cssVariablePositionBottomInternal]: ref(cssVariablePositionBottom, '56px'),
                 position: 'fixed', // fallback for older browsers without native `popover` support
                 inset: `auto ${gridExtendedOffsetBase} ${ref(cssVariablePositionBottomInternal)}`,
-                zIndex: TOAST_Z_INDEX, // fallback for older browsers without native `popover` support
+                zIndex: 999999, // fallback for older browsers without native `popover` support
                 [getMediaQueryMin('s')]: {
                     [cssVariablePositionBottomInternal]: ref(cssVariablePositionBottom, '64px'),
                     inset: `auto auto ${ref(cssVariablePositionBottomInternal)} 64px`,
@@ -10350,4 +10445,4 @@ const getComponentCss = (size) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, dialogBorderRadius, dialogGridJssStyle, dialogHostJssStyle, dialogPaddingBottom, dialogPaddingInline, dialogPaddingTop, getComponentCss$1a as getAccordionCss, getComponentCss$19 as getAiTagCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getDialogColorJssStyle, getDialogDismissButtonJssStyle, getDialogTransitionJssStyle, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentDialogBaseStyles, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getScrollerJssStyle, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getSlotFooterJssStyle, getSlotHeaderJssStyle, getSlotJssStyle, getSlotMainJssStyle, getSlotSubFooterJssStyle, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, dialogBorderRadius, dialogGridJssStyle, dialogHostJssStyle, dialogPaddingBottom, dialogPaddingInline, dialogPaddingTop, getComponentCss$1a as getAccordionCss, getComponentCss$19 as getAiTagCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getDialogColorJssStyle, getDialogDismissButtonJssStyle, getDialogTransitionJssStyle, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getFCDismissButtonStyles, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentDialogBaseStyles, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getScrollerJssStyle, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getSlotFooterJssStyle, getSlotHeaderJssStyle, getSlotJssStyle, getSlotMainJssStyle, getSlotSubFooterJssStyle, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

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

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

@@ -1,12 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getBannerCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { createTopLayerController, getBannerAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 import { NotificationBase } from './notification-base.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading of the banner. Can be used as an alternative to the `heading` prop for rich content." }
@@ -21,6 +20,12 @@ class DSRBanner extends Component {
     refDismiss;
     hasHeadingSlot;
     hasDescriptionSlot;
+    // Tracks whether the document-level Escape listener is currently registered (guards the idempotent sync below).
+    hasKeydownListener = false;
+    // Tracks the component's first render. While `true`, the entry transition (`@starting-style`) is suppressed so an
+    // initially-open banner (`open=true` on page load) appears instantly instead of sliding/fading in; flipped to `false`
+    // in `componentDidLoad`, so every later (user-triggered) open keeps the entry animation.
+    isInitialRender = true;
     topLayer = createTopLayerController({
         getElement: () => this.props.refPopover,
         isShown: () => !!this.props.refPopover?.matches(':popover-open'),
@@ -33,8 +38,13 @@ class DSRBanner extends Component {
         const hasDescriptionSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0;
         const headingText = this.props.heading ? this.props.heading : namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children;
         const style = minifyCss(getComponentCss$18(this.props.open, this.props.position, this.props.state, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...getBannerAriaAttributes(this.props.state, headingText), children: jsx(NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
-                                    dismissButton: (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close banner" })),
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style + (this.props.open ? '[popover]{display:grid!important}' : '') } }), jsx("div", { popover: "manual", 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, ...getBannerAriaAttributes(this.props.state, headingText), children: jsx(NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
+                                    dismissButton: (jsx(FCDismissButton, { label: "Close banner", ariaDescription: headingText || undefined })),
                                 }) }) })] }), this.props.children] }));
     }
 }