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

package/esm/lib/components/tabs-bar.wrapper.d.ts

@@ -34,7 +34,7 @@ export type PTabsBarProps = BaseProps & {
      */
     weight?: TabsBarWeight;
 };
-export declare const PTabsBar: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTabsBar: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
@@ -16,7 +16,6 @@ const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'ba
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tabs-item.wrapper.d.ts

@@ -5,7 +5,7 @@ export type PTabsItemProps = BaseProps & {
      */
     label: string;
 };
-export declare const PTabsItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTabsItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the label used in tabs.
      */

package/esm/lib/components/tabs-item.wrapper.mjs

@@ -5,14 +5,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PTabsItem = /*#__PURE__*/ forwardRef(({ label, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tabs-item');
     useBrowserLayoutEffect(() => {
         elementRef.current.label = label;
     }, [label]);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tabs.wrapper.d.ts

@@ -34,7 +34,7 @@ export type PTabsProps = BaseProps & {
      */
     weight?: TabsWeight;
 };
-export declare const PTabs: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTabs: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */

package/esm/lib/components/tabs.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
@@ -16,7 +16,6 @@ const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'b
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tag-dismissible.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PTagDismissibleProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTagDismissible: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/tag-dismissible.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag-dismissible');
     const propsToSync = [aria, color, label, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-su
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/tag.wrapper.d.ts

@@ -22,7 +22,7 @@ export type PTagProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTag: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTag: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Background color variations depending on theme property.
      */

package/esm/lib/components/tag.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
     const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -62,7 +62,7 @@ export type PTextFieldWrapperProps = BaseProps & {
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */

package/esm/lib/components/text-field-wrapper.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
     const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || useTheme(), unit, unitPosition];
@@ -15,7 +15,6 @@ const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-list-item.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTextListItemProps = BaseProps & {};
-export declare const PTextListItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextListItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/text-list-item.wrapper.mjs

@@ -5,11 +5,10 @@ import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 const PTextListItem = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text-list-item');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text-list.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PTextListProps = BaseProps & {
      */
     type?: TextListType;
 };
-export declare const PTextList: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextList: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */

package/esm/lib/components/text-list.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type = 'unordered', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme || useTheme(), type];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PTextList = /*#__PURE__*/ forwardRef(({ listType, orderType, theme, type =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/text.wrapper.d.ts

@@ -30,7 +30,7 @@ export type PTextProps = BaseProps & {
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

package/esm/lib/components/text.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', el
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/textarea-wrapper.wrapper.d.ts

@@ -34,7 +34,7 @@ export type PTextareaWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/textarea-wrapper.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-textarea-wrapper');
     const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/textarea.wrapper.d.ts

@@ -98,7 +98,7 @@ export type PTextareaProps = BaseProps & {
      */
     wrap?: TextareaWrap;
 };
-export declare const PTextarea: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextarea: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Specifies whether the input can be autofilled by the browser
      */

package/esm/lib/components/textarea.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PTextarea = /*#__PURE__*/ 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, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
@@ -17,7 +17,6 @@ const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete = '', description = '
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/toast.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PToastProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PToast: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PToast: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Adapts the toast color depending on the theme.
      */

package/esm/lib/components/toast.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-toast');
     const themeValue = useTheme();
     useBrowserLayoutEffect(() => {
@@ -13,7 +13,6 @@ const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) =>
     }, [theme, themeValue]);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/wordmark.wrapper.d.ts

@@ -22,7 +22,7 @@ export type PWordmarkProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PWordmark: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PWordmark: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/wordmark.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-wordmark');
     const propsToSync = [aria, href, size, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.23.0",
+  "version": "3.24.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.23.0"
+    "@porsche-design-system/components-js": "3.24.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 32.0.0 <33.0.0",
@@ -70,6 +70,11 @@
       "import": "./styles/esm/index.mjs",
       "default": "./styles/cjs/index.cjs"
     },
+    "./styles/vanilla-extract": {
+      "types": "./styles/vanilla-extract/esm/vanilla-extract/index.d.ts",
+      "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
+      "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
+    },
     "./ag-grid/*.css": "./ag-grid/*.css",
     "./testing": {
       "types": "./testing/index.d.ts",

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

@@ -5135,7 +5135,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])
@@ -5253,6 +5252,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/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3472,7 +3472,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/cjs/components-react/projects/react-ssr-wrapper/src/hooks.cjs

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

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

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var accordion = require('../dsr-components/accordion.cjs');
 
 const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
@@ -29,7 +29,6 @@ const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTa
                 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/banner.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var banner = require('../dsr-components/banner.cjs');
 
 const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
     const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || hooks.useTheme(), width];
@@ -29,7 +29,6 @@ const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButto
                 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/button-group.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var buttonGroup = require('../dsr-components/button-group.cjs');
 
 const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-group');
     hooks.useBrowserLayoutEffect(() => {
         elementRef.current.direction = direction;
@@ -25,7 +25,6 @@ const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'colu
                 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/button-pure.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var buttonPure = require('../dsr-components/button-pure.cjs');
 
 const PButtonPure = /*#__PURE__*/ react.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 = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
     const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel
                 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/button-tile.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var buttonTile = require('../dsr-components/button-tile.cjs');
 
 const PButtonTile = /*#__PURE__*/ react.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 = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, as
                 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/button.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var button = require('../dsr-components/button.cjs');
 
 const PButton = /*#__PURE__*/ react.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 = react.useRef();
+    const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
     const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
@@ -27,7 +27,6 @@ const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disable
                 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/canvas.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var canvas = require('../dsr-components/canvas.cjs');
 
 const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
@@ -29,7 +29,6 @@ const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebar
                 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/carousel.wrapper.cjs

@@ -8,7 +8,7 @@ var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.cjs');
 
 const PCarousel = /*#__PURE__*/ react.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 = react.useRef();
+    const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
@@ -29,7 +29,6 @@ const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignH
                 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/checkbox-wrapper.wrapper.cjs

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