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

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3482,7 +3482,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.3.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.4.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);

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

@@ -7,20 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var popover = require('../dsr-components/popover.cjs');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, children, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, compact, description, direction, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'description', 'direction', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, description, direction, children })),
+                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, compact, description, direction, open, children })),
             }
             : {
                 children,

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

@@ -1,14 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var fcDismissButton = require('./fc-dismiss-button.cjs');
 var notificationBase = require('./notification-base.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading of the banner. Can be used as an alternative to the `heading` prop for rich content." }
@@ -23,6 +22,12 @@ class DSRBanner extends react.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 = utilsEntry.createTopLayerController({
         getElement: () => this.props.refPopover,
         isShown: () => !!this.props.refPopover?.matches(':popover-open'),
@@ -35,8 +40,13 @@ class DSRBanner extends react.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.minifyCss(stylesEntry.getBannerCss(this.props.open, this.props.position, this.props.state, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...utilsEntry.getBannerAriaAttributes(this.props.state, headingText), children: jsxRuntime.jsx(notificationBase.NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
-                                    dismissButton: (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close banner" })),
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style + (this.props.open ? '[popover]{display:grid!important}' : '') } }), jsxRuntime.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, ...utilsEntry.getBannerAriaAttributes(this.props.state, headingText), children: jsxRuntime.jsx(notificationBase.NotificationBase, { heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, hasDescriptionSlot: hasDescriptionSlot, ...(this.props.dismissButton && {
+                                    dismissButton: (jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: "Close banner", ariaDescription: headingText || undefined })),
                                 }) }) })] }), this.props.children] }));
     }
 }

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

@@ -1,14 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
-require('../../provider.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
+var fcDismissButton = require('./fc-dismiss-button.cjs');
 
-const DialogBase = ({ children, 
-// host,
-inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
-    return (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && (jsxRuntime.jsx(button_wrapper.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 (jsxRuntime.jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: containerClass, children: [dismissable && jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: `Dismiss ${containerClass}` }), header, children, footer, subFooter] }) }) }));
 };
 
 exports.DialogBase = DialogBase;

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

@@ -26,6 +26,9 @@ class DSRDrilldown extends react.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fc-dismiss-button.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('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 (jsxRuntime.jsx("button", { className: "dismiss", type: "button", ...(ariaDescription ? { 'aria-description': ariaDescription } : {}), children: jsxRuntime.jsx("span", { children: label }) }));
+};
+
+exports.FCDismissButton = FCDismissButton;

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

@@ -25,6 +25,9 @@ class DSRFlyout extends react.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 = utilsEntry.createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -37,7 +40,17 @@ class DSRFlyout extends react.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.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsxRuntime.jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.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 ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsxRuntime.jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),

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

@@ -7,8 +7,8 @@ var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var fcDismissButton = require('./fc-dismiss-button.cjs');
 var notificationBase = require('./notification-base.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 
 /**
@@ -26,7 +26,7 @@ class DSRInlineNotification extends react.Component {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(notificationBase.NotificationBase, { ...utilsEntry.getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
                                 actionLabel: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })),
                             }), ...(this.props.dismissButton && {
-                                dismissButton: (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close notification" })),
+                                dismissButton: (jsxRuntime.jsx(fcDismissButton.FCDismissButton, { label: "Close notification", ariaDescription: headingText || undefined })),
                             }) })] }), this.props.children] }));
     }
 }

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

@@ -22,6 +22,9 @@ class DSRModal extends react.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 = utilsEntry.createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -35,7 +38,17 @@ class DSRModal extends react.Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss.minifyCss(stylesEntry.getModalCss(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.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 ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),

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

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

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

@@ -19,6 +19,9 @@ class DSRSheet extends react.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 = utilsEntry.createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -30,7 +33,17 @@ class DSRSheet extends react.Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stylesEntry.getSheetCss(this.props.open, this.props.background, this.props.dismissButton));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.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 ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,