@porsche-design-system/components-react 3.8.0 → 3.9.0-rc.0

package/cjs/lib/components/tabs-bar.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/tabs.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/tag-dismissible.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, ...rest }, ref) => {
+const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface', label, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme];
+    const propsToSync = [aria, color, label, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/tag.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
+const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme];
+    const propsToSync = [color, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/text-field-wrapper.wrapper.cjs

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     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, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme || hooks.useTheme(), unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/text-list.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTextList = react.forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, ...rest }, ref) => {
+const PTextList = react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme, type];
+    const propsToSync = [listType, orderType, theme || hooks.useTheme(), type];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/text.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/textarea-wrapper.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/toast.wrapper.cjs

@@ -6,12 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PToast = react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-toast');
+    const themeValue = hooks.useTheme();
     hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        elementRef.current.theme = theme || themeValue;
+    }, [theme, themeValue]);
     const props = {
         ...rest,
         class: hooks.useMergedClass(elementRef, className),

package/cjs/lib/components/wordmark.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme];
+    const propsToSync = [aria, href, size, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/provider.cjs

@@ -8,12 +8,13 @@ var componentsJs = require('@porsche-design-system/components-js');
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = react.createContext({
     prefix: undefined,
+    theme: 'light',
 });
-const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...props }) => {
     react.useEffect(() => {
         componentsJs.load({ prefix, cdn });
     }, []); // runtime prefix or cdn change is not supported
-    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix, theme }, ...props });
 };
 
 exports.PorscheDesignSystemContext = PorscheDesignSystemContext;

package/esm/hooks.d.ts

@@ -1,12 +1,13 @@
 import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
-import type { ToastMessage } from './lib/types';
+import type { Theme, ToastMessage } from './lib/types';
 /**
  * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
  * when `process.env.NODE_ENV === 'test'`
  */
 export declare const skipCheckForPorscheDesignSystemProviderDuringTests: () => void;
 export declare const usePrefix: (tagName: string) => string;
+export declare const useTheme: () => Theme;
 export declare const useEventCallback: (ref: MutableRefObject<HTMLElement | undefined>, eventName: string, eventHandler: (e: Event) => void) => void;
 export declare const useMergedClass: (ref: MutableRefObject<HTMLElement | undefined>, className?: string) => string | undefined;
 export declare const useBrowserLayoutEffect: typeof useEffect;

package/esm/hooks.mjs

@@ -23,6 +23,14 @@ const usePrefix = (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
+const useTheme = () => {
+    if (process.env.NODE_ENV === 'test' && skipCheck) {
+        return 'light';
+    }
+    else {
+        return useContext(PorscheDesignSystemContext).theme; // eslint-disable-line react-hooks/rules-of-hooks
+    }
+};
 const useEventCallback = (ref, eventName, eventHandler) => {
     useEffect(() => {
         const { current } = ref;
@@ -60,4 +68,4 @@ const useToastManager = () => {
     };
 };
 
-export { skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useToastManager };
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useTheme, useToastManager };

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

@@ -66,7 +66,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, open, size, tag, theme];
+    const propsToSync = [compact, heading, open, size, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -71,7 +71,7 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the banner color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, ...rest }, ref) => {
+const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme || useTheme(), width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/button-pure.wrapper.d.ts

@@ -33,6 +33,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Size of the button.
      */
@@ -49,6 +53,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
@@ -88,10 +96,14 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean | undefined;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string | undefined;
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"small" | "inherit" | "xx-small" | "x-small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -99,16 +111,20 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Specifies the type of the button.
      */
     type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string | undefined;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "bold" | "regular" | "semi-bold" | "thin" | "semibold" | undefined;
+    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/button-pure.wrapper.mjs

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', value, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, value, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'theme', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/button-tile.wrapper.d.ts

@@ -78,7 +78,7 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the description and button theme when used on light background image.
      */
-    background?: "auto" | "light" | "dark" | undefined;
+    background?: "light" | "dark" | "auto" | undefined;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

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

@@ -25,6 +25,10 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Adapts the button color depending on the theme.
      */
@@ -33,6 +37,10 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The style variant of the button.
      */
@@ -63,14 +71,22 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean | undefined;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Specifies the type of the button.
      */
     type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string | undefined;
     /**
      * The style variant of the button.
      */

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, theme = 'light', type = 'submit', variant = 'primary', className, ...rest }, ref) => {
+const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, theme, type, variant];
+    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -115,7 +115,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -50,7 +50,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -27,7 +27,7 @@ export declare const PContentWrapper: import("react").ForwardRefExoticComponent<
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme, width];
+    const propsToSync = [backgroundColor, theme || useTheme(), width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -42,7 +42,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"small" | "inherit" | "medium" | "large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the display component.
      */
@@ -50,7 +50,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDisplay = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
+const PDisplay = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-display');
-    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -34,5 +34,5 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts color depending on theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme = 'light', className, ...rest }, ref) => {
+const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-divider');
-    const propsToSync = [color, direction, orientation, theme];
+    const propsToSync = [color, direction, orientation, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -51,7 +51,7 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
     /**
      * Adapts color depending on theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;