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

package/CHANGELOG.md

@@ -14,6 +14,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.5.0-rc.1] - 2026-07-20
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet` ([#4602](https://github.com/porsche-design-system/porsche-design-system/pull/4602)):
+  - focus ring color of dismiss button
+  - hover color visibility of dismiss button
+- `Popover`: Trigger icon no longer gets squished when placed inside a constrained flex/grid parent
+  ([#4602](https://github.com/porsche-design-system/porsche-design-system/pull/4602))
+
+## [4.5.0-rc.0] - 2026-07-17
+
+### Changed
+
+- `AG Grid`: Bumped peer dependency to support AG Grid new major version 36
+  ([#4553](https://github.com/porsche-design-system/porsche-design-system/pull/4553))
+- `Popover`: Aligned shadowed popover trigger button style with button-pure
+  ([#4596](https://github.com/porsche-design-system/porsche-design-system/pull/4596))
+
+### Fixed
+
+- `Popover`: A `margin` set on the host is now applied to the shadowed trigger button
+  ([#4596](https://github.com/porsche-design-system/porsche-design-system/pull/4596))
+
 ## [4.4.0] - 2026-07-15
 
 ## [4.4.0-rc.1] - 2026-07-10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.4.0",
+  "version": "4.5.0-rc.1",
   "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,12 +21,12 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.4.0"
+    "@porsche-design-system/components-js": "4.5.0-rc.1"
   },
   "peerDependencies": {
-    "ag-grid-community": ">= 35.0.0 <36.0.0",
-    "ag-grid-enterprise": ">= 35.0.0 <36.0.0",
-    "ag-grid-react": ">= 35.0.0 <36.0.0",
+    "ag-grid-community": ">= 36.0.0 <37.0.0",
+    "ag-grid-enterprise": ">= 36.0.0 <37.0.0",
+    "ag-grid-react": ">= 36.0.0 <37.0.0",
     "react": ">=19.0.0 <20.0.0",
     "react-dom": ">=19.0.0 <20.0.0",
     "tailwindcss": ">= 4.0.0 <5.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"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4289,17 +4289,19 @@ const weightMap = {
 // 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),
+        canvas: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorCanvas),
+            backgroundColorHover: ref(colorSurface),
         },
-        secondary: {
+        surface: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorSurface),
+            backgroundColorHover: ref(colorCanvas),
+        },
+        frosted: {
             textColor: ref(colorPrimary),
             backgroundColor: ref(colorFrostedStrong),
             backgroundColorHover: ref(colorFrosted),
@@ -4333,7 +4335,7 @@ const getFCDismissButtonStyles = (variant) => {
         // 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' && {
+        ...(variant === 'frosted' && {
             WebkitBackdropFilter: ref(blurFrosted),
             backdropFilter: ref(blurFrosted),
         }),
@@ -4417,7 +4419,7 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
         ...(hasDismissButton && {
             dismiss: {
                 // native dismiss button visual (secondary variant); grid positioning is applied on top
-                ...getFCDismissButtonStyles('secondary'),
+                ...getFCDismissButtonStyles('frosted'),
                 gridArea: `1/4/-1`,
                 alignSelf: 'flex-start',
                 marginBlock: `calc(-6 * ${ref(spacingStatic2Xs)})`,
@@ -5751,8 +5753,6 @@ const getFunctionalComponentLabelAfterStyles = () => {
         // last line. `:host(:has([slot="label-after"]))` would be an alternative but lacks reliable Chrome support for now.
         '&::slotted(*)': {
             ...addImportantToEachRule({
-                display: 'inline-block',
-                verticalAlign: 'top',
                 marginInlineStart: ref(spacingStaticXs$1),
             }),
         },
@@ -6042,11 +6042,11 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
         transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
     };
 };
-const getDialogDismissButtonJssStyle = () => {
+const getDialogDismissButtonJssStyle = (variant) => {
     return {
         // native dismiss button visual (primary variant); positioning + the `invert` filter (renders it light on the
         // dialog) are applied on top below
-        ...getFCDismissButtonStyles('primary'),
+        ...getFCDismissButtonStyles(variant),
         gridArea: '1/3',
         zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
         position: 'sticky',
@@ -6054,7 +6054,6 @@ const getDialogDismissButtonJssStyle = () => {
         marginTop: `calc(-1 * ${dialogPaddingTop} + ${ref(spacingFluidSm)})`,
         marginInlineEnd: ref(spacingFluidSm),
         placeSelf: 'flex-start flex-end',
-        filter: 'invert(1) brightness(1.02)',
     };
 };
 const getSlotJssStyle = () => {
@@ -7254,7 +7253,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
             }),
         },
-        dismiss: getDialogDismissButtonJssStyle(),
+        dismiss: getDialogDismissButtonJssStyle(background),
     });
 };
 
@@ -8068,7 +8067,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                 }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };
@@ -8442,6 +8441,13 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
 // Minimum gap (in px) kept between the panel and the viewport edges. Used both as Floating UI `shift`/`flip` padding
 // and to inset the panel's default max-width/height (`100dvw/dvh - 2 * POPOVER_SAFE_ZONE`) so it never touches the edge.
 const POPOVER_SAFE_ZONE = 8;
+// Arrow geometry (in px), single source of truth shared by the JSS `.arrow` rule (`popover-styles.ts`) and the
+// runtime positioning/orientation logic (`popover.tsx`). Named by geometry rather than `width`/`height` because the
+// arrow is rotated per placement, so its rendered CSS `width`/`height` swap depending on the panel edge it attaches to.
+// - `POPOVER_ARROW_BASE`: length of the triangle's base along the panel edge.
+// - `POPOVER_ARROW_THICKNESS`: depth of the triangle perpendicular to the panel edge (how far it protrudes).
+const POPOVER_ARROW_BASE = 24;
+const POPOVER_ARROW_THICKNESS = 12;
 
 /**
  * @css-variable {"name": "--p-popover-w", "description": "Width of the popover.", "defaultValue": "max-content"}
@@ -8505,6 +8511,9 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
                 // flow. Enabled by anchoring Floating UI to the assigned trigger element (see `triggerElement` in popover.tsx)
                 // instead of the `<slot>` box, so the slot no longer needs a layout box of its own.
                 display: 'contents',
+                // Explicit baseline (matches the `margin` initial value) that the trigger button inherits via `margin: inherit`.
+                // A consumer margin on the host (`p-popover { margin: … }`) overrides this and thus flows through to the button.
+                margin: '0',
                 ...addImportantToEachRule(hostHiddenStyles),
             },
             'slot:not([name]), p': {
@@ -8522,30 +8531,49 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
             },
             button: {
                 all: 'unset',
+                // The :host uses `display: contents` and thus has no box of its own, so a consumer-defined margin on the host
+                // (e.g. `p-popover { margin: … }`) would be dropped. `inherit` forwards that margin onto the actual trigger button.
+                margin: 'inherit',
                 display: 'inline-grid',
                 verticalAlign: 'top',
                 font: `${ref(typescaleSm$1)} ${ref(fontPorscheNext$1)}`, // needed for correct width/height definition based on ex-unit
                 width: ref(leadingNormal$1),
                 height: ref(leadingNormal$1),
-                borderRadius: ref(radiusFull),
+                // The :host uses `display: contents`, so this fixed-size trigger button becomes the flex/grid item in the
+                // consumer's layout (e.g. p-accordion's `summary-after` slot, which is `display: flex`). Its visible box is drawn
+                // purely by the `::before`/`::after` pseudo-elements (icon `mask`), so it has no intrinsic content width and its
+                // automatic minimum size collapses towards 0 — a competing sibling (e.g. long summary text) would otherwise
+                // squeeze the info icon flat. `flex: none` keeps the icon at its intended size instead of shrinking.
+                flex: 'none',
                 cursor: 'pointer',
-                background: ref(colorFrosted),
-                transition: getTransition('background-color'),
-                WebkitBackdropFilter: ref(blurFrosted),
-                backdropFilter: ref(blurFrosted),
                 ...hoverMediaQuery({
-                    '&:hover': {
-                        background: ref(colorFrostedSoft),
+                    '&:hover::before': {
+                        background: ref(colorFrostedStrong),
+                        WebkitBackdropFilter: ref(blurFrosted),
+                        backdropFilter: ref(blurFrosted),
                     },
                 }),
-                '&:focus-visible': getFocusBaseStyles(),
+                '&:focus-visible::before': getFocusBaseStyles(),
+                '&::before': {
+                    gridArea: '1/1',
+                    content: '""',
+                    margin: '-2px',
+                    transition: getTransition('background-color'),
+                    borderRadius: ref(radiusFull),
+                    ...(isOpen && {
+                        background: ref(colorFrosted),
+                        WebkitBackdropFilter: ref(blurFrosted),
+                        backdropFilter: ref(blurFrosted),
+                    }),
+                },
                 '&::after': {
+                    gridArea: '1/1',
                     content: '""',
                     WebkitMask: `${iconInfo} center/contain no-repeat`, // necessary for Sogou browser support :-)
                     mask: `${iconInfo} center/contain no-repeat`,
                     background: ref(colorPrimary),
                     ...forcedColorsMediaQuery({
-                        background: 'CanvasText',
+                        background: 'ButtonText',
                     }),
                 },
             },
@@ -8606,8 +8634,9 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
         },
         arrow: {
             position: 'absolute',
-            width: '24px',
-            height: '12px',
+            // Resting orientation (bottom placement): base spans the panel edge, thickness protrudes towards the trigger.
+            width: `${POPOVER_ARROW_BASE}px`,
+            height: `${POPOVER_ARROW_THICKNESS}px`,
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
             background: 'inherit',
             ...forcedColorsMediaQuery({
@@ -9255,7 +9284,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };

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"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);

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"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4287,17 +4287,19 @@ const weightMap = {
 // 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),
+        canvas: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorCanvas),
+            backgroundColorHover: ref(colorSurface),
         },
-        secondary: {
+        surface: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorSurface),
+            backgroundColorHover: ref(colorCanvas),
+        },
+        frosted: {
             textColor: ref(colorPrimary),
             backgroundColor: ref(colorFrostedStrong),
             backgroundColorHover: ref(colorFrosted),
@@ -4331,7 +4333,7 @@ const getFCDismissButtonStyles = (variant) => {
         // 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' && {
+        ...(variant === 'frosted' && {
             WebkitBackdropFilter: ref(blurFrosted),
             backdropFilter: ref(blurFrosted),
         }),
@@ -4415,7 +4417,7 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
         ...(hasDismissButton && {
             dismiss: {
                 // native dismiss button visual (secondary variant); grid positioning is applied on top
-                ...getFCDismissButtonStyles('secondary'),
+                ...getFCDismissButtonStyles('frosted'),
                 gridArea: `1/4/-1`,
                 alignSelf: 'flex-start',
                 marginBlock: `calc(-6 * ${ref(spacingStatic2Xs)})`,
@@ -5749,8 +5751,6 @@ const getFunctionalComponentLabelAfterStyles = () => {
         // last line. `:host(:has([slot="label-after"]))` would be an alternative but lacks reliable Chrome support for now.
         '&::slotted(*)': {
             ...addImportantToEachRule({
-                display: 'inline-block',
-                verticalAlign: 'top',
                 marginInlineStart: ref(spacingStaticXs$1),
             }),
         },
@@ -6040,11 +6040,11 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
         transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
     };
 };
-const getDialogDismissButtonJssStyle = () => {
+const getDialogDismissButtonJssStyle = (variant) => {
     return {
         // native dismiss button visual (primary variant); positioning + the `invert` filter (renders it light on the
         // dialog) are applied on top below
-        ...getFCDismissButtonStyles('primary'),
+        ...getFCDismissButtonStyles(variant),
         gridArea: '1/3',
         zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
         position: 'sticky',
@@ -6052,7 +6052,6 @@ const getDialogDismissButtonJssStyle = () => {
         marginTop: `calc(-1 * ${dialogPaddingTop} + ${ref(spacingFluidSm)})`,
         marginInlineEnd: ref(spacingFluidSm),
         placeSelf: 'flex-start flex-end',
-        filter: 'invert(1) brightness(1.02)',
     };
 };
 const getSlotJssStyle = () => {
@@ -7252,7 +7251,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
             }),
         },
-        dismiss: getDialogDismissButtonJssStyle(),
+        dismiss: getDialogDismissButtonJssStyle(background),
     });
 };
 
@@ -8066,7 +8065,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                 }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };
@@ -8440,6 +8439,13 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
 // Minimum gap (in px) kept between the panel and the viewport edges. Used both as Floating UI `shift`/`flip` padding
 // and to inset the panel's default max-width/height (`100dvw/dvh - 2 * POPOVER_SAFE_ZONE`) so it never touches the edge.
 const POPOVER_SAFE_ZONE = 8;
+// Arrow geometry (in px), single source of truth shared by the JSS `.arrow` rule (`popover-styles.ts`) and the
+// runtime positioning/orientation logic (`popover.tsx`). Named by geometry rather than `width`/`height` because the
+// arrow is rotated per placement, so its rendered CSS `width`/`height` swap depending on the panel edge it attaches to.
+// - `POPOVER_ARROW_BASE`: length of the triangle's base along the panel edge.
+// - `POPOVER_ARROW_THICKNESS`: depth of the triangle perpendicular to the panel edge (how far it protrudes).
+const POPOVER_ARROW_BASE = 24;
+const POPOVER_ARROW_THICKNESS = 12;
 
 /**
  * @css-variable {"name": "--p-popover-w", "description": "Width of the popover.", "defaultValue": "max-content"}
@@ -8503,6 +8509,9 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
                 // flow. Enabled by anchoring Floating UI to the assigned trigger element (see `triggerElement` in popover.tsx)
                 // instead of the `<slot>` box, so the slot no longer needs a layout box of its own.
                 display: 'contents',
+                // Explicit baseline (matches the `margin` initial value) that the trigger button inherits via `margin: inherit`.
+                // A consumer margin on the host (`p-popover { margin: … }`) overrides this and thus flows through to the button.
+                margin: '0',
                 ...addImportantToEachRule(hostHiddenStyles),
             },
             'slot:not([name]), p': {
@@ -8520,30 +8529,49 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
             },
             button: {
                 all: 'unset',
+                // The :host uses `display: contents` and thus has no box of its own, so a consumer-defined margin on the host
+                // (e.g. `p-popover { margin: … }`) would be dropped. `inherit` forwards that margin onto the actual trigger button.
+                margin: 'inherit',
                 display: 'inline-grid',
                 verticalAlign: 'top',
                 font: `${ref(typescaleSm$1)} ${ref(fontPorscheNext$1)}`, // needed for correct width/height definition based on ex-unit
                 width: ref(leadingNormal$1),
                 height: ref(leadingNormal$1),
-                borderRadius: ref(radiusFull),
+                // The :host uses `display: contents`, so this fixed-size trigger button becomes the flex/grid item in the
+                // consumer's layout (e.g. p-accordion's `summary-after` slot, which is `display: flex`). Its visible box is drawn
+                // purely by the `::before`/`::after` pseudo-elements (icon `mask`), so it has no intrinsic content width and its
+                // automatic minimum size collapses towards 0 — a competing sibling (e.g. long summary text) would otherwise
+                // squeeze the info icon flat. `flex: none` keeps the icon at its intended size instead of shrinking.
+                flex: 'none',
                 cursor: 'pointer',
-                background: ref(colorFrosted),
-                transition: getTransition('background-color'),
-                WebkitBackdropFilter: ref(blurFrosted),
-                backdropFilter: ref(blurFrosted),
                 ...hoverMediaQuery({
-                    '&:hover': {
-                        background: ref(colorFrostedSoft),
+                    '&:hover::before': {
+                        background: ref(colorFrostedStrong),
+                        WebkitBackdropFilter: ref(blurFrosted),
+                        backdropFilter: ref(blurFrosted),
                     },
                 }),
-                '&:focus-visible': getFocusBaseStyles(),
+                '&:focus-visible::before': getFocusBaseStyles(),
+                '&::before': {
+                    gridArea: '1/1',
+                    content: '""',
+                    margin: '-2px',
+                    transition: getTransition('background-color'),
+                    borderRadius: ref(radiusFull),
+                    ...(isOpen && {
+                        background: ref(colorFrosted),
+                        WebkitBackdropFilter: ref(blurFrosted),
+                        backdropFilter: ref(blurFrosted),
+                    }),
+                },
                 '&::after': {
+                    gridArea: '1/1',
                     content: '""',
                     WebkitMask: `${iconInfo} center/contain no-repeat`, // necessary for Sogou browser support :-)
                     mask: `${iconInfo} center/contain no-repeat`,
                     background: ref(colorPrimary),
                     ...forcedColorsMediaQuery({
-                        background: 'CanvasText',
+                        background: 'ButtonText',
                     }),
                 },
             },
@@ -8604,8 +8632,9 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
         },
         arrow: {
             position: 'absolute',
-            width: '24px',
-            height: '12px',
+            // Resting orientation (bottom placement): base spans the panel edge, thickness protrudes towards the trigger.
+            width: `${POPOVER_ARROW_BASE}px`,
+            height: `${POPOVER_ARROW_THICKNESS}px`,
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
             background: 'inherit',
             ...forcedColorsMediaQuery({
@@ -9253,7 +9282,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };

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"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);