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

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [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.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,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.0"
   },
   "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.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5751,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),
             }),
         },
@@ -8442,6 +8440,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 +8510,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 +8530,43 @@ 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),
                 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 +8627,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({

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.0"}]` // 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.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5749,8 +5749,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),
             }),
         },
@@ -8440,6 +8438,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 +8508,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 +8528,43 @@ 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),
                 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 +8625,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({

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