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

package/CHANGELOG.md

@@ -14,6 +14,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.4.0-rc.0] - 2026-07-06
+
+### Added
+
+- `Popover` ([#4562](https://github.com/porsche-design-system/porsche-design-system/pull/4562)):
+  - Support for controlled and uncontrolled usage: when the `open` prop is omitted the component manages its own
+    visibility (uncontrolled), when it is set the consumer owns the open state via a custom trigger projected through
+    the named `button` slot (controlled)
+  - `open` prop to control the popover's visibility in controlled mode
+  - `compact` prop to reduce padding and spacing for a more compact layout, useful in space-constrained interfaces
+  - `dismiss` event emitted in controlled mode when the user requests to close the popover via the `Escape` key, an
+    outside click, or when keyboard focus leaves the popover (`Tab` / `Shift+Tab`)
+  - CSS variables to customize the popover panel: `--p-popover-w`, `--p-popover-h`, `--p-popover-min-w`,
+    `--p-popover-min-h`, `--p-popover-max-w`, `--p-popover-max-h`, `--p-popover-px`, `--p-popover-py` and
+    `--p-popover-radius`
+
+### Changed
+
+- `Popover`: Improved visual appearance
+  ([#4562](https://github.com/porsche-design-system/porsche-design-system/pull/4562))
+
 ## [4.3.0] - 2026-06-24
 
 ## [4.3.0-rc.0] - 2026-06-24

package/cjs/lib/components/popover.wrapper.cjs

@@ -6,13 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, compact, description, direction, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'description', 'direction', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/popover.wrapper.d.ts

@@ -6,7 +6,11 @@ export type PPopoverProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
-     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
+     */
+    compact?: boolean;
+    /**
+     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information. Takes precedence over the default slot when both are provided.
      */
     description?: string;
     /**
@@ -14,6 +18,14 @@ export type PPopoverProps = BaseProps & {
      * @default 'bottom'
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab).
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Controls whether the popover is visible. When set (controlled mode), visibility follows this prop and the consumer owns the open state via a slotted `button`. When omitted (uncontrolled mode), the component manages visibility itself.
+     */
+    open?: boolean;
 };
 export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -21,7 +33,11 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<im
      */
     aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
-     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
+     */
+    compact?: boolean;
+    /**
+     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information. Takes precedence over the default slot when both are provided.
      */
     description?: string;
     /**
@@ -29,6 +45,14 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<im
      * @default 'bottom'
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab).
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Controls whether the popover is visible. When set (controlled mode), visibility follows this prop and the consumer owns the open state via a slotted `button`. When omitted (uncontrolled mode), the component manages visibility itself.
+     */
+    open?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/popover.wrapper.mjs

@@ -1,16 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, compact, description, direction, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'description', 'direction', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.3.0",
+  "version": "4.4.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,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.3.0"
+    "@porsche-design-system/components-js": "4.4.0-rc.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.3.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.4.0-rc.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -3984,11 +3984,11 @@ const cssVarSummaryTopDeprecated = '--p-accordion-position-sticky-top'; // depre
 /**
  * @css-variable {"name": "--p-accordion-px", "description": "Horizontal padding of the accordion.", "defaultValue": "16px"}
  */
-const cssVarPaddingInline$1 = '--p-accordion-px';
+const cssVarPaddingInline$2 = '--p-accordion-px';
 /**
  * @css-variable {"name": "--p-accordion-py", "description": "Vertical padding of the accordion.", "defaultValue": "16px"}
  */
-const cssVarPaddingBlock = '--p-accordion-py';
+const cssVarPaddingBlock$1 = '--p-accordion-py';
 const iconMarker = getInlineSVGBackgroundImage(`<path d="m12 15.125h-.001l-.005-.006-6.494-5.476.642-.768 5.858 4.94 5.858-4.94.642.769-6.497 5.477z"/>`);
 const backgroundMap$1 = {
     canvas: ref(colorCanvas),
@@ -4069,7 +4069,7 @@ const getComponentCss$1a = (alignMarker, background, isCompact, indent, isOpen,
                 gridTemplate: `repeat(2, auto) / ${hasSummaryBefore ? 'auto ' : ''}${isIconAlignedStart ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr) auto'}${hasSummaryAfter ? ' auto ' : ''}`,
                 columnGap: gap,
                 alignItems: 'center',
-                padding: `${ref(cssVarPaddingBlock, background === 'none' ? '0' : paddingBlock)} ${ref(cssVarPaddingInline$1, background === 'none' ? '0' : paddingInline)}`,
+                padding: `${ref(cssVarPaddingBlock$1, background === 'none' ? '0' : paddingBlock)} ${ref(cssVarPaddingInline$2, background === 'none' ? '0' : paddingInline)}`,
                 background: backgroundMap$1[background],
                 ...(background === 'frosted' && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -4079,7 +4079,7 @@ const getComponentCss$1a = (alignMarker, background, isCompact, indent, isOpen,
                 ...forcedColorsMediaQuery({
                     outline: '1px solid CanvasText',
                     outlineOffset: background === 'none' ? '0' : '-1px',
-                    padding: `${ref(cssVarPaddingBlock, paddingBlock)} ${ref(cssVarPaddingInline$1, paddingInline)}`,
+                    padding: `${ref(cssVarPaddingBlock$1, paddingBlock)} ${ref(cssVarPaddingInline$2, paddingInline)}`,
                 }),
                 '&::details-content': addImportantToEachRule({
                     display: 'contents', // allows <details> to be used as grid layout
@@ -4104,8 +4104,8 @@ const getComponentCss$1a = (alignMarker, background, isCompact, indent, isOpen,
                         opacity: 1,
                         paddingTop,
                         zIndex: 2, // Ensure details are above summary when using custom padding
-                        paddingInline: `${ref(cssVarPaddingInline$1, background === 'none' ? '0' : paddingInline)}`,
-                        marginInline: `calc(-1 * ${ref(cssVarPaddingInline$1, background === 'none' ? '0' : paddingInline)})`,
+                        paddingInline: `${ref(cssVarPaddingInline$2, background === 'none' ? '0' : paddingInline)}`,
+                        marginInline: `calc(-1 * ${ref(cssVarPaddingInline$2, background === 'none' ? '0' : paddingInline)})`,
                         // as soon as all browsers support calc-size(auto) to be transitionable, we can remove the grid-template-rows rule and animation
                         gridTemplateRows: '1fr',
                         visibility: 'inherit', // since `::details-content` and `allow-discrete` transition doesn't work in Safari we need to take care ourselves for visibility state to be a11y compliant
@@ -4122,8 +4122,8 @@ const getComponentCss$1a = (alignMarker, background, isCompact, indent, isOpen,
                 gridTemplateColumns: 'subgrid',
                 alignItems: 'center',
                 cursor: 'pointer',
-                padding: `${ref(cssVarPaddingBlock, background === 'none' ? '0' : paddingBlock)} ${ref(cssVarPaddingInline$1, background === 'none' ? '0' : paddingInline)}`,
-                margin: `calc(-1 * ${ref(cssVarPaddingBlock, background === 'none' ? '0' : paddingBlock)}) calc(-1 * ${ref(cssVarPaddingInline$1, background === 'none' ? '0' : paddingInline)})`,
+                padding: `${ref(cssVarPaddingBlock$1, background === 'none' ? '0' : paddingBlock)} ${ref(cssVarPaddingInline$2, background === 'none' ? '0' : paddingInline)}`,
+                margin: `calc(-1 * ${ref(cssVarPaddingBlock$1, background === 'none' ? '0' : paddingBlock)}) calc(-1 * ${ref(cssVarPaddingInline$2, background === 'none' ? '0' : paddingInline)})`,
                 ...(isSticky &&
                     (background === 'canvas' || background === 'surface') && {
                     position: 'sticky',
@@ -5207,7 +5207,7 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
 /**
  * @css-variable {"name": "--p-carousel-px", "description": "Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
  */
-const cssVarPaddingInline = '--p-carousel-px';
+const cssVarPaddingInline$1 = '--p-carousel-px';
 /**
  * @css-variable {"name": "--p-carousel-ps", "description": "Defines the logical inline start padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-pe`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
  */
@@ -5326,17 +5326,17 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
         },
         header: {
             display: 'grid',
-            paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].base)),
-            paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].base)),
+            paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].base)),
+            paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].base)),
             [mediaQueryS]: {
                 gridTemplateColumns: 'minmax(0px,1fr) auto',
-                paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].s)),
-                paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].s)),
+                paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].s)),
+                paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].s)),
                 ...(hasNavigation && { columnGap: ref(spacingStaticMd) }),
             },
             [mediaQueryXXL]: {
-                paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].xxl)),
-                paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].xxl)),
+                paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].xxl)),
+                paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].xxl)),
             },
         },
         nav: {
@@ -5373,15 +5373,15 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
                     paddingBlock: '0px',
-                    paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].base)),
-                    paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].base)),
+                    paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].base)),
+                    paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].base)),
                     [mediaQueryS]: {
-                        paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].s)),
-                        paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].s)),
+                        paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].s)),
+                        paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].s)),
                     },
                     [mediaQueryXXL]: {
-                        paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline, spacingMap[width].xxl)),
-                        paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline, spacingMap[width].xxl)),
+                        paddingInlineStart: ref(cssVarPaddingInlineStart, ref(cssVarPaddingInline$1, spacingMap[width].xxl)),
+                        paddingInlineEnd: ref(cssVarPaddingInlineEnd, ref(cssVarPaddingInline$1, spacingMap[width].xxl)),
                     },
                 }),
                 '&--draggable': {
@@ -5659,8 +5659,20 @@ const getFunctionalComponentLabelAfterStyles = () => {
     const labelAfterStyles = {
         display: 'inline-block',
         verticalAlign: 'top',
+        // The inline-start spacing is applied to the assigned elements via `::slotted(*)` (not to the `<slot>` box or via
+        // `:empty`), so it only exists when the "label-after" slot actually has content — an empty slot renders no margin.
+        // `::slotted()` alone would fail for a slotted `p-popover`, whose `:host` uses `display: contents` (a `contents` box
+        // has no margins). To fix that, we also set `display: inline-block` on the slotted element: since `::slotted()` is a
+        // rule from the *outer* shadow tree, its normal declarations win over the popover's own (inner-tree) normal
+        // `:host { display: contents }` in the shadow-tree cascade — this is a cascade/context precedence, not specificity.
+        // The re-established inline-block box then has something for `margin-inline-start` to apply to.
+        // Note: relies on `p-popover`'s `:host { display: contents }` staying non-`!important`; an inner `!important` would
+        // beat this outer normal declaration. Keeping inline flow (vs. flex/gap) lets label-after follow a wrapped label's
+        // 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),
             }),
         },
