@porsche-design-system/components-react 3.1.0-rc.1 → 3.1.0-rc.2

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

@@ -0,0 +1,88 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../components/accordion.wrapper.js');
+require('../components/banner.wrapper.js');
+require('../components/button.wrapper.js');
+require('../components/button-group.wrapper.js');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.js');
+require('../components/button-tile.wrapper.js');
+require('../components/carousel.wrapper.js');
+require('../components/checkbox-wrapper.wrapper.js');
+require('../components/content-wrapper.wrapper.js');
+require('../components/crest.wrapper.js');
+require('../components/display.wrapper.js');
+require('../components/divider.wrapper.js');
+require('../components/fieldset.wrapper.js');
+require('../components/fieldset-wrapper.wrapper.js');
+require('../components/flex.wrapper.js');
+require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
+require('../components/grid.wrapper.js');
+require('../components/grid-item.wrapper.js');
+require('../components/heading.wrapper.js');
+require('../components/headline.wrapper.js');
+require('../components/icon.wrapper.js');
+require('../components/inline-notification.wrapper.js');
+require('../components/link.wrapper.js');
+require('../components/link-pure.wrapper.js');
+require('../components/link-social.wrapper.js');
+require('../components/link-tile.wrapper.js');
+require('../components/link-tile-model-signature.wrapper.js');
+require('../components/marque.wrapper.js');
+require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
+require('../components/pagination.wrapper.js');
+require('../components/popover.wrapper.js');
+require('../components/radio-button-wrapper.wrapper.js');
+require('../components/scroller.wrapper.js');
+require('../components/segmented-control.wrapper.js');
+require('../components/segmented-control-item.wrapper.js');
+require('../components/select-wrapper.wrapper.js');
+require('../components/spinner.wrapper.js');
+require('../components/stepper-horizontal.wrapper.js');
+require('../components/stepper-horizontal-item.wrapper.js');
+require('../components/switch.wrapper.js');
+require('../components/table.wrapper.js');
+require('../components/table-body.wrapper.js');
+require('../components/table-cell.wrapper.js');
+require('../components/table-head.wrapper.js');
+require('../components/table-head-cell.wrapper.js');
+require('../components/table-head-row.wrapper.js');
+require('../components/table-row.wrapper.js');
+require('../components/tabs.wrapper.js');
+require('../components/tabs-bar.wrapper.js');
+require('../components/tabs-item.wrapper.js');
+require('../components/tag.wrapper.js');
+require('../components/tag-dismissible.wrapper.js');
+require('../components/text.wrapper.js');
+require('../components/text-field-wrapper.wrapper.js');
+require('../components/text-list.wrapper.js');
+require('../components/text-list-item.wrapper.js');
+require('../components/textarea-wrapper.wrapper.js');
+require('../components/toast.wrapper.js');
+require('../components/wordmark.wrapper.js');
+var splitChildren = require('../../splitChildren.js');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
+
+class DSRFlyout extends react.Component {
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
+        const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
+        const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
+        const dismissBtn = (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", role: "dialog", ...utilsEntry.parseAndGetAriaAttributes({
+                                    'aria-modal': true,
+                                    'aria-hidden': !this.props.open,
+                                    ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                                }), tabIndex: -1, ...(hasSubFooter && { onScroll: this.props.onScroll }), children: [jsxRuntime.jsxs("div", { className: "header", children: [dismissBtn, hasHeader && (jsxRuntime.jsx("div", { className: "header-content", children: jsxRuntime.jsx("slot", { name: "header" }) }))] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasSubFooter && (jsxRuntime.jsx("div", { className: "sub-footer", children: jsxRuntime.jsx("slot", { name: "sub-footer" }) }))] }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRFlyout = DSRFlyout;

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

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-model-signature.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.js

@@ -18,6 +18,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

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

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

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

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');
@@ -74,7 +75,6 @@ class DSRScroller extends react.Component {
         this.isPrevHidden = true;
         this.isNextHidden = true;
     }
-    // should only update if scrollable
     render() {
         var _a;
         splitChildren.splitChildren(this.props.children);

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.js

@@ -17,6 +17,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js

@@ -18,6 +18,7 @@ require('../components/fieldset.wrapper.js');
 require('../components/fieldset-wrapper.wrapper.js');
 require('../components/flex.wrapper.js');
 require('../components/flex-item.wrapper.js');
+require('../components/flyout.wrapper.js');
 require('../components/grid.wrapper.js');
 require('../components/grid-item.wrapper.js');
 require('../components/heading.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/public-api.js

@@ -17,6 +17,7 @@ var fieldset_wrapper = require('./lib/components/fieldset.wrapper.js');
 var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.js');
 var flex_wrapper = require('./lib/components/flex.wrapper.js');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.js');
+var flyout_wrapper = require('./lib/components/flyout.wrapper.js');
 var grid_wrapper = require('./lib/components/grid.wrapper.js');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.js');
 var heading_wrapper = require('./lib/components/heading.wrapper.js');
@@ -87,6 +88,7 @@ exports.PFieldset = fieldset_wrapper.PFieldset;
 exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
+exports.PFlyout = flyout_wrapper.PFlyout;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;

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

@@ -3814,6 +3814,24 @@ const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 });
+/**
+ * Generates JSS styles for a frosted glass background.
+ * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
+ * @param {string} duration - The duration of the transition animation.
+ * @param {string} timingFn - The timing function of the transition animation. (default: 'cubic-bezier(.16,1,.3,1)')
+ * @returns {JssStyle} - The JSS styles for the frosted glass background.
+ */
+const getFrostedGlassBackgroundJssStyles = (isVisible, duration, timingFn = 'cubic-bezier(.16,1,.3,1)') => {
+    return {
+        // workaround via pseudo element to fix stacking (black) background in safari
+        '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isVisible
+            ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
+            opacity: 0,
+            backdropFilter: 'blur(0px)',
+            WebkitBackdropFilter: 'blur(0px)',
+        })), { transition: `opacity ${duration} ${timingFn}, backdrop-filter ${duration} ${timingFn}, --webkit-backdrop-filter ${duration} ${timingFn}` }),
+    };
+};
 
 const hostHiddenStyles = {
     '&([hidden])': {
@@ -3913,7 +3931,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$Y = (size, compact, open, theme) => {
+const getComponentCss$Z = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -3985,6 +4003,7 @@ const getComponentCss$Y = (size, compact, open, theme) => {
 
 const TOAST_Z_INDEX = 999999;
 const MODAL_Z_INDEX = 99999;
+const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
@@ -3997,7 +4016,7 @@ const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}m
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
 const topBottomFallback = '56px';
-const getComponentCss$X = (isOpen) => {
+const getComponentCss$Y = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed', bottom: `var(${cssVariableBottom},${topBottomFallback})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), { borderRadius: borderRadiusSmall }), (isOpen
@@ -4036,7 +4055,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$W = (direction) => {
+const getComponentCss$X = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4109,7 +4128,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$V = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$W = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), Object.assign({ root: {
             appearance: 'none',
@@ -4232,7 +4251,7 @@ align, compact, hasGradient, isDisabled) => {
     }));
 };
 
-const getComponentCss$U = (isDisabledOrLoading, ...args) => {
+const getComponentCss$V = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss(Object.assign(Object.assign({}, buttonLinkTileStyles), { root: Object.assign(Object.assign({}, buttonLinkTileStyles.root), { cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer' }) }));
 };
@@ -4304,7 +4323,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$T = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4343,7 +4362,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
+const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
@@ -4504,7 +4523,7 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$R = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$S = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -4546,7 +4565,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Q = (width) => {
+const getComponentCss$R = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4579,7 +4598,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$P = () => {
+const getComponentCss$Q = () => {
     return getCss({
         '@global': {
             ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, getDimensionStyle), hostHiddenStyles))),
@@ -4635,7 +4654,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$O = (size, align, color, ellipsis, theme) => {
+const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4649,7 +4668,7 @@ const getComponentCss$O = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$N = (color, orientation, theme) => {
+const getComponentCss$O = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -4664,7 +4683,7 @@ const getComponentCss$N = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4678,7 +4697,7 @@ const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
     })));
 };
 
-const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4702,7 +4721,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -4720,7 +4739,7 @@ const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$K = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -4738,6 +4757,74 @@ const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
+const flyoutBoxShadowColor = 'rgba(204, 204, 204, 0.35)';
+const flyoutBoxShadowColorDark = 'rgba(0, 0, 0, 0.6)';
+const headerShadowClass = 'header--shadow';
+const footerShadowClass = 'footer--shadow';
+const flyoutTransitionDuration = '0.5s';
+const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
+const cssVariableMaxWidth = '--p-flyout-max-width';
+const maxWidthDefault = '1180px';
+const minWidthDefault = '320px';
+const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
+    const isPositionLeft = position === 'left';
+    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge} ${spacingStaticMedium} ${spacingFluidLarge}`;
+    const shadowColor = isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor;
+    const transparentColor = isThemeDark(theme) ? 'rgba(14, 14, 18, 0)' : 'rgba(255, 255, 255, 0)';
+    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule({
+            ':host': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'fixed', zIndex: FLYOUT_Z_INDEX }, (isOpen
+                ? {
+                    visibility: 'inherit',
+                }
+                : {
+                    visibility: 'hidden',
+                    transition: `visibility 0s linear ${flyoutTransitionDuration}`,
+                })), getInsetJssStyle()), getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration)), hostHiddenStyles),
+        }), header: Object.assign(Object.assign({ display: 'flex' }, (hasHeader && {
+            flexDirection: 'row-reverse',
+        })), { justifyContent: 'flex-end', background: backgroundColor, position: 'sticky', top: 0 }), [`${headerShadowClass}`]: {
+            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px 5px 10px`,
+        } }, (hasHeader && {
+        'header-content': {
+            flex: 'auto',
+            padding: `${spacingStaticMedium} 0 ${spacingStaticMedium} ${spacingFluidLarge}`,
+        },
+    })), { dismiss: Object.assign({ margin: spacingStaticMedium, height: 'fit-content', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
+            '&:hover': {
+                background: darkThemeContrastHighColor,
+                borderColor: darkThemeContrastHighColor,
+            },
+        })), root: Object.assign(Object.assign({ color: primaryColor, display: 'flex', flexDirection: 'column', position: 'relative', [isPositionLeft ? 'marginRight' : 'marginLeft']: 'auto', boxSizing: 'border-box' }, (hasSubFooter && {
+            overflowY: 'auto',
+            overscrollBehaviorY: 'none',
+        })), { height: '100%', minWidth: minWidthDefault, maxWidth: `var(${cssVariableMaxWidth}, ${maxWidthDefault})`, background: backgroundColor, opacity: isOpen ? 1 : 0, transform: isOpen ? 'initial' : `translate3d(${isPositionLeft ? '-100%' : '100%'}, 0, 0)`, transition: `opacity ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction} ${isOpen ? '0s' : flyoutTransitionDuration}, transform ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction}`, boxShadow: `${isPositionLeft ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)` }), content: Object.assign({ padding: contentPadding }, (!hasSubFooter && {
+            overflowY: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            backgroundImage: `linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${shadowColor}, ${transparentColor}), linear-gradient(to bottom, ${shadowColor}, ${transparentColor})`,
+            backgroundPosition: 'bottom center, top center, bottom center, top center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
+            backgroundAttachment: 'local, local, scroll, scroll',
+            overscrollBehaviorY: 'none',
+        })) }), (hasFooter && {
+        footer: {
+            background: backgroundColor,
+            padding: contentPadding,
+            position: 'sticky',
+            bottom: 0,
+        },
+        [`${footerShadowClass}`]: {
+            boxShadow: `${isThemeDark(theme) ? flyoutBoxShadowColorDark : flyoutBoxShadowColor} 0px -5px 10px`,
+        },
+    })), (hasSubFooter && {
+        ['sub-footer']: {
+            padding: contentPadding,
+        },
+    })));
+};
+
 const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
@@ -5149,14 +5236,7 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
                 : {
                     visibility: 'hidden',
                     transition: 'visibility 0s linear .2s',
-                })), hostHiddenStyles), { 
-                // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isOpen
-                    ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
-                    opacity: 0,
-                    backdropFilter: 'blur(0px)',
-                    WebkitBackdropFilter: 'blur(0px)',
-                })), { transition: `opacity ${duration} ${transitionTimingFunction}, backdrop-filter ${duration} ${transitionTimingFunction},--webkit-backdrop-filter ${duration} ${transitionTimingFunction}` }) }))), { overflowY: 'auto' }),
+                })), hostHiddenStyles), getFrostedGlassBackgroundJssStyles(isOpen, duration)))), { overflowY: 'auto' }),
             '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
                     '&:first-child)': {
@@ -6512,4 +6592,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$o as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$Z as getAccordionCss, getComponentCss$Y as getBannerCss, getComponentCss$U as getButtonCss, getComponentCss$X as getButtonGroupCss, getComponentCss$W as getButtonPureCss, getComponentCss$V as getButtonTileCss, getComponentCss$T as getCarouselCss, getComponentCss$S as getCheckboxWrapperCss, getComponentCss$R as getContentWrapperCss, getComponentCss$Q as getCrestCss, getComponentCss$P as getDisplayCss, getComponentCss$O as getDividerCss, getComponentCss$M as getFieldsetCss, getComponentCss$N as getFieldsetWrapperCss, getComponentCss$K as getFlexCss, getComponentCss$L as getFlexItemCss, getComponentCss$J as getFlyoutCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$o as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

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

@@ -3684,7 +3684,7 @@ getMediaQueryMin('xxl');
 typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
 
 const CDN_BASE_URL$3 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/crest';
-const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.c7a5c86ffd55b1d0d332c94a795b1928@1x.png", "webp": "porsche-crest.min.99bed7254e46aa46a8391f715158a5fc@1x.webp" }, "2x": { "png": "porsche-crest.min.ac5bd967d27623d356c7864f697bf01a@2x.png", "webp": "porsche-crest.min.3abd4612f0e0d8dc7e56d8f236a7b338@2x.webp" }, "3x": { "png": "porsche-crest.min.3c189f2d4ba0c1a579ef61b309de4825@3x.png", "webp": "porsche-crest.min.01315546293a6bce3814304a1c8ad162@3x.webp" } } };
+const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.d76137cf8cf94822b7aedb534ba88418@1x.png", "webp": "porsche-crest.min.0d0cc89ae5ee57c4c15bd0dbbcbfe5d0@1x.webp" }, "2x": { "png": "porsche-crest.min.8a292fbd35a5155789ddd011585e05c4@2x.png", "webp": "porsche-crest.min.2245c45e99be5a46b4b56e73c43d5c63@2x.webp" }, "3x": { "png": "porsche-crest.min.18d6f02003b0829bac939fade88fd4e6@3x.png", "webp": "porsche-crest.min.19b429278b158b5cb5aa6ce80751e3fe@3x.webp" } } };
 const crestCdnBaseUrl = CDN_BASE_URL$3 ;
 const crestInnerManifest = CRESTS_MANIFEST.porscheCrest;
 const buildCrestSrcSet = (format) => {