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

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.1"}]` // 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',
@@ -4220,9 +4220,6 @@ const getComponentCss$19 = () => {
     });
 };
 
-const TOAST_Z_INDEX = 999999;
-const BANNER_Z_INDEX = 99;
-
 const colorMap$3 = {
     primary: ref(colorPrimary),
     'contrast-higher': ref(colorContrastHigher),
@@ -4287,6 +4284,86 @@ const weightMap = {
     bold: ref(fontWeightBold),
 };
 
+// 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),
+        },
+        secondary: {
+            textColor: ref(colorPrimary),
+            backgroundColor: ref(colorFrostedStrong),
+            backgroundColorHover: ref(colorFrosted),
+        },
+    };
+    return colors[variant];
+};
+/**
+ * Visual styles for the shared native `<button class="dismiss">` dismiss button. Returns the button rule (reset,
+ * variant colors, focus ring, High Contrast Mode, hover, inlined close-icon mask and the visually-hidden label). Each
+ * consumer merges this with its own positioning styles for the `dismiss` key (e.g. grid placement in
+ * `notification-base-styles` / `dialog-base-styles`).
+ *
+ * Reduced to the dismiss button's fixed configuration (always `compact` + `hideLabel`): padding `6px`, full border
+ * radius and no gap — the responsive `compact`/`hideLabel` branches from `getLinkButtonStyles` are therefore collapsed.
+ */
+const getFCDismissButtonStyles = (variant) => {
+    const { textColor, backgroundColor, backgroundColorHover } = getVariantColors$1(variant);
+    return {
+        all: 'unset',
+        boxSizing: 'border-box',
+        display: 'grid',
+        placeItems: 'center',
+        padding: '6px',
+        borderRadius: ref(radiusFull),
+        font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
+        backgroundColor,
+        color: textColor,
+        cursor: 'pointer',
+        // The frosted backdrop-filter is only meaningful for the translucent `secondary` (frosted) background. For the
+        // 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' && {
+            WebkitBackdropFilter: ref(blurFrosted),
+            backdropFilter: ref(blurFrosted),
+        }),
+        transition: `${getTransition('background-color')}, ${getTransition('color')}`,
+        ...forcedColorsMediaQuery({
+            forcedColorAdjust: 'none',
+            background: 'Canvas',
+            boxShadow: 'inset 0 0 0 2px ButtonBorder',
+            color: 'ButtonText',
+        }),
+        '&:focus-visible': getFocusBaseStyles(),
+        ...hoverMediaQuery({
+            '&:hover': {
+                backgroundColor: backgroundColorHover,
+                ...forcedColorsMediaQuery({
+                    background: 'Canvas',
+                }),
+            },
+        }),
+        '&::before': {
+            content: '""',
+            width: ref(leadingNormal$1),
+            height: ref(leadingNormal$1),
+            WebkitMask: `${iconClose} center/contain no-repeat`, // necessary for Sogou browser support :-)
+            mask: `${iconClose} center/contain no-repeat`,
+            background: 'currentColor', // follows the button's text color (variant + HCM `ButtonText`)
+        },
+        // visually-hidden accessible name (mirrors `hideLabel` on the former `p-button`)
+        '& span': getHiddenTextJssStyle(),
+    };
+};
+
 const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
     return {
         '@global': {
@@ -4337,6 +4414,8 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
         },
         ...(hasDismissButton && {
             dismiss: {
+                // native dismiss button visual (secondary variant); grid positioning is applied on top
+                ...getFCDismissButtonStyles('secondary'),
                 gridArea: `1/4/-1`,
                 alignSelf: 'flex-start',
                 marginBlock: `calc(-6 * ${ref(spacingStatic2Xs)})`,
@@ -4377,12 +4456,12 @@ const cssVarInsetX = '--p-banner-inset-x';
 const cssVarPositionTop = '--p-banner-position-top'; // deprecated (aliased)
 const cssVarPositionBottom = '--p-banner-position-bottom'; // deprecated (aliased)
 const topBottomFallback = '56px';
-const cssVariableZIndex = '--_p-banner-a';
-const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot) => {
+const cssVarTransform = '--_p-banner-a';
+const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot, skipEntryTransition) => {
     const duration = isOpen ? 'moderate' : 'short';
     const easing = isOpen ? 'in' : 'out';
-    const transition = `visibility 0s linear ${ref(cssVariableTransitionDuration, isOpen ? '0s' : motionDurationMap[duration])},${getTransition('transform', duration, easing)}`;
-    return getCss({
+    const transition = getTransition('transform', duration, easing);
+    const css = getCss({
         ...mergeDeep({
             '@global': {
                 ':host': {
@@ -4391,46 +4470,36 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
                         ...hostHiddenStyles,
                     }),
                 },
-                ...preventFoucOfNestedElementsStyles,
                 '[popover]': {
                     all: 'unset',
                     position: 'fixed',
-                    zIndex: ref(cssVariableZIndex, BANNER_Z_INDEX), // Fallback for browsers lacking `transition-behavior: allow-discrete` — keeps the banner visible during fade-out after leaving the top layer.
                     ...buildResponsiveStyles(position, (v) => ({
                         ...(v === 'top' && {
+                            [cssVarTransform]: `translate3d(-50%,calc(-100% - ${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))}),0)`,
                             insetBlock: `${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))} auto`,
-                            ...(!isOpen && {
-                                transform: `translate3d(-50%,calc(-100% - ${ref(cssVarTop, ref(cssVarPositionTop, topBottomFallback))}),0)`,
-                            }),
                         }),
                         ...(v === 'bottom' && {
+                            [cssVarTransform]: `translate3d(-50%,calc(${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))} + 100%),0)`,
                             insetBlock: `auto ${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))}`,
-                            ...(!isOpen && {
-                                transform: `translate3d(-50%,calc(${ref(cssVarBottom, ref(cssVarPositionBottom, topBottomFallback))} + 100%),0)`,
-                            }),
                         }),
                     })),
                     left: '50vw',
                     width: `min(calc(100vw - 2 * ${ref(cssVarInsetX, gridExtendedOffsetBase)}),${ref(cssVarMaxWidth, '100ch')})`,
+                    transform: isOpen ? 'translate3d(-50%,0,0)' : ref(cssVarTransform),
+                    transition,
+                    // keep the popover on the #top-layer while the fade-out runs (Chromium only; see `overlayTransitionSupportsQuery`)
+                    ...overlayTransitionSupportsQuery({
+                        transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete, ${getTransition('display', duration, easing)} allow-discrete`,
+                    }),
                     overlay: 'none',
+                    display: 'none',
                     '&:popover-open': {
                         overlay: 'auto',
+                        display: 'grid',
                     },
                     '&::backdrop': {
-                        display: 'none',
+                        display: 'none', // reset ua-style
                     },
-                    visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
-                    pointerEvents: 'none', // element can't be interacted with mouse
-                    ...(isOpen && {
-                        visibility: 'inherit',
-                        pointerEvents: 'inherit',
-                        transform: 'translate3d(-50%,0,0)',
-                    }),
-                    transition,
-                    // keep the popover on the #top-layer while the fade-out runs (Chromium only; see `overlayTransitionSupportsQuery`)
-                    ...overlayTransitionSupportsQuery({
-                        transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete`,
-                    }),
                 },
             },
         }, {
@@ -4441,6 +4510,17 @@ const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadin
             },
         }, getFunctionalComponentNotificationBaseStyles(state, false, hasDismissButton, hasHeadingOrHeadingSlot)),
     });
+    // Both the `[popover]` box (transform) and its nested `.notification` (opacity) need a `@starting-style`: while closed
+    // the popover is `display: none`, so on open `.notification` renders fresh with a computed `opacity: 1` and has no
+    // prior value to transition from — without the starting value it snaps to full opacity instead of fading in. The
+    // opacity is split onto `.notification` (not `[popover]`) so the frosted-glass backdrop-filter renders correctly.
+    //
+    // `skipEntryTransition` omits the append on the component's FIRST render, so an initially-open banner (`open=true` on
+    // page load) computes straight to its visible transform/opacity and appears instantly instead of sliding/fading in.
+    // Every later render passes `false`, so a user-triggered open still animates normally.
+    return isOpen && false
+        ? `${css}\n@starting-style {\n  [popover] {\n    transform: ${ref(cssVarTransform)};\n  }\n  .notification {\n    opacity: 0;\n  }\n}`
+        : css;
 };
 
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
@@ -5205,7 +5285,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 +5404,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 +5451,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 +5737,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),
             }),
         },