@@ -7046,7 +7058,7 @@ const getComponentCss$W = (size) => {
 /**
  * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
  */
-const cssVariableWidth$2 = '--p-flyout-width';
+const cssVariableWidth$3 = '--p-flyout-width';
 /**
  * @css-variable {"name": "--p-flyout-sticky-top", "description": "@experimental Exposes the header's height as a read-only CSS variable, set automatically by the component. Slotted sticky content can use this value to offset their top position correctly."}
  */
@@ -7129,7 +7141,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     },
                 }
                 : {
-                    width: ref(cssVariableWidth$2, 'auto'),
+                    width: ref(cssVariableWidth$3, 'auto'),
                     minWidth: '320px',
                     maxWidth: '100vw',
                     clipPath: isPositionStart
@@ -7902,7 +7914,7 @@ const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAncho
  * @css-variable {"name": "--p-modal-spacing-top", "description": "Spacing of the modal to the top.", "defaultValue": "clamp(16px, 10vh, 192px)"}
  * @css-variable {"name": "--p-modal-spacing-bottom", "description": "Spacing of the modal to the bottom.", "defaultValue": "clamp(16px, 10vh, 192px)"}
  */
-const cssVariableWidth$1 = '--p-modal-width';
+const cssVariableWidth$2 = '--p-modal-width';
 const cssVariableSpacingTop = '--p-modal-spacing-top'; // TODO: maybe --p-modal-spacing-block-start would be more precise?
 const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-modal-spacing-block-end would be more precise?
 /**
@@ -7962,7 +7974,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     clipPath: 'none', // fullscreen has square corners, so disable corner clipping
                 }
                 : {
-                    width: ref(cssVariableWidth$1, 'auto'),
+                    width: ref(cssVariableWidth$2, 'auto'),
                     minWidth: '276px', // to be in sync with "Porsche Grid" on viewport = 320px: calc(${gridColumnWidthBase} * 6 + ${gridGap} * 5)
                     maxWidth: '1535.5px', // to be in sync with "Porsche Grid" on viewport >= 1920px: `calc(${gridColumnWidthXXL} * 14 + ${gridGap} * 13)`
                     placeSelf: 'center',
@@ -7988,11 +8000,11 @@ const getSvgUrl = (model) => {
 /**
  * @css-variable {"name": "--p-model-signature-width", "description": "Overrides the width of the model signature.", "defaultValue": ""}
  */
-const cssVariableWidth = '--p-model-signature-width';
+const cssVariableWidth$1 = '--p-model-signature-width';
 /**
  * @css-variable {"name": "--p-model-signature-height", "description": "Overrides the height of the model signature.", "defaultValue": "auto"}
  */
-const cssVariableHeight = '--p-model-signature-height';
+const cssVariableHeight$1 = '--p-model-signature-height';
 /**
  * @css-variable {"name": "--p-model-signature-color", "description": "Overrides the fill color of the model signature. Overrides the `color` property when set.", "defaultValue": ""}
  */
@@ -8015,8 +8027,8 @@ const getComponentCss$B = (model, safeZone, size, color) => {
                 maxWidth: '100%',
                 maxHeight: '100%',
                 // width + height style can't be !important atm to be backwards compatible with e.g. `<p-model-signature size="inherit" style="height: 50px"/>`
-                width: ref(cssVariableWidth, isSizeInherit ? 'auto' : `${width}px`),
-                height: ref(cssVariableHeight, 'auto'),
+                width: ref(cssVariableWidth$1, isSizeInherit ? 'auto' : `${width}px`),
+                height: ref(cssVariableHeight$1, 'auto'),
                 ...addImportantToEachRule({
                     mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
                     aspectRatio: `${width} / ${safeZone ? 36 : height}`, // 36px is the max-height for SVG model signature creation
@@ -8347,97 +8359,201 @@ 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;
 
-const getComponentCss$v = () => {
-    const shadowColor = 'rgba(0,0,0,0.3)';
-    return getCss({
+/**
+ * @css-variable {"name": "--p-popover-w", "description": "Width of the popover.", "defaultValue": "max-content"}
+ */
+const cssVariableWidth = '--p-popover-w';
+/**
+ * @css-variable {"name": "--p-popover-h", "description": "Height of the popover.", "defaultValue": "auto"}
+ */
+const cssVariableHeight = '--p-popover-h';
+/**
+ * @css-variable {"name": "--p-popover-min-w", "description": "Min width of the popover.", "defaultValue": "0px"}
+ */
+const cssVariableMinWidth = '--p-popover-min-w';
+/**
+ * @css-variable {"name": "--p-popover-min-h", "description": "Min height of the popover.", "defaultValue": "auto"}
+ */
+const cssVariableMinHeight = '--p-popover-min-h';
+/**
+ * @css-variable {"name": "--p-popover-max-w", "description": "Max width of the popover.", "defaultValue": "min(calc(100dvw - 16px), 48ch)"}
+ */
+const cssVariableMaxWidth = '--p-popover-max-w';
+/**
+ * @css-variable {"name": "--p-popover-max-h", "description": "Max height of the popover.", "defaultValue": "calc(100dvh - 16px)"}
+ */
+const cssVariableMaxHeight = '--p-popover-max-h';
+/**
+ * @css-variable {"name": "--p-popover-px", "description": "Horizontal padding of the popover. It is recommended to apply an existing Porsche Design System spacing token, e.g. the CSS declaration `--p-popover-px: var(--p-spacing-static-md)`, the Tailwind CSS arbitrary property `[--p-popover-px:var(--spacing-static-md)]` or the equivalent SCSS/JS token.", "defaultValue": "16px"}
+ */
+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"}
+ */
+const cssVarPaddingBlock = '--p-popover-py';
+/**
+ * @css-variable {"name": "--p-popover-radius", "description": "Border radius of the popover. It is recommended to apply an existing Porsche Design System border-radius token, e.g. the CSS declaration `--p-popover-radius: var(--p-radius-lg)`, the Tailwind CSS arbitrary property `[--p-popover-radius:var(--radius-lg)]` or the equivalent SCSS/JS token.", "defaultValue": "12px"}
+ */
+const cssVarRadius = '--p-popover-radius';
+const iconInfo = getInlineSVGBackgroundImage(`<path d="M12.5 10v6h-1v-6zm0-2v1h-1V8zM12 4a8 8 0 0 1 0 16 8 8 0 0 1 0-16m0-1c-4.95 0-9 4.05-9 9s4.05 9 9 9 9-4.05 9-9-4.05-9-9-9"/>`);
+/**
+ * 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.
+ */
+const getComponentCss$v = (isOpen, isCompact) => {
+    // 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 css = getCss({
         '@global': {
-            '@keyframes fade-in': {
-                from: {
-                    opacity: 0,
-                },
-                to: {
-                    opacity: 1,
-                },
-            },
             ':host': {
-                position: 'relative', // ensures correct reference for floating ui fallback positioning in older browsers
-                display: 'inline-block',
-                verticalAlign: 'top',
-                ...addImportantToEachRule({
-                    ...hostHiddenStyles,
-                }),
+                // `display: contents` so the host box does not participate in visual DOM rendering — the popover mimics the
+                // native `[popover]` element, so the slotted trigger (or default info button) lays out directly in the parent
+                // 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',
+                ...addImportantToEachRule(hostHiddenStyles),
             },
-            'slot[name="button"]': {
+            'slot:not([name]), p': {
                 display: 'block',
-            },
-            ...preventFoucOfNestedElementsStyles,
-            p: {
-                font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
-                margin: 0,
+                margin: 0, // reset ua-style for paragraphs
+                minWidth: 0, // allow the grid item to shrink below its content size (needed for correct clamping via --p-popover-max-w)
+                minHeight: 0, // allow the grid item to shrink below its content size so overflow scrolls instead of expanding the panel (needed for --p-popover-max-h)
+                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))}`,
+                overflow: 'hidden auto',
+                overscrollBehaviorY: 'none',
             },
             button: {
                 all: 'unset',
-                display: 'block',
+                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), // width needed to improve ssr support
-                height: ref(leadingNormal$1), // height needed to improve ssr support
+                width: ref(leadingNormal$1),
+                height: ref(leadingNormal$1),
                 borderRadius: ref(radiusFull),
                 cursor: 'pointer',
-                backgroundColor: ref(colorFrosted),
+                background: ref(colorFrosted),
                 transition: getTransition('background-color'),
                 WebkitBackdropFilter: ref(blurFrosted),
                 backdropFilter: ref(blurFrosted),
                 ...hoverMediaQuery({
                     '&:hover': {
-                        backgroundColor: ref(colorFrostedSoft),
+                        background: ref(colorFrostedSoft),
                     },
                 }),
                 '&:focus-visible': getFocusBaseStyles(),
+                '&::after': {
+                    content: '""',
+                    WebkitMask: `${iconInfo} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${iconInfo} center/contain no-repeat`,
+                    background: ref(colorPrimary),
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
+                },
             },
             '[popover]': {
                 all: 'unset',
-                position: 'absolute',
-                pointerEvents: 'none',
-                filter: `drop-shadow(0 0 16px ${shadowColor})`,
+                position: 'fixed', // matches floating ui's `fixed` strategy; required for correct top-layer positioning in Safari
+                top: 0,
+                left: 0,
+                filter: 'drop-shadow(0 0 16px rgba(0,0,0,.3))',
                 backdropFilter: 'drop-shadow(0 0 transparent)', // workaround for Firefox bug not rendering PDS frosted glass correctly when nested inside CSS filter: https://bugzilla.mozilla.org/show_bug.cgi?id=1797051
-                animation: `${ref(cssVariableAnimationDuration, ref(durationSm))} fade-in ${ref(easeInOut)} forwards`,
-                '&:not(:popover-open)': {
-                    display: 'none', // ensures popover is not flickering when closed in some situations
+                borderRadius: ref(cssVarRadius, isCompact ? ref(radiusLg) : ref(radiusXl)),
+                // Fallback for engines without CSS relative color syntax (< Chromium 119 / Safari 16.4 / Firefox 128): the
+                // `hsl(from …)` override below would be an invalid value and get dropped, leaving the panel with no background.
+                // The plain `light-dark()` token renders correct white (light) / near-black (dark) as graceful degradation.
+                background: ref(colorCanvas),
+                // Relative color syntax: lightens ONLY the dark scheme (light `#fff` clamps at l=100 → stays white; dark
+                // `l≈1.2%` → `≈15.2%`). Feature-test string kept in sync with `spinner-styles.ts` (one relative-color feature
+                // covers all color functions).
+                '@supports (color: oklch(from red l c h))': {
+                    background: `hsl(from ${ref(colorCanvas)} h 0% calc(l + 14))`,
+                },
+                font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
+                color: ref(colorPrimary),
+                width: ref(cssVariableWidth, 'max-content'),
+                height: ref(cssVariableHeight, 'auto'),
+                minWidth: ref(cssVariableMinWidth, '0px'),
+                minHeight: ref(cssVariableMinHeight, 'auto'),
+                maxWidth: ref(cssVariableMaxWidth, `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`),
+                maxHeight: ref(cssVariableMaxHeight, `calc(100dvh - ${POPOVER_SAFE_ZONE * 2}px)`),
+                opacity: isOpen ? 1 : 0,
+                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`,
+                }),
+                // 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
+                // `showPopover()` / `hidePopover()` actually promote/remove the element to/from the #top-layer. Driving them
+                // from `isOpen` would desync from that native state — e.g. Safari/Firefox defer `hidePopover()` until the
+                // fade-out ends (see `createTopLayerController`), so `display` must stay `grid` while `:popover-open` is still
+                // truthy; an `isOpen`-based `display: none` would hide the panel instantly and kill the fade. Binding to
+                // `:popover-open` keeps CSS in lockstep with the browser across all engines, while the Chromium-only
+                // `allow-discrete` transition above animates the discrete `overlay`/`display` switch during the fade-out.
+                overlay: 'none',
+                display: 'none',
+                '&:popover-open': {
+                    overlay: 'auto',
+                    display: 'grid',
+                },
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                }),
+                '&::backdrop': {
+                    display: 'none', // reset ua-style
                 },
             },
         },
-        label: getHiddenTextJssStyle(),
-        icon: {
-            transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
-        },
         arrow: {
             position: 'absolute',
             width: '24px',
             height: '12px',
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
-            background: ref(colorCanvas),
+            background: 'inherit',
             ...forcedColorsMediaQuery({
                 background: 'CanvasText',
             }),
         },
-        content: {
-            maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
-            width: 'max-content', // ensures in older browsers correct width
-            boxSizing: 'border-box',
-            padding: `${ref(spacingStaticSm$1)} ${ref(spacingStaticMd)}`,
-            pointerEvents: 'auto',
-            borderRadius: ref(radiusXl),
-            background: ref(colorCanvas),
-            font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
-            color: ref(colorPrimary),
-            ...forcedColorsMediaQuery({
-                outline: '2px solid CanvasText',
-                outlineOffset: '-2px',
-            }),
-        },
     });
+    // Fade-IN: `@starting-style` supplies the opacity the browser transitions *from* on the first rendered frame, i.e. the
+    // moment the panel leaves `display: none` via `:popover-open` (triggered by `showPopover()`). Without it the panel
+    // snaps to full opacity, because its computed `opacity` is already `1` by the time it is promoted out of `display:
+    // none`. The fade-OUT needs no starting style (a rendered prior state already exists). Appended as raw CSS because the
+    // JSS conditional-rule plugin only supports `@media`/`@supports`/`@container`, not `@starting-style`. Unsupported
+    // 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`:
+    //   • 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
+    //     fade) — which fixes the one downside of the current approach (initial `open=true` fades in on page load).
+    //   • Caveat: drive `visibility` + `width/height` from the `isOpen` flag with a CLOSE-ONLY delayed transition
+    //     (`… 0s linear ${isOpen ? '0s' : motionDurationMap.short}`), NOT from `:popover-open`. `:popover-open` drops
+    //     immediately on Chromium (only Safari/FF defer `hidePopover()`), so `:popover-open`-bound dimensions would collapse
+    //     to 0 at the START of the Chromium fade-out and clip the panel mid-fade. The delay keeps size/visibility through
+    //     the fade and collapses them only afterwards. `:popover-open` then remains solely for `overlay` + the Chromium
+    //     `allow-discrete` top-layer retention.
+    //   • `visibility: hidden` still occupies layout (can cause scrollbars), which is why it must be paired with
+    //     `width/height: 0`. `inert` is still required either way (visibility is delayed, so the panel stays visible/
+    //     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;
 };
 
 const cssVarInternalRadioGroupOptionScaling = '--_p-radio-group-option-a';

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