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

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.4.0] - 2026-07-15
+
+## [4.4.0-rc.1] - 2026-07-10
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet` ([#4578](https://github.com/porsche-design-system/porsche-design-system/pull/4578)):
+  - enable selecting text within dialog element
+  - prevent dialog from being dismissed when a text selection started inside the dialog is released on the backdrop
+- `Popover`, `Banner`: prevent entry animation from playing when initially rendered in an open state
+  ([#4578](https://github.com/porsche-design-system/porsche-design-system/pull/4578))
+
 ## [4.4.0-rc.0] - 2026-07-06
 
 ### Added

package/package.json

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

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

@@ -3849,7 +3849,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);
@@ -4222,9 +4222,6 @@ const getComponentCss$19 = () => {
     });
 };
 
-const TOAST_Z_INDEX = 999999;
-const BANNER_Z_INDEX = 99;
-
 const colorMap$3 = {
     primary: ref(colorPrimary),
     'contrast-higher': ref(colorContrastHigher),
@@ -4289,6 +4286,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': {
@@ -4339,6 +4416,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)})`,
@@ -4379,12 +4458,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': {
@@ -4393,46 +4472,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`,
-                    }),
                 },
             },
         }, {
@@ -4443,6 +4512,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.
@@ -5826,28 +5906,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';
@@ -5855,14 +5921,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),
@@ -5878,7 +5951,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,
@@ -5886,6 +5958,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) => {
@@ -5965,6 +6044,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',
@@ -7089,7 +7171,6 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7112,7 +7193,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'),
@@ -7942,7 +8023,6 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7956,7 +8036,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -8392,7 +8472,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';
 /**
@@ -8404,14 +8484,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': {
@@ -8430,7 +8515,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',
             },
@@ -8493,7 +8579,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
@@ -8537,7 +8623,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
@@ -8553,7 +8649,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';
@@ -9133,7 +9229,6 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -9142,7 +9237,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: {
@@ -10280,7 +10375,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`,
@@ -10379,6 +10474,7 @@ exports.getDividerCss = getComponentCss$$;
 exports.getDrilldownCss = getComponentCss$_;
 exports.getDrilldownItemCss = getComponentCss$Z;
 exports.getDrilldownLinkCss = getComponentCss$Y;
+exports.getFCDismissButtonStyles = getFCDismissButtonStyles;
 exports.getFieldsetCss = getComponentCss$X;
 exports.getFlagCss = getComponentCss$W;
 exports.getFlyoutCss = getComponentCss$V;

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

@@ -3482,7 +3482,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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.cjs

@@ -1,14 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 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');
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading of the banner. Can be used as an alternative to the `heading` prop for rich content." }
@@ -23,6 +22,12 @@ class DSRBanner extends react.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 = utilsEntry.createTopLayerController({
         getElement: () => this.props.refPopover,
         isShown: () => !!this.props.refPopover?.matches(':popover-open'),
@@ -35,8 +40,13 @@ class DSRBanner extends react.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.minifyCss(stylesEntry.getBannerCss(this.props.open, this.props.position, this.props.state, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...utilsEntry.getBannerAriaAttributes(this.props.state, headingText), children: jsxRuntime.jsx(notificationBase.NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(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 banner" })),
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style + (this.props.open ? '[popover]{display:grid!important}' : '') } }), jsxRuntime.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, ...utilsEntry.getBannerAriaAttributes(this.props.state, headingText), children: jsxRuntime.jsx(notificationBase.NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
+                                    dismissButton: (jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: "Close banner", ariaDescription: headingText || undefined })),
                                 }) }) })] }), this.props.children] }));
     }
 }

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

@@ -1,14 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
-require('../../provider.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
+var fcDismissButton = require('./fc-dismiss-button.cjs');
 
-const DialogBase = ({ children, 
-// host,
-inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
-    return (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+const DialogBase = ({ children, inert, containerClass, ariaAttributes, onMouseDown, dismissable = false, header, footer, subFooter, }) => {
+    return (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: `Dismiss ${containerClass}` }), header, children, footer, subFooter] }) }) }));
 };
 
 exports.DialogBase = DialogBase;

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

@@ -26,6 +26,9 @@ class DSRDrilldown extends react.Component {
     dialog;
     drawer;
     isDesktop = false;
+    // Tracks whether the current pointer gesture started inside the drawer (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the drawer and released on the backdrop.
+    isPointerDownInside = false;
     async componentWillLoad() {
         this.props.defineDrilldownItemElements();
         const activeItem = this.props.drilldownItemElements.find((item) => item.identifier === this.props.activeIdentifier);

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fc-dismiss-button.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Shared dismiss/close button used across dialog-based (flyout/modal/sheet) and notification-based
+ * (banner/inline-notification/toast) components. Renders a native `<button className="dismiss">` with the close icon
+ * inlined as a CSS mask (see `fc-dismiss-button-styles.ts`) — so it needs neither a nested `p-button` nor a `p-icon`
+ * (avoiding the async CDN icon fetch). Each consumer supplies the variant/positioning styling via the `.dismiss` class.
+ * The visible label text is visually hidden but exposed to assistive technology as the accessible name.
+ */
+const FCDismissButton = ({ label, ariaDescription, }) => {
+    return (jsxRuntime.jsx("button", { className: "dismiss", type: "button", ...(ariaDescription ? { 'aria-description': ariaDescription } : {}), children: jsxRuntime.jsx("span", { children: label }) }));
+};
+
+exports.FCDismissButton = FCDismissButton;

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

@@ -25,6 +25,9 @@ class DSRFlyout extends react.Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    // 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,
@@ -37,7 +40,17 @@ class DSRFlyout extends react.Component {
         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, 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({
+        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: 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' },
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),