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

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

@@ -7,20 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var popover = require('../dsr-components/popover.cjs');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, children, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, children, ...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,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, description, direction, children })),
+                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, compact, description, direction, open, children })),
             }
             : {
                 children,

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

@@ -1,37 +1,82 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
- * @slot {"name": "", "description": "Default slot for the popover content." }
+ * @slot {"name": "", "description": "Default slot for the popover content. Ignored when the `description` prop is set, which takes precedence." }
  * @slot {"name": "button", "description": "Renders a custom trigger button. When used, the default info button is replaced." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
  */
+// The panel is a native `[popover="manual"]` element that the component promotes to the `#top-layer` itself, so it
+// always renders above surrounding content regardless of ancestor stacking contexts. The component supports two modes:
+// - uncontrolled: `open` is omitted and the component owns visibility via the internal `isOpen` state (toggled by the
+//   default info button or a slotted trigger); dismissal closes it directly.
+// - controlled: `open` is a boolean and the consumer owns visibility via a slotted `button`; dismissal only emits
+//   `dismiss` and the consumer flips `open`. See `isControlled` / `effectiveOpen` for how the two are reconciled.
 class DSRPopover extends react.Component {
     host;
     isOpen = false;
-    popover;
-    button;
-    slottedButton;
-    arrow;
+    // The `[popover]` panel element on the #top-layer that holds the content and the arrow.
+    refPopover;
+    // The default info button rendered in the Shadow DOM (only present when no `button` slot is used).
+    refButton;
+    // The `<slot name="button">` element (only present when a custom trigger is projected); its assigned element is the
+    // actual trigger, see `triggerElement`.
+    refSlotButton;
+    // The visual arrow pointing from the panel to the trigger; positioned by Floating UI's `arrow` middleware.
+    refArrow;
+    // Teardown for the active Floating UI `autoUpdate` subscription; `undefined` while not positioning.
     cleanUpAutoUpdate;
-    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
-    // TODO: This should be updated when slot is changed
-    hasSlottedButton;
+    // The trigger element `autoUpdate` is currently anchored to, so it can be rebound when the trigger identity changes.
+    boundTriggerElement;
+    // Tracks whether the document-level dismiss listeners (outside click / Escape / pointer) are currently registered.
+    hasDismissListeners = false;
+    // Tracks whether a pointer button is currently pressed. Lets `onFocusout` defer pointer-driven focus loss (a click on
+    // an outside element, already handled by `onClickOutside`) to that handler, so a single outside pointer interaction
+    // emits `dismiss` once instead of twice. `onFocusout` then only dismisses on keyboard focus moves (Tab / Shift+Tab).
+    isPointerInteraction = false;
+    // Tracks whether the current pointer gesture *started* inside the trigger or panel. A `click` only fires on the
+    // nearest common ancestor of `mousedown`/`mouseup`, so pressing inside the panel (e.g. starting a text selection),
+    // dragging out and releasing outside retargets the resulting `click` to an ancestor *outside* the popover. Without
+    // this flag `onClickOutside` would then wrongly dismiss. Captured at `pointerdown` time (where `composedPath()` is
+    // still valid) and consumed on the following `click`, so dismissal only happens when the gesture started outside too.
+    isPointerDownInside = false;
+    // Keeps the panel on the #top-layer during its fade-out (Chromium via `overlay`; Safari/Firefox via a deferred hide).
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.refPopover,
+        isShown: () => !!this.props.refPopover?.matches(':popover-open'),
+        show: () => this.props.refPopover?.showPopover(),
+        hide: () => this.props.refPopover?.hidePopover(),
+    });
+    get isControlled() {
+        // Controlled mode is opted into purely by passing a boolean `open`; an omitted (`undefined`) prop means the
+        // component manages its own visibility.
+        return typeof this.props.open === 'boolean';
+    }
+    get effectiveOpen() {
+        // Single source of truth for "is the panel currently open", regardless of mode: the consumer-owned `open` prop in
+        // controlled mode, the internal `isOpen` state otherwise. All render/positioning/dismissal logic reads this.
+        return this.props.isControlled ? this.props.open : this.props.isOpen;
+    }
+    get triggerElement() {
+        // Resolves the element that actually acts as the trigger: the default info button in the Shadow DOM, or — when a
+        // custom trigger is projected through the `button` slot — the assigned light-DOM element itself (not the `<slot>`).
+        // Using the assigned element gives Floating UI an accurate anchor rect and lets `:host` use `display: contents`.
+        // Kept correct across dynamic slot changes by the `observeChildren` re-render in `connectedCallback`.
+        return this.props.refButton ?? ((this.props.refSlotButton)?.assignedElements()[0]);
+    }
     render() {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
-        const style = minifyCss.minifyCss(stylesEntry.getPopoverCss()).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4');
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedButton ? (jsxRuntime.jsx("slot", { name: "button" })) : (jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
-                                        ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                        ...{ 'aria-expanded': this.props.isOpen },
-                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information" }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] })), this.props.isOpen && (jsxRuntime.jsxs("div", { popover: "auto", children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
+        const id = 'popover';
+        const style = minifyCss.minifyCss(stylesEntry.getPopoverCss(this.props.effectiveOpen, this.props.compact).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedButton ? (jsxRuntime.jsx("slot", { name: "button" })) : (jsxRuntime.jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxRuntime.jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsxRuntime.jsx("div", { className: "arrow" }), this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {})] })] })] }), this.props.children] }));
     }
 }
 

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.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);
@@ -3982,11 +3982,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),
@@ -4067,7 +4067,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),
@@ -4077,7 +4077,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
@@ -4102,8 +4102,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
@@ -4120,8 +4120,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',
@@ -5205,7 +5205,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": ""}
  */
@@ -5324,17 +5324,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: {
@@ -5371,15 +5371,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': {
@@ -5657,8 +5657,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),
             }),
         },
@@ -7044,7 +7056,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."}
  */
@@ -7127,7 +7139,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
@@ -7900,7 +7912,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?
 /**
@@ -7960,7 +7972,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',
@@ -7986,11 +7998,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": ""}
  */
@@ -8013,8 +8025,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
@@ -8345,97 +8357,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/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.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);