@@ -5812,28 +5904,14 @@ const dialogHostJssStyle = (background) => {
         [cssVarBackgroundColor]: background === 'surface' ? ref(colorSurface) : ref(colorCanvas),
     };
 };
+// INTENTIONAL DIVERGENCE from `popover-styles.ts` (kept, not aligned — see the mirrored note there):
+// This dialog stays permanently rendered and collapses its CLOSED state via delayed `visibility: hidden` + `width/height: 0`
+// (driven by `isVisible`), so `opacity`/`background` fade in BOTH directions with NO `@starting-style`, and an initial
+// `open=true` computes straight to the visible state (no entry fade on load). `p-popover`/`p-banner` instead use the native
+// `[popover]` `display: none`/`:popover-open` toggle plus a `@starting-style` entry fade, because those components mimic the
+// native popover box model. Both share `createTopLayerController` + the Chromium-only `overlay allow-discrete` transition
+// (`overlayTransitionSupportsQuery`) and the `inert` toggle for tabbability; only the closed-state expression differs.
 const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') => {
-    return {
-        dialog: {
-            ...dialogBackdropResetJssStyle,
-            ...getDialogBackdropTransitionJssStyle(isVisible, backdrop),
-        },
-    };
-};
-const dialogBackdropResetJssStyle = {
-    all: 'unset',
-    position: 'fixed',
-    inset: 0,
-    maxWidth: '100dvw',
-    maxHeight: '100dvh',
-    overflow: 'hidden',
-    display: 'block',
-    outline: 0, // we always expect a focusable element to be within the dialog
-    '&::backdrop': {
-        display: 'none', // ua-style (we can't use it atm because it's not animatable in all browsers)
-    },
-};
-const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     const isBackdropBlur = backdrop === 'blur';
     const duration = isVisible ? 'long' : 'moderate';
     const easing = isVisible ? 'in' : 'out';
@@ -5841,14 +5919,21 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
     // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
     const transition = `visibility 0s linear ${delay}, width 0s linear ${delay}, height 0s linear ${delay}, ${getTransition('background-color', duration, easing)}, ${getTransition('-webkit-backdrop-filter', duration, easing)}, ${getTransition('backdrop-filter', duration, easing)}`;
     return {
-        zIndex: 9999999, // fallback for fade out stacking until `overlay` + `allow-discrete` is supported in all browsers. It tries to mimic #top-layer positioning hierarchy.
+        all: 'unset',
+        position: 'fixed',
+        inset: 0,
+        maxWidth: '100dvw',
+        maxHeight: '100dvh',
+        overflow: 'hidden',
+        display: 'block',
+        userSelect: 'text', // allows text selection within dialog element (e.g. for copy & paste)
+        outline: 0, // we always expect a focusable element to be within the dialog
         ...(isVisible
             ? {
                 width: '100dvw',
                 height: '100dvh',
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                overlay: 'auto',
                 background: ref(colorBackdrop),
                 ...(isBackdropBlur && {
                     WebkitBackdropFilter: ref(blurFrosted),
@@ -5864,7 +5949,6 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 height: '0px',
                 visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
                 pointerEvents: 'none', // element can't be interacted with mouse
-                overlay: 'none',
                 background: 'transparent',
             }),
         transition,
@@ -5872,6 +5956,13 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
         ...overlayTransitionSupportsQuery({
             transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
         }),
+        overlay: 'none',
+        '&:modal': {
+            overlay: 'auto',
+        },
+        '&::backdrop': {
+            display: 'none', // reset ua-style (we can't use it atm because it's not animatable in all browsers)
+        },
     };
 };
 const getScrollerJssStyle = (position) => {
@@ -5951,6 +6042,9 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
 };
 const getDialogDismissButtonJssStyle = () => {
     return {
+        // native dismiss button visual (primary variant); positioning + the `invert` filter (renders it light on the
+        // dialog) are applied on top below
+        ...getFCDismissButtonStyles('primary'),
         gridArea: '1/3',
         zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
         position: 'sticky',
@@ -7044,7 +7138,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."}
  */
@@ -7075,7 +7169,6 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7098,7 +7191,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     '&[name=sub-footer]': getSlotSubFooterJssStyle(),
                 }),
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end'),
@@ -7127,7 +7220,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 +7993,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?
 /**
@@ -7928,7 +8021,6 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -7942,7 +8034,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -7960,7 +8052,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 +8078,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 +8105,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 +8437,216 @@ 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).
+ * @param skipEntryTransition - Suppresses the `@starting-style` entry fade. Set on the component's first render so an
+ *   initially-open popover (`open=true` on page load) appears instantly instead of fading in. Later user-triggered opens
+ *   render with this `false`, so they keep the fade-in.
+ * @returns The component CSS string, with a trailing `@starting-style` rule appended while opening (unless skipped).
+ */
+const getComponentCss$v = (isOpen, isCompact, skipEntryTransition) => {
+    // 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 duration = 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const transition = getTransition('opacity', duration, easing);
+    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', duration, easing)} allow-discrete, ${getTransition('display', duration, easing)} 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.
+    //
+    // `skipEntryTransition` omits the append on the component's FIRST render, so an initially-open popover (`open=true` on
+    // page load) computes straight to `opacity: 1` and appears instantly instead of fading in. Every later render passes
+    // `false`, so a user-triggered open still fades in normally.
+    //
+    // ALTERNATIVE APPROACH (INTENTIONALLY NOT IMPLEMENTED) — mirror the `dialog-base` (p-modal/p-flyout) pattern and drop `@starting-style`:
+    // Decision: KEEP this divergence (see the mirrored note in `common/dialog-base/dialog-base-styles.ts`). `p-popover`/`p-banner`
+    // mimic the native `[popover]` box model, so they use the native `display: none`/`:popover-open` toggle + `@starting-style`
+    // entry fade rather than the dialog's permanently-rendered `visibility`/`width`/`height` collapse. Both approaches share
+    // `createTopLayerController`, the Chromium-only `overlay allow-discrete` transition (`overlayTransitionSupportsQuery`) and
+    // the `inert` toggle for tabbability; only the closed-state expression differs. The alternative below is documented for
+    // context (and to record its one upside — no entry fade on initial `open=true`), but is deliberately left unimplemented.
+    //   • 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 && !skipEntryTransition ? `${css}\n@starting-style {\n  [popover] {\n    opacity: 0;\n  }\n}` : css;
 };
 
 const cssVarInternalRadioGroupOptionScaling = '--_p-radio-group-option-a';
@@ -9015,7 +9226,6 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
             slot: {
                 ...getSlotJssStyle(),
                 '&:not([name])': getSlotMainJssStyle(),
@@ -9024,7 +9234,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
             },
-            ...getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
+            dialog: getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
@@ -10162,7 +10372,7 @@ const getComponentCss$1 = () => {
                 [cssVariablePositionBottomInternal]: ref(cssVariablePositionBottom, '56px'),
                 position: 'fixed', // fallback for older browsers without native `popover` support
                 inset: `auto ${gridExtendedOffsetBase} ${ref(cssVariablePositionBottomInternal)}`,
-                zIndex: TOAST_Z_INDEX, // fallback for older browsers without native `popover` support
+                zIndex: 999999, // fallback for older browsers without native `popover` support
                 [getMediaQueryMin('s')]: {
                     [cssVariablePositionBottomInternal]: ref(cssVariablePositionBottom, '64px'),
                     inset: `auto auto ${ref(cssVariablePositionBottomInternal)} 64px`,
@@ -10234,4 +10444,4 @@ const getComponentCss = (size) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, dialogBorderRadius, dialogGridJssStyle, dialogHostJssStyle, dialogPaddingBottom, dialogPaddingInline, dialogPaddingTop, getComponentCss$1a as getAccordionCss, getComponentCss$19 as getAiTagCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getDialogColorJssStyle, getDialogDismissButtonJssStyle, getDialogTransitionJssStyle, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentDialogBaseStyles, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getScrollerJssStyle, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getSlotFooterJssStyle, getSlotHeaderJssStyle, getSlotJssStyle, getSlotMainJssStyle, getSlotSubFooterJssStyle, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, dialogBorderRadius, dialogGridJssStyle, dialogHostJssStyle, dialogPaddingBottom, dialogPaddingInline, dialogPaddingTop, getComponentCss$1a as getAccordionCss, getComponentCss$19 as getAiTagCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getDialogColorJssStyle, getDialogDismissButtonJssStyle, getDialogTransitionJssStyle, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getFCDismissButtonStyles, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentDialogBaseStyles, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getScrollerJssStyle, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getSlotFooterJssStyle, getSlotHeaderJssStyle, getSlotJssStyle, getSlotMainJssStyle, getSlotSubFooterJssStyle, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };