@porsche-design-system/components-react 4.5.0-rc.0 → 4.5.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.5.0] - 2026-07-21
+
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.5.0-rc.0",
+  "version": "4.5.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.5.0-rc.0"
+    "@porsche-design-system/components-js": "4.5.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 36.0.0 <37.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.5.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0"}]` // 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)})`,
@@ -6040,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',
@@ -6052,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 = () => {
@@ -7252,7 +7253,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
             }),
         },
-        dismiss: getDialogDismissButtonJssStyle(),
+        dismiss: getDialogDismissButtonJssStyle(background),
     });
 };
 
@@ -8066,7 +8067,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                 }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };
@@ -8538,6 +8539,12 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
                 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),
+                // 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',
                 ...hoverMediaQuery({
                     '&:hover::before': {
@@ -9277,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.5.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.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.5.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0"}]` // 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)})`,
@@ -6038,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',
@@ -6050,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 = () => {
@@ -7250,7 +7251,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
             }),
         },
-        dismiss: getDialogDismissButtonJssStyle(),
+        dismiss: getDialogDismissButtonJssStyle(background),
     });
 };
 
@@ -8064,7 +8065,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                 }),
         },
         ...(hasDismissButton && {
-            dismiss: getDialogDismissButtonJssStyle(),
+            dismiss: getDialogDismissButtonJssStyle(background),
         }),
     });
 };
@@ -8536,6 +8537,12 @@ const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
                 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),
+                // 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',
                 ...hoverMediaQuery({
                     '&:hover::before': {
@@ -9275,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.5.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.5.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);