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

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

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

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.mjs

@@ -1,12 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getBannerCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { createTopLayerController, getBannerAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 import { NotificationBase } from './notification-base.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading of the banner. Can be used as an alternative to the `heading` prop for rich content." }
@@ -21,6 +20,12 @@ class DSRBanner extends Component {
     refDismiss;
     hasHeadingSlot;
     hasDescriptionSlot;
+    // Tracks whether the document-level Escape listener is currently registered (guards the idempotent sync below).
+    hasKeydownListener = false;
+    // Tracks the component's first render. While `true`, the entry transition (`@starting-style`) is suppressed so an
+    // initially-open banner (`open=true` on page load) appears instantly instead of sliding/fading in; flipped to `false`
+    // in `componentDidLoad`, so every later (user-triggered) open keeps the entry animation.
+    isInitialRender = true;
     topLayer = createTopLayerController({
         getElement: () => this.props.refPopover,
         isShown: () => !!this.props.refPopover?.matches(':popover-open'),
@@ -33,8 +38,13 @@ class DSRBanner extends Component {
         const hasDescriptionSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0;
         const headingText = this.props.heading ? this.props.heading : namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children;
         const style = minifyCss(getComponentCss$18(this.props.open, this.props.position, this.props.state, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...getBannerAriaAttributes(this.props.state, headingText), children: jsx(NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
-                                    dismissButton: (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close banner" })),
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style + (this.props.open ? '[popover]{display:grid!important}' : '') } }), jsx("div", { popover: "manual", 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, ...getBannerAriaAttributes(this.props.state, headingText), children: jsx(NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
+                                    dismissButton: (jsx(FCDismissButton, { label: "Close banner", ariaDescription: headingText || undefined })),
                                 }) }) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/dialog-base.mjs

@@ -1,12 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
-import '../../provider.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 
-const DialogBase = ({ children, 
-// host,
-inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
-    return (jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: containerClass, children: [dismissable && (jsx(PButton, { className: "dismiss", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+const DialogBase = ({ children, inert, containerClass, ariaAttributes, onMouseDown, dismissable = false, header, footer, subFooter, }) => {
+    return (jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: containerClass, children: [dismissable && jsx(FCDismissButton, { label: `Dismiss ${containerClass}` }), header, children, footer, subFooter] }) }) }));
 };
 
 export { DialogBase };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/drilldown.mjs

@@ -24,6 +24,9 @@ class DSRDrilldown extends Component {
     dialog;
     drawer;
     isDesktop = false;
+    // Tracks whether the current pointer gesture started inside the drawer (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the drawer and released on the backdrop.
+    isPointerDownInside = false;
     async componentWillLoad() {
         this.props.defineDrilldownItemElements();
         const activeItem = this.props.drilldownItemElements.find((item) => item.identifier === this.props.activeIdentifier);

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fc-dismiss-button.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Shared dismiss/close button used across dialog-based (flyout/modal/sheet) and notification-based
+ * (banner/inline-notification/toast) components. Renders a native `<button className="dismiss">` with the close icon
+ * inlined as a CSS mask (see `fc-dismiss-button-styles.ts`) — so it needs neither a nested `p-button` nor a `p-icon`
+ * (avoiding the async CDN icon fetch). Each consumer supplies the variant/positioning styling via the `.dismiss` class.
+ * The visible label text is visually hidden but exposed to assistive technology as the accessible name.
+ */
+const FCDismissButton = ({ label, ariaDescription, }) => {
+    return (jsx("button", { className: "dismiss", type: "button", ...(ariaDescription ? { 'aria-description': ariaDescription } : {}), children: jsx("span", { children: label }) }));
+};
+
+export { FCDismissButton };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.mjs

@@ -23,6 +23,9 @@ class DSRFlyout extends Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -35,7 +38,17 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...parseAndGetAriaAttributes(this.props.aria),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.mjs

@@ -5,8 +5,8 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getInlineNotificationCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getInlineNotificationAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 import { NotificationBase } from './notification-base.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 
 /**
@@ -24,7 +24,7 @@ class DSRInlineNotification extends Component {
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(NotificationBase, { ...getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
                                 actionLabel: (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })),
                             }), ...(this.props.dismissButton && {
-                                dismissButton: (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close notification" })),
+                                dismissButton: (jsx(FCDismissButton, { label: "Close notification", ariaDescription: headingText || undefined })),
                             }) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.mjs

@@ -20,6 +20,9 @@ class DSRModal extends Component {
     footer;
     hasHeader;
     hasFooter;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -33,7 +36,17 @@ class DSRModal extends Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss(getComponentCss$C(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...parseAndGetAriaAttributes(this.props.aria),

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

@@ -1,35 +1,84 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getPopoverCss as getComponentCss$v } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getHasNativePopoverSupport, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PIcon } from '../components/icon.wrapper.mjs';
+import { createTopLayerController, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
- * @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 Component {
     host;
     isOpen = false;
-    popover;
-    button;
-    slottedButton;
-    arrow;
+    // Tracks the component's first render. While `true`, the entry transition (`@starting-style`) is suppressed so an
+    // initially-open popover (`open=true` on page load) appears instantly instead of fading in; flipped to `false` in
+    // `componentDidLoad`, so every later (user-triggered) open keeps the fade-in.
+    isInitialRender = true;
+    // 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 = 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 = 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(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
-        const style = minifyCss(getComponentCss$v()).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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsxs("button", { type: "button", ...parseAndGetAriaAttributes({
-                                        ...parseAndGetAriaAttributes(this.props.aria),
-                                        ...{ 'aria-expanded': this.props.isOpen },
-                                    }), children: [jsx(PIcon, { className: "icon", name: "information" }), jsx("span", { className: "label", children: "More information" })] })), this.props.isOpen && (jsxs("div", { popover: "auto", children: [jsx("div", { className: "arrow" }), jsx("div", { className: "content", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) })] }))] })] }), this.props.children] }));
+        const id = 'popover';
+        const style = minifyCss(getComponentCss$v(this.props.effectiveOpen, this.props.compact, this.props.isInitialRender).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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsx("div", { className: "arrow" }), this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {})] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/sheet.mjs

@@ -17,6 +17,9 @@ class DSRSheet extends Component {
     dialog;
     scroller;
     hasHeader;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -28,7 +31,17 @@ class DSRSheet extends Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss(getComponentCss$n(this.props.open, this.props.background, this.props.dismissButton));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,

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

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

package/ssr/esm/lib/dsr-components/banner.d.ts

@@ -13,6 +13,8 @@ export declare class DSRBanner extends Component<any> {
     private refDismiss;
     private hasHeadingSlot;
     private hasDescriptionSlot;
+    private hasKeydownListener;
+    private isInitialRender;
     private topLayer;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/dialog-base.d.ts

@@ -3,13 +3,13 @@ import type { FC } from 'react';
 import type { JSX } from 'react';
 type DialogBaseProps = {
     children?: JSX.Element;
-    host: HTMLElement;
-    inert?: boolean;
+    inert: boolean;
     dialogRef?: (el: HTMLDialogElement) => void;
     scrollerRef?: (el: HTMLDivElement) => void;
     containerClass: 'flyout' | 'modal' | 'sheet';
     onCancel?: (e: Event) => void;
     onClick?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
     onTransitionEnd?: (e: TransitionEvent) => void;
     onDismiss?: () => void;
     ariaAttributes?: AriaAttributes;

package/ssr/esm/lib/dsr-components/drilldown.d.ts

@@ -16,6 +16,7 @@ export declare class DSRDrilldown extends Component<any> {
     private dialog;
     private drawer;
     private isDesktop;
+    private isPointerDownInside;
     componentWillLoad(): Promise<void>;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/fc-dismiss-button.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+type FCDismissButtonProps = {
+    /** Accessible (visually hidden) label of the dismiss button. */
+    label: string;
+    /** Optional value forwarded as `aria-description` to provide additional context (e.g. the notification heading). */
+    ariaDescription?: string;
+};
+/**
+ * Shared dismiss/close button used across dialog-based (flyout/modal/sheet) and notification-based
+ * (banner/inline-notification/toast) components. Renders a native `<button className="dismiss">` with the close icon
+ * inlined as a CSS mask (see `fc-dismiss-button-styles.ts`) — so it needs neither a nested `p-button` nor a `p-icon`
+ * (avoiding the async CDN icon fetch). Each consumer supplies the variant/positioning styling via the `.dismiss` class.
+ * The visible label text is visually hidden but exposed to assistive technology as the accessible name.
+ */
+export declare const FCDismissButton: FC<FCDismissButtonProps>;
+export {};

package/ssr/esm/lib/dsr-components/flyout.d.ts

@@ -17,6 +17,7 @@ export declare class DSRFlyout extends Component<any> {
     private hasHeader;
     private hasFooter;
     private hasSubFooter;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/modal.d.ts

@@ -14,6 +14,7 @@ export declare class DSRModal extends Component<any> {
     private footer;
     private hasHeader;
     private hasFooter;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/popover.d.ts

@@ -1,18 +1,27 @@
 import { Component } from 'react';
 import type { JSX } from 'react';
 /**
- * @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"}
  */
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;
     private isOpen;
-    private popover;
-    private button;
-    private slottedButton;
-    private arrow;
+    private isInitialRender;
+    private refPopover;
+    private refButton;
+    private refSlotButton;
+    private refArrow;
     private cleanUpAutoUpdate;
-    private hasNativePopoverSupport;
-    private hasSlottedButton;
+    private boundTriggerElement;
+    private hasDismissListeners;
+    private isPointerInteraction;
+    private isPointerDownInside;
+    private topLayer;
+    private get isControlled();
+    private get effectiveOpen();
+    private get triggerElement();
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/sheet.d.ts

@@ -11,6 +11,7 @@ export declare class DSRSheet extends Component<any> {
     private dialog;
     private scroller;
     private hasHeader;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }