@porsche-design-system/components-react 3.20.0 → 3.21.0-rc.0

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

@@ -4552,7 +4552,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
-    const scalingVar = `var(${cssVariableInternalScaling}, ${compact ? 'calc(4 / 13)' : 1})`; // Compact mode needs to have 4px paddingBlock thus this scaling factor
+    const scalingVar = `var(${cssVariableInternalScaling}, var(--p-internal-scaling-factor))`;
     const borderCompensation = variant === 'ghost' ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
     const paddingBlock = `calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} ${borderCompensation})`; // 0.8125 * SCALING_BASE_VALUE corresponds to 13px
     const paddingInline = `max(calc(${scalingVar} * 1.625 * ${SCALING_BASE_VALUE} ${borderCompensation}), ${variant === 'ghost' ? '6px' : '4px'})`; // 1.625 * SCALING_BASE_VALUE corresponds to 26px
@@ -4591,6 +4591,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
             color: textColor,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                '--p-internal-scaling-factor': compactValue ? 'calc(4 / 13)' : 1, // Compact mode needs to have 4px paddingBlock thus this scaling factor
+            })),
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
@@ -6630,6 +6633,7 @@ const getScrollerJssStyle = (position, theme) => {
     };
     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'
             ? {
@@ -6648,10 +6652,11 @@ const getScrollerJssStyle = (position, theme) => {
         }),
     };
 };
+const dialogPaddingBlock = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const dialogGridJssStyle = {
     display: 'grid',
     gridTemplate: `auto/${spacingFluidSmall} auto ${spacingFluidSmall}`,
-    paddingBlock: `calc(${spacingFluidSmall} + ${spacingFluidMedium})`,
+    paddingBlock: dialogPaddingBlock,
     rowGap: spacingFluidMedium,
     columnGap: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
     alignContent: 'flex-start',
@@ -6678,25 +6683,15 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
             ? {
                 opacity: 1,
                 transform: 'initial',
-                // we need to ensure that the elements inside, which get auto focused by `.showModal()`, to always be in the
-                // viewport (or off the view on the start-hand side) before the dialog transition starts otherwise the transition
-                // won't work in all cases, e.g. `dir="rtl"` and `<p-flyout position="end" />`. Because auto focus would force the
-                // focused elements to be rendered in the viewport immediately and ignore the transition.
-                ...(slideIn === '<' && {
-                    marginInlineEnd: 0,
-                }),
             }
             : {
                 opacity: 0,
-                ...(slideIn === '<' && {
-                    marginInlineEnd: '200vw',
-                }),
                 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)}, margin-inline-end 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '1ms' : motionDurationMap[duration]})`,
+        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
     };
 };
 const getDialogStickyAreaJssStyle = (area, theme) => {
@@ -6730,8 +6725,9 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
+    const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
         '@global': {
             ':host': {
@@ -6751,12 +6747,20 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                 '&:not([name])': {
                     gridColumn: '2/3',
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    ...(isFooterFixed &&
+                        hasHeader && {
+                        gridRow: 2,
+                    }),
                 },
                 ...(hasHeader && {
                     '&[name=header]': {
                         ...getDialogStickyAreaJssStyle('header', theme),
                         gridColumn: '1/-1',
                         zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                        ...(isFooterFixed && {
+                            gridRow: 1,
+                        }),
+                        marginBlockStart: 0,
                     },
                 }),
                 ...(hasFooter && {
@@ -6764,6 +6768,12 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                         ...getDialogStickyAreaJssStyle('footer', theme),
                         gridColumn: '1/-1',
                         zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                        ...(isFooterFixed && {
+                            gridRow: hasHeader ? 3 : 2,
+                            ...(!hasSubFooter && {
+                                marginBlockEnd: '.3px', // lets the footer shadow disappear when flyout is scrolled to the bottom
+                            }),
+                        }),
                     },
                 }),
                 ...(hasSubFooter && {
@@ -6791,6 +6801,22 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             width: `var(${cssVariableWidth$2},auto)`,
             minWidth: '320px',
             maxWidth: `var(${cssVariableMaxWidth},1180px)`,
+            ...(hasHeader && {
+                paddingBlockStart: 0,
+            }),
+            ...(isFooterFixed &&
+                !hasSubFooter && {
+                paddingBlockEnd: 0,
+            }),
+            ...(isFooterFixed && {
+                gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
+                '&::before': {
+                    content: '""',
+                    minHeight: hasHeader ? '100dvh' : `calc(100dvh - ${dialogPaddingBlock})`,
+                    gridArea: `1/1/${hasHeader ? '4' : '3'}/-1`,
+                    pointerEvents: 'none',
+                },
+            }),
         },
         dismiss: {
             ...dismissButtonJssStyle,
@@ -6800,7 +6826,7 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             insetBlockStart: spacingFluidSmall,
             insetInlineEnd: spacingFluidSmall,
             marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
-            justifySelf: 'flex-end',
+            placeSelf: 'flex-start flex-end',
         },
     });
 };
@@ -7831,7 +7857,7 @@ const getComponentCss$E = (isOpen, backdrop, fullscreen, hasDismissButton, hasHe
                 insetBlockStart: spacingFluidSmall,
                 marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
                 marginInlineEnd: spacingFluidSmall,
-                justifySelf: 'flex-end',
+                placeSelf: 'flex-start flex-end',
             },
         }),
     });
@@ -8116,9 +8142,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
     };
 };
 
-const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
-
-const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -8131,15 +8155,6 @@ const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    [`::slotted([slot=${INTERNAL_MULTI_SELECT_SLOT}])`]: {
-                        position: 'absolute',
-                        opacity: 0,
-                        height: '0px',
-                        bottom: 0,
-                    },
-                })),
             // TODO: re-use select-wrapper-style
             input: getInputStyles(isDisabled, direction, isOpen, state, theme),
         },
@@ -8148,9 +8163,6 @@ const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWi
             gap: spacingStaticXSmall,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
-            ...(isWithinForm && {
-                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
-            }),
         },
         wrapper: {
             position: 'relative',
@@ -9580,15 +9592,13 @@ const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, them
     });
 };
 
-const INTERNAL_SELECT_SLOT = 'internal-select';
-
 const cssVarBackgroundColor = '--p-select-background-color';
 const cssVarTextColor = '--p-select-text-color';
 const cssVarBorderColor = '--p-select-border-color';
 const cssVarIconFilter = '--p-select-icon-filter';
 const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
 const cssVarBorderColorFocus = '--p-select-focus-border-color';
-const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9599,15 +9609,6 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    [`::slotted([slot=${INTERNAL_SELECT_SLOT}])`]: {
-                        position: 'absolute',
-                        opacity: 0,
-                        height: '0px',
-                        bottom: 0,
-                    },
-                })),
             // TODO: re-use select-wrapper-style
             button: getButtonStyles(isDisabled, direction, isOpen, state, theme),
         },
@@ -9616,9 +9617,6 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWi
             gap: spacingStaticXSmall,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
-            ...(isWithinForm && {
-                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
-            }),
         },
         wrapper: {
             position: 'relative',

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

@@ -3656,8 +3656,6 @@ const buildImgSrc = (innerManifest) => `${getCDNBaseURL()}/marque/${innerManifes
 const getSvgUrl = (model) => {
     return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
-
-const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 const getSelectedOptions = (options) => options.filter((option) => option.selected);
 const getSelectedOptionValues = (options) => options.filter((option) => option.selected).map((option) => option.value);
 var ItemType;
@@ -3832,8 +3830,6 @@ const isCustomDropdown = (filter, native) => {
         return !isTouchDevice();
     }
 };
-
-const INTERNAL_SELECT_SLOT = 'internal-select';
 const getSelectedOptionString = (options) => options.find((option) => option.selected)?.textContent ?? '';
 const isStateCompleteOrWarning = (state) => {
     return state === 'complete' || state === 'warning';
@@ -3876,4 +3872,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };

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

@@ -27,6 +27,7 @@ const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = tr
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -23,6 +23,7 @@ const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', x
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'en
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PButtonTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRa
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = fa
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartU
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignHeader
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transpare
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -24,6 +24,7 @@ const PCrest = /*#__PURE__*/ forwardRef(({ aria, href, target = '_self', classNa
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PDisplay = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -24,6 +24,7 @@ const PDivider = /*#__PURE__*/ forwardRef(({ color = 'contrast-low', direction =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'me
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PFieldset = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PFlexItem = /*#__PURE__*/ forwardRef(({ alignSelf = 'auto', flex = 'initia
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ identifier, label, cla
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, on
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -5,29 +5,30 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRFlyout } from '../dsr-components/flyout.mjs';
 
-const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, disableBackdropClick, open, position, theme || useTheme()];
+    const propsToSync = [aria, disableBackdropClick, footerBehavior, open, position, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRFlyout, { aria, disableBackdropClick, open, position, theme: theme || useTheme(), children })),
+                children: (jsx(DSRFlyout, { aria, disableBackdropClick, footerBehavior, open, position, theme: theme || useTheme(), children })),
             }
             : {
                 children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, c
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PGrid = /*#__PURE__*/ forwardRef(({ direction = 'row', gutter = { base: 16
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PHeadline = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary'
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -24,6 +24,7 @@ const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', lazy, name =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -27,6 +27,7 @@ const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-righ
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end'
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -26,6 +26,7 @@ const PLinkSocial = /*#__PURE__*/ forwardRef(({ compact = false, hideLabel = fal
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-model-signature.wrapper.mjs

@@ -25,6 +25,7 @@ const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -26,6 +26,7 @@ const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', descri
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRati
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideL
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', tar
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -29,6 +29,7 @@ const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackd
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

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

@@ -25,6 +25,7 @@ const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPrio
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/multi-select-option.wrapper.mjs

@@ -25,6 +25,7 @@ const PMultiSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };