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

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var scroller = require('../dsr-components/scroller.cjs');
 
 const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'cent
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -10,7 +10,7 @@ var segmentedControlItem = require('../dsr-components/segmented-control-item.cjs
 const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef((
 // @ts-ignore
 { aria, disabled = false, icon, iconSource, label, value, className, children, selected, theme = 'light', ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-segmented-control-item');
     const propsToSync = [aria, disabled, icon, iconSource, label, value];
     hooks.useBrowserLayoutEffect(() => {
@@ -29,7 +29,6 @@ const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var segmentedControl = require('../dsr-components/segmented-control.cjs');
 
 const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
@@ -30,7 +30,6 @@ const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, col
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var selectOption = require('../dsr-components/select-option.cjs');
 
 const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-select-option');
     const propsToSync = [disabled, value];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var selectWrapperDropdown = require('../dsr-components/select-wrapper-dropdown.cjs');
 
 const PSelectWrapperDropdown = /*#__PURE__*/ react.forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'openChange', onOpenChange);
     const WebComponentTag = hooks.usePrefix('p-select-wrapper-dropdown');
     const propsToSync = [description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme || hooks.useTheme()];
@@ -27,7 +27,6 @@ const PSelectWrapperDropdown = /*#__PURE__*/ react.forwardRef(({ description, di
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var selectWrapper = require('../dsr-components/select-wrapper.cjs');
 
 const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-select-wrapper');
     const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropd
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var select = require('../dsr-components/select.cjs');
 
 const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
@@ -28,7 +28,6 @@ const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = f
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var spinner = require('../dsr-components/spinner.cjs');
 
 const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-spinner');
     const propsToSync = [aria, size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -10,7 +10,7 @@ var stepperHorizontalItem = require('../dsr-components/stepper-horizontal-item.c
 const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef((
 // @ts-ignore
 { disabled = false, state, className, children, theme = 'light', ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
     hooks.useBrowserLayoutEffect(() => {
@@ -30,7 +30,6 @@ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var stepperHorizontal = require('../dsr-components/stepper-horizontal.cjs');
 
 const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
@@ -29,7 +29,6 @@ const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpd
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var _switch = require('../dsr-components/switch.cjs');
 
 const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
@@ -29,7 +29,6 @@ const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked =
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableBody = require('../dsr-components/table-body.cjs');
 
 const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-body');
     const props = {
         ...rest,
@@ -23,7 +23,6 @@ const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, children, ...res
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableCell = require('../dsr-components/table-cell.cjs');
 
 const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-cell');
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.multiline = multiline;
@@ -26,7 +26,6 @@ const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, classNam
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableHeadCell = require('../dsr-components/table-head-cell.cjs');
 
 const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, multiline = false, sort, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];
     hooks.useBrowserLayoutEffect(() => {
@@ -28,7 +28,6 @@ const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, mult
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-row.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableHeadRow = require('../dsr-components/table-head-row.cjs');
 
 const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head-row');
     const props = {
         ...rest,
@@ -23,7 +23,6 @@ const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, children, ...
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableHead = require('../dsr-components/table-head.cjs');
 
 const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-head');
     const props = {
         ...rest,
@@ -23,7 +23,6 @@ const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, children, ...res
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tableRow = require('../dsr-components/table-row.cjs');
 
 const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-table-row');
     const props = {
         ...rest,
@@ -23,7 +23,6 @@ const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var table = require('../dsr-components/table.cjs');
 
 const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
@@ -29,7 +29,6 @@ const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpd
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tabsBar = require('../dsr-components/tabs-bar.cjs');
 
 const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
@@ -29,7 +29,6 @@ const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -10,7 +10,7 @@ var tabsItem = require('../dsr-components/tabs-item.cjs');
 const PTabsItem = /*#__PURE__*/ react.forwardRef((
 // @ts-ignore
 { label, className, children, theme = 'light', ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tabs-item');
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.label = label;
@@ -27,7 +27,6 @@ const PTabsItem = /*#__PURE__*/ react.forwardRef((
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tabs = require('../dsr-components/tabs.cjs');
 
 const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
@@ -29,7 +29,6 @@ const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColo
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tagDismissible = require('../dsr-components/tag-dismissible.cjs');
 
 const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
     const propsToSync = [aria, color, label, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'backgro
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var tag = require('../dsr-components/tag.cjs');
 
 const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-tag');
     const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', com
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var textFieldWrapper = require('../dsr-components/text-field-wrapper.cjs');
 
 const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
     const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || hooks.useTheme(), unit, unitPosition];
@@ -28,7 +28,6 @@ const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLo
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var textListItem = require('../dsr-components/text-list-item.cjs');
 
 const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text-list-item');
     const props = {
         ...rest,
@@ -23,7 +23,6 @@ const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, children, ...
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var textList = require('../dsr-components/text-list.cjs');
 
 const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme || hooks.useTheme(), type];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var text = require('../dsr-components/text.cjs');
 
 const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primar
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var textareaWrapper = require('../dsr-components/textarea-wrapper.cjs');
 
 const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
     const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hid
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var textarea = require('../dsr-components/textarea.cjs');
 
 const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
@@ -30,7 +30,6 @@ const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', descripti
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var toast = require('../dsr-components/toast.cjs');
 
 const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-toast');
     const themeValue = hooks.useTheme();
     hooks.useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, re
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var wordmark = require('../dsr-components/wordmark.cjs');
 
 const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-wordmark');
     const propsToSync = [aria, href, size, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
@@ -26,7 +26,6 @@ const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small',
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
-        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -43,15 +43,7 @@ class DSRCanvas extends react.Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
-        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.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", 
-                                            // "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.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", 
-                                            // "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.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), 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.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("header", { className: "header", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -28,6 +28,9 @@ class DSRCarousel extends react.Component {
     btnNext;
     paginationEl;
     slides = [];
+    get splideSlides() {
+        return this.props.splide.Components.Elements.slides;
+    }
     get hasNavigation() {
         return this.props.slidesPerPage === 'auto' || this.props.amountOfPages > 1;
     }
@@ -59,7 +62,7 @@ class DSRCarousel extends react.Component {
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                    }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
+                                    }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", tabIndex: 0, children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
     getPageCount = () => (this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages);
 }