@porsche-design-system/components-react 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -14,9 +14,53 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
-### 3.8.0 - 2023-10-24
+### [3.9.0] - 2023-11-24
 
-### 3.8.0-rc.0 - 2023-10-23
+### [3.9.0-rc.0] - 2023-11-23
+
+#### Added
+
+- Angular: `theme: 'light' | 'dark' | 'auto'` option to `PorscheDesignSystemModule.load()` to set `theme` on all child
+  components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- React: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child
+  components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- Vue: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child components  
+  ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872))
+- Validation for usage of different PDS versions
+  ([#2867](https://github.com/porsche-design-system/porsche-design-system/pull/2867))
+
+#### Changed
+
+- `Text Field Wrapper`, `Textarea Wrapper`, `Select Wrapper`, `Multi Select`, `Pin Code`, `Checkbox Wrapper` and
+  `Radio Button Wrapper` have improved visual alignment
+  ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854))
+- `Text Field Wrapper` fully supports RTL (right-to-left) mode
+  ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854))
+- `Pin Code`: Prop values from `1` to `6` are now supported for `length` prop
+  ([#2859](https://github.com/porsche-design-system/porsche-design-system/pull/2859))
+- `Model Signature` asset for `model="macan"`
+  ([#2857](https://github.com/porsche-design-system/porsche-design-system/pull/2857))
+- Use motion tokens in all components
+  ([#2834](https://github.com/porsche-design-system/porsche-design-system/pull/2834))
+
+#### Fixed
+
+- `Select Wrapper` keyboard and scroll behavior
+  ([#2864](https://github.com/porsche-design-system/porsche-design-system/pull/2864))
+- Safari 15 default margin of button elements in several components
+  ([#2858](https://github.com/porsche-design-system/porsche-design-system/pull/2858))
+- `Checkbox Wrapper` and `Radio Button Wrapper` border-color/background-color does not reset on hover
+  ([#2852](https://github.com/porsche-design-system/porsche-design-system/pull/2852))
+- `Tabs Bar` losing `activeTabIndex` and underline in certain framework scenarios
+  ([#2896](https://github.com/porsche-design-system/porsche-design-system/pull/2896))
+- `Modal` and `Flyout` body jumping in the background and scrolling back to the top in Next Js and Remix
+  ([#2890](https://github.com/porsche-design-system/porsche-design-system/pull/2890))
+
+### [3.8.0] - 2023-10-24
+
+### [3.8.0-rc.0] - 2023-10-23
 
 #### Added
 

package/cjs/hooks.cjs

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

package/cjs/lib/components/accordion.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
-    const propsToSync = [compact, heading, open, size, tag, theme];
+    const propsToSync = [compact, heading, open, size, tag, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/banner.wrapper.cjs

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme || hooks.useTheme(), width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonPure = react.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 = 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', value, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.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 || hooks.useTheme(), type, value, weight];
     hooks.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/cjs/lib/components/button.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, theme = 'light', type = 'submit', variant = 'primary', className, ...rest }, ref) => {
+const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, theme, type, variant];
+    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.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/cjs/lib/components/carousel.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = react.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 = react.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 = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.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 || hooks.useTheme(), width, wrapContent];
     hooks.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/cjs/lib/components/checkbox-wrapper.wrapper.cjs

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

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme, width];
+    const propsToSync = [backgroundColor, theme || hooks.useTheme(), width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/display.wrapper.cjs

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

package/cjs/lib/components/divider.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PDivider = react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme = 'light', className, ...rest }, ref) => {
+const PDivider = react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-divider');
-    const propsToSync = [color, direction, orientation, theme];
+    const propsToSync = [color, direction, orientation, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state, theme];
+    const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/fieldset.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFieldset = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PFieldset = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-fieldset');
-    const propsToSync = [label, labelSize, message, required, state, theme];
+    const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'end', theme = 'light', className, ...rest }, ref) => {
+const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, open, position, theme];
+    const propsToSync = [aria, open, position, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/heading.wrapper.cjs

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

package/cjs/lib/components/headline.wrapper.cjs

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-const PHeadline = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+const PHeadline = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-headline');
-    const propsToSync = [align, color, ellipsis, tag, theme, variant];
+    const propsToSync = [align, color, ellipsis, tag, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/icon.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme];
+    const propsToSync = [aria, color, lazy, name, size, source, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/link-pure.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || hooks.useTheme(), underline, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/link-social.wrapper.cjs

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
+const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
+    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/link.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme = 'light', variant = 'primary', className, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant];
+    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/modal.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/model-signature.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme];
+    const propsToSync = [color, model, size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/multi-select.wrapper.cjs

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PMultiSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme = 'light', value = [], className, ...rest }, ref) => {
+const PMultiSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value];
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/pagination.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme || hooks.useTheme(), totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme = 'light', type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pin-code');
-    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/popover.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', theme = 'light', className, ...rest }, ref) => {
+const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, theme];
+    const propsToSync = [aria, description, direction, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/radio-button-wrapper.wrapper.cjs

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

package/cjs/lib/components/scroller.wrapper.cjs

@@ -6,10 +6,10 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme, value];
+    const propsToSync = [backgroundColor, columns, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

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

package/cjs/lib/components/spinner.wrapper.cjs

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

package/cjs/lib/components/stepper-horizontal.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme];
+    const propsToSync = [size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/switch.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/cjs/lib/components/table.wrapper.cjs

@@ -6,12 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, theme];
+    const propsToSync = [caption, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));