@porsche-design-system/components-react 4.1.0 → 4.2.0-rc.1

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('../../provider.cjs');
+var button_wrapper = require('../components/button.wrapper.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", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+};
+
+exports.DialogBase = DialogBase;

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

@@ -1,13 +1,12 @@
 '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 button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
@@ -32,11 +31,11 @@ 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));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { tabIndex: -1, ...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, { 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({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,13 +1,12 @@
 '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 button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -30,11 +29,11 @@ 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("dialog", { inert: !this.props.open, tabIndex: -1, ...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, { 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({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "modal", children: [this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss modal" })), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,13 +1,12 @@
 '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 button_wrapper = require('../components/button.wrapper.cjs');
+var dialogBase = require('./dialog-base.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -25,13 +24,13 @@ 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("dialog", { inert: !this.props.open, tabIndex: -1, ...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, { host: null, 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,
                                 }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "sheet", children: [this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", variant: "secondary", compact: true, type: "button", hideLabel: true, icon: "close", children: "Dismiss sheet" })), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {})] }) }) })] }), this.props.children] }));
+                            }), children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -3773,7 +3773,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.1.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -5877,6 +5877,211 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
+const cssVarBackgroundColor = '--_p-dialog-a';
+const dialogHostJssStyle = (background) => {
+    return {
+        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
+        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
+        '--pds-internal-grid-width-min': 'auto',
+        '--pds-internal-grid-width-max': 'none',
+        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
+    };
+};
+const getFunctionalComponentDialogBaseStyles = (isVisible, backdrop = 'blur') => {
+    return {
+        dialog: {
+            ...dialogBackdropResetJssStyle,
+            ...getDialogBackdropTransitionJssStyle(isVisible, backdrop),
+        },
+    };
+};
+const dialogBackdropResetJssStyle = {
+    position: 'fixed', // ua-style
+    inset: 0, // ua-style
+    margin: 0, // ua-style
+    padding: 0, // ua-style
+    border: 0, // ua-style
+    width: '100dvw', // ua-style
+    height: '100dvh', // ua-style
+    maxWidth: '100dvw', // ua-style
+    maxHeight: '100dvh', // ua-style
+    overflow: 'hidden', // ua-style
+    display: 'block', // ua-style
+    outline: 0, // ua-style (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';
+    // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
+    const transition = `visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]}), ${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.
+        ...(isVisible
+            ? {
+                visibility: 'inherit',
+                pointerEvents: 'auto',
+                background: colorBackdrop,
+                ...(isBackdropBlur && {
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
+                }),
+            }
+            : {
+                visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
+                pointerEvents: 'none', // element can't be interacted with mouse
+                background: 'transparent',
+            }),
+        transition,
+        // `allow-discrete` transition for ua-style `overlay` (supported browsers only) ensures dialog is rendered on
+        // #top-layer as long as fade-in or fade-out transition/animation is running
+        '@supports (transition-behavior: allow-discrete)': {
+            transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
+        },
+    };
+};
+const getScrollerJssStyle = (position) => {
+    // ensures scrollbar color is set correctly (e.g. when scrollbar is shown on backdrop, on flyout/modal surface or with Auto Dark Mode)
+    const backgroundLight = 'rgba(255,255,255,.01)';
+    const backgroundDark = 'rgba(0,0,0,.01)';
+    const background = {
+        light: backgroundLight,
+        dark: backgroundDark,
+        auto: backgroundLight,
+    };
+    return {
+        position: 'absolute',
+        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
+        display: 'grid',
+        ...(position === 'fullscreen'
+            ? {
+                inset: 0,
+            }
+            : {
+                insetBlock: 0,
+                [position === 'start' ? 'insetInlineStart' : 'insetInlineEnd']: 0,
+            }),
+        overflow: 'hidden auto',
+        overscrollBehaviorY: 'none',
+        // TODO: check if smooth scrolling on iOS is given?
+        background: background.light,
+    };
+};
+const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
+const dialogPaddingTop = spacingFluidMd$1;
+const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
+const dialogPaddingInline = spacingFluidLg;
+const dialogGridJssStyle = () => {
+    return {
+        position: 'relative',
+        display: 'grid',
+        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
+        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
+        paddingTop: dialogPaddingTop,
+        paddingBottom: dialogPaddingBottom,
+        alignContent: 'flex-start',
+    };
+};
+const getDialogColorJssStyle = () => {
+    return {
+        color: colorPrimary, // enables color inheritance for slots
+        background: `var(${cssVarBackgroundColor})`,
+    };
+};
+const getDialogTransitionJssStyle = (isVisible, slideIn) => {
+    const duration = isVisible ? 'moderate' : 'short';
+    const easing = isVisible ? 'in' : 'out';
+    return {
+        // transition offset relies vertically on viewport (vh) because the dialog height can be infinite, while horizontally
+        // it relies on the dialog width (%) which has a max-width
+        ...(isVisible
+            ? {
+                opacity: 1,
+                transform: 'initial',
+            }
+            : {
+                opacity: 0,
+                transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '-' : ''}100%)`,
+                '&:dir(rtl)': {
+                    transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '' : '-'}100%)`,
+                },
+            }),
+        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
+    };
+};
+const getDialogDismissButtonJssStyle = () => {
+    return {
+        gridArea: '1/3',
+        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: spacingFluidSm,
+        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
+        marginInlineEnd: spacingFluidSm,
+        placeSelf: 'flex-start flex-end',
+        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`,
+    };
+};
+const getSlotJssStyle = () => {
+    return {
+        display: 'block',
+        '&:first-of-type': {
+            gridRowStart: 1,
+        },
+    };
+};
+const getSlotHeaderJssStyle = () => {
+    const paddingTop = dialogPaddingTop;
+    const paddingBottom = spacingStaticMd;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        top: 0, // necessary for `IntersectionObserver` to detect if sticky element is stuck or not. Float value is used, so that sticky area isn't moved out visually by e.g. 1px when container gets scrolled.
+        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
+        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
+        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
+    };
+};
+const getSlotMainJssStyle = () => {
+    return {
+        gridColumn: '2/3',
+        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+    };
+};
+const getSlotFooterJssStyle = () => {
+    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
+    const offset = `calc(${paddingBlock} / 2)`;
+    return {
+        gridColumn: '1/-1',
+        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        position: 'sticky',
+        bottom: '-.1px', // necessary for `IntersectionObserver` to detect if sticky element is stuck or not. Float value is used, so that sticky area isn't moved out visually by e.g. 1px when container gets scrolled.
+        marginBlock: `calc(-1 * ${paddingBlock})`,
+        padding: `${paddingBlock} ${dialogPaddingInline}`,
+        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
+        '&[data-stuck]::after': {
+            content: '""',
+            zIndex: -1,
+            position: 'absolute',
+            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
+            background: colorFrosted,
+            borderRadius: radius3Xl,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+        },
+    };
+};
+const getSlotSubFooterJssStyle = () => {
+    return {
+        gridColumn: '1/-1',
+        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+        paddingInline: dialogPaddingInline,
+        backgroundColor: `var(${cssVarBackgroundColor})`,
+    };
+};
 
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
@@ -6896,210 +7101,6 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const cssVarBackgroundColor = '--_p-dialog-a';
-const dialogHostJssStyle = (background) => {
-    return {
-        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
-        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
-        '--pds-internal-grid-width-min': 'auto',
-        '--pds-internal-grid-width-max': 'none',
-        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
-    };
-};
-const getDialogJssStyle = (isVisible, backdrop = 'blur') => {
-    return {
-        ...dialogBackdropResetJssStyle,
-        ...getDialogBackdropTransitionJssStyle(isVisible, backdrop),
-    };
-};
-const dialogBackdropResetJssStyle = {
-    position: 'fixed', // ua-style
-    inset: 0, // ua-style
-    margin: 0, // ua-style
-    padding: 0, // ua-style
-    border: 0, // ua-style
-    width: '100dvw', // ua-style
-    height: '100dvh', // ua-style
-    maxWidth: '100dvw', // ua-style
-    maxHeight: '100dvh', // ua-style
-    overflow: 'hidden', // ua-style
-    display: 'block', // ua-style
-    outline: 0, // ua-style (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';
-    // as soon as all browsers are supporting `allow-discrete`, visibility transition shouldn't be necessary anymore
-    const transition = `visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]}), ${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.
-        ...(isVisible
-            ? {
-                visibility: 'inherit',
-                pointerEvents: 'auto',
-                background: colorBackdrop,
-                ...(isBackdropBlur && {
-                    WebkitBackdropFilter: blurFrosted,
-                    backdropFilter: blurFrosted,
-                }),
-            }
-            : {
-                visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
-                pointerEvents: 'none', // element can't be interacted with mouse
-                background: 'transparent',
-            }),
-        transition,
-        // `allow-discrete` transition for ua-style `overlay` (supported browsers only) ensures dialog is rendered on
-        // #top-layer as long as fade-in or fade-out transition/animation is running
-        '@supports (transition-behavior: allow-discrete)': {
-            transition: `${transition}, ${getTransition('overlay', duration, easing)} allow-discrete`,
-        },
-    };
-};
-const getScrollerJssStyle = (position) => {
-    // ensures scrollbar color is set correctly (e.g. when scrollbar is shown on backdrop, on flyout/modal surface or with Auto Dark Mode)
-    const backgroundLight = 'rgba(255,255,255,.01)';
-    const backgroundDark = 'rgba(0,0,0,.01)';
-    const background = {
-        light: backgroundLight,
-        dark: backgroundDark,
-        auto: backgroundLight,
-    };
-    return {
-        position: 'absolute',
-        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
-        display: 'grid',
-        ...(position === 'fullscreen'
-            ? {
-                inset: 0,
-            }
-            : {
-                insetBlock: 0,
-                [position === 'start' ? 'insetInlineStart' : 'insetInlineEnd']: 0,
-            }),
-        overflow: 'hidden auto',
-        overscrollBehaviorY: 'none',
-        // TODO: check if smooth scrolling on iOS is given?
-        background: background.light,
-    };
-};
-const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
-const dialogPaddingTop = spacingFluidMd$1;
-const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
-const dialogPaddingInline = spacingFluidLg;
-const dialogGridJssStyle = () => {
-    return {
-        position: 'relative',
-        display: 'grid',
-        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
-        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
-        paddingTop: dialogPaddingTop,
-        paddingBottom: dialogPaddingBottom,
-        alignContent: 'flex-start',
-    };
-};
-const getDialogColorJssStyle = () => {
-    return {
-        color: colorPrimary, // enables color inheritance for slots
-        background: `var(${cssVarBackgroundColor})`,
-    };
-};
-const getDialogTransitionJssStyle = (isVisible, slideIn) => {
-    const duration = isVisible ? 'moderate' : 'short';
-    const easing = isVisible ? 'in' : 'out';
-    return {
-        // transition offset relies vertically on viewport (vh) because the dialog height can be infinite, while horizontally
-        // it relies on the dialog width (%) which has a max-width
-        ...(isVisible
-            ? {
-                opacity: 1,
-                transform: 'initial',
-            }
-            : {
-                opacity: 0,
-                transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '-' : ''}100%)`,
-                '&:dir(rtl)': {
-                    transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '' : '-'}100%)`,
-                },
-            }),
-        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
-    };
-};
-const getDialogDismissButtonJssStyle = () => {
-    return {
-        gridArea: '1/3',
-        zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: spacingFluidSm,
-        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
-        marginInlineEnd: spacingFluidSm,
-        placeSelf: 'flex-start flex-end',
-        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`
-    };
-};
-const getSlotJssStyle = () => {
-    return {
-        display: 'block',
-        '&:first-of-type': {
-            gridRowStart: 1,
-        },
-    };
-};
-const getSlotHeaderJssStyle = () => {
-    const paddingTop = dialogPaddingTop;
-    const paddingBottom = spacingStaticMd;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        top: 0, // necessary for `IntersectionObserver` to detect if sticky element is stuck or not. Float value is used, so that sticky area isn't moved out visually by e.g. 1px when container gets scrolled.
-        marginBlock: `calc(-1 * ${paddingTop}) calc(-1 * ${paddingBottom})`,
-        padding: `${paddingTop} ${dialogPaddingInline} ${paddingBottom}`,
-        background: `linear-gradient(180deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 80%,transparent 100%)`,
-    };
-};
-const getSlotMainJssStyle = () => {
-    return {
-        gridColumn: '2/3',
-        zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-    };
-};
-const getSlotFooterJssStyle = () => {
-    const paddingBlock = `calc(${dialogPaddingBottom} - ${dialogBorderRadius})`;
-    const offset = `calc(${paddingBlock} / 2)`;
-    return {
-        gridColumn: '1/-1',
-        zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        position: 'sticky',
-        bottom: '-.1px', // necessary for `IntersectionObserver` to detect if sticky element is stuck or not. Float value is used, so that sticky area isn't moved out visually by e.g. 1px when container gets scrolled.
-        marginBlock: `calc(-1 * ${paddingBlock})`,
-        padding: `${paddingBlock} ${dialogPaddingInline}`,
-        background: `linear-gradient(0deg,var(${cssVarBackgroundColor}) 0%,var(${cssVarBackgroundColor}) 20%,transparent 80%)`,
-        '&[data-stuck]::after': {
-            content: '""',
-            zIndex: -1,
-            position: 'absolute',
-            inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
-            background: colorFrosted,
-            borderRadius: radius3Xl,
-            WebkitBackdropFilter: blurFrosted,
-            backdropFilter: blurFrosted,
-        },
-    };
-};
-const getSlotSubFooterJssStyle = () => {
-    return {
-        gridColumn: '1/-1',
-        zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
-        paddingInline: dialogPaddingInline,
-        backgroundColor: `var(${cssVarBackgroundColor})`,
-    };
-};
-
 /**
  * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
  */
@@ -7154,7 +7155,7 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     '&[name=sub-footer]': getSlotSubFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end'),
@@ -7976,7 +7977,7 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     '&[name=footer]': getSlotFooterJssStyle(),
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, backdrop),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, backdrop),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         modal: {
@@ -9045,7 +9046,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
                 },
             },
-            dialog: getDialogJssStyle(isOpen, 'shading'),
+            ...getFunctionalComponentDialogBaseStyles(isOpen, 'shading'),
         },
         scroller: getScrollerJssStyle('fullscreen'),
         sheet: {
@@ -10253,4 +10254,4 @@ const getComponentCss = (size) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$19 as getAccordionCss, 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, 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, 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, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, 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$19 as getAccordionCss, 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 };