@porsche-design-system/components-react 3.23.0 → 3.24.0-rc.0

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

@@ -26,13 +26,7 @@ class DSRFlyoutMultilevelItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutMultilevelItemCss(this.props.primary, this.props.secondary, this.props.cascade, this.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure
-                                // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                /* @ts-ignore */
-                                , { 
-                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                                    /* @ts-ignore */
-                                    inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsxRuntime.jsx("h2", { children: this.props.label }), jsxRuntime.jsx("div", { className: "drawer", children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsxRuntime.jsx("h2", { children: this.props.label }), jsxRuntime.jsx("div", { className: "drawer", children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -35,10 +35,7 @@ class DSRFlyoutMultilevel extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutMultilevelCss(this.props.open, this.primary, this.isSecondaryDrawerVisible, 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("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsxs("div", { className: "drawer", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.props.theme, hideLabel: true, children: "Back" }), jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss-mobile", type: "button", variant: "ghost", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss-desktop", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }), jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("slot", {}) })] }) })] }), this.props.children] }));
+        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, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsxs("div", { className: "drawer", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.props.theme, hideLabel: true, children: "Back" }), jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss-mobile", type: "button", variant: "ghost", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss-desktop", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }), jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("slot", {}) })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -36,11 +36,7 @@ class DSRModal extends react.Component {
         // TODO: why do we validate only when opened?
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModalCss(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, 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("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            // eslint-disable-next-line
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', 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("dialog", { inert: !this.props.open, tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),

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

@@ -18,7 +18,7 @@ class DSRModelSignature extends react.Component {
         const fetchPriority = this.props.fetchPriority !== 'auto' ? this.props.fetchPriority : null;
         const loading = this.props.lazy === true ? 'lazy' : null;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModelSignatureCss(this.props.model, this.props.safeZone, this.props.size, this.props.color, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("img", { fetchpriority: fetchPriority, loading: loading, src: utilsEntry.getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("img", { fetchPriority: fetchPriority, loading: loading, src: utilsEntry.getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/BaseProps.d.ts

@@ -1,2 +1,2 @@
 import type { DOMAttributes, HTMLAttributes } from 'react';
-export type BaseProps = DOMAttributes<{}> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;
+export type BaseProps = DOMAttributes<{}> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'inert' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

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

@@ -5133,7 +5133,6 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
                     '&(*)': {
                         borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
                     },
-                    ...getFocusJssStyle(theme, { slotted: true }),
                 },
                 // TODO: maybe it's better to style with slot[name="heading"] and slot[name="description"] instead, then styles would be part of shadow dom
                 // .heading,p,::slotted([slot=description])
@@ -5251,6 +5250,8 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
                 ...backfaceVisibilityJssStyle,
                 flexShrink: 0,
                 transform: 'translateZ(0)', // fixes mobile safari flickering, https://github.com/nolimits4web/swiper/issues/3527#issuecomment-609088939
+                borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
+                ...getFocusJssStyle(theme),
             },
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
             ...(isHeaderAlignCenter && {

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

@@ -3470,7 +3470,7 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
 };
 
 /*
- Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.23.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {

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

@@ -42,7 +42,7 @@ const useEventCallback = (ref, eventName, eventHandler) => {
     }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
 };
 const useMergedClass = (ref, className) => {
-    const prevComponentClassName = useRef();
+    const prevComponentClassName = useRef(undefined);
     return useMemo(() => {
         if (!className) {
             return undefined;

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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRAccordion } from '../dsr-components/accordion.mjs';
 
 const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRBanner } from '../dsr-components/banner.mjs';
 
 const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
     const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || useTheme(), width];
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRButtonGroup } from '../dsr-components/button-group.mjs';
 
 const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-group');
     useBrowserLayoutEffect(() => {
         elementRef.current.direction = direction;
@@ -23,7 +23,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRButtonPure } from '../dsr-components/button-pure.mjs';
 
 const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-pure');
     const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRButtonTile } from '../dsr-components/button-tile.mjs';
 
 const PButtonTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRButton } from '../dsr-components/button.mjs';
 
 const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button');
     const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRCanvas } from '../dsr-components/canvas.mjs';
 
 const PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = usePrefix('p-canvas');
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRCarousel } from '../dsr-components/carousel.mjs';
 
 const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRCheckboxWrapper } from '../dsr-components/checkbox-wrapper.mjs';
 
 const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-checkbox-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRCheckbox } from '../dsr-components/checkbox.mjs';
 
 const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-checkbox');
@@ -27,7 +27,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRContentWrapper } from '../dsr-components/content-wrapper.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme || useTheme(), width];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRCrest } from '../dsr-components/crest.mjs';
 
 const PCrest = /*#__PURE__*/ forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-crest');
     const propsToSync = [aria, href, target];
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRDisplay } from '../dsr-components/display.mjs';
 
 const PDisplay = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-display');
     const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRDivider } from '../dsr-components/divider.mjs';
 
 const PDivider = /*#__PURE__*/ forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-divider');
     const propsToSync = [color, direction, orientation, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRFieldsetWrapper } from '../dsr-components/fieldset-wrapper.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-fieldset-wrapper');
     const propsToSync = [label, labelSize, message, required, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRFieldset } from '../dsr-components/fieldset.mjs';
 
 const PFieldset = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-fieldset');
     const propsToSync = [label, labelSize, message, required, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRFlexItem } from '../dsr-components/flex-item.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlexItem = /*#__PURE__*/ forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-flex-item');
     const propsToSync = [alignSelf, flex, grow, offset, shrink, width];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRFlex } from '../dsr-components/flex.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-flex');
     const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRFlyoutMultilevelItem } from '../dsr-components/flyout-multilevel-item.mjs';
 
 const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-flyout-multilevel-item');
     const propsToSync = [cascade, identifier, label, primary, secondary];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ cascade = false, ident
                 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRFlyoutMultilevel } from '../dsr-components/flyout-multilevel.mjs';
 
 const PFlyoutMultilevel = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-flyout-multilevel');
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRFlyout } from '../dsr-components/flyout.mjs';
 
 const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
@@ -28,7 +28,6 @@ const PFlyout = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = 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/grid-item.wrapper.mjs

@@ -7,7 +7,7 @@ import { DSRGridItem } from '../dsr-components/grid-item.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-grid-item');
     const propsToSync = [offset, size];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRGrid } from '../dsr-components/grid.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGrid = /*#__PURE__*/ forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-grid');
     const propsToSync = [direction, gutter, wrap];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRHeading } from '../dsr-components/heading.mjs';
 
 const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-heading');
     const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ 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

@@ -7,7 +7,7 @@ import { DSRHeadline } from '../dsr-components/headline.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 const PHeadline = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRIcon } from '../dsr-components/icon.mjs';
 
 const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -24,7 +24,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRInlineNotification } from '../dsr-components/inline-notification.mjs';
 
 const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-inline-notification');
@@ -27,7 +27,6 @@ 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

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRLinkPure } from '../dsr-components/link-pure.mjs';
 
 const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-pure');
     const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
     useBrowserLayoutEffect(() => {
@@ -25,7 +25,6 @@ const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end'
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };