@porsche-design-system/components-react 3.7.0-rc.0 → 3.7.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,33 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.7.0-rc.1] - 2023-09-20
+
+#### Added
+
+- **[EXPERIMENTAL]** Prop `loading` for `Radio Button Wrapper`
+  ([#2774](https://github.com/porsche-design-system/porsche-design-system/pull/2774))
+- Theme property supports `auto` for all themeable components, reflecting `prefers-color-scheme` based on OS system
+  settings ([#2719](https://github.com/porsche-design-system/porsche-design-system/pull/2719))
+- `hyphens` CSS property can now be overwritten in `Button Tile`, `Link Tile` and `Link Tile Model Signature` components
+  ([#2758](https://github.com/porsche-design-system/porsche-design-system/pull/2758))
+- Partials that produce innerHTML support `{ format: 'sha256' }` option for whitelisting in
+  [Content-Security-Policy (CSP)](must-know/security/content-security-policy)
+  ([#2773](https://github.com/porsche-design-system/porsche-design-system/pull/2773))
+- `Pin Code` ([#2691](https://github.com/porsche-design-system/porsche-design-system/pull/2691))
+
+#### Fixed
+
+- Dragging of `Carousel` can become stucked
+  ([#2768](https://github.com/porsche-design-system/porsche-design-system/pull/2768))
+- Color of `message` for `Fieldset`, `Fieldset Wrapper`, `Text Field Wrapper` and `Textarea Wrapper` in dark theme
+  ([#2769](https://github.com/porsche-design-system/porsche-design-system/pull/2769))
+
+#### Changed
+
+- Usage of `getInitialStyles()` partial is required and validated with an exception
+  ([#2749](https://github.com/porsche-design-system/porsche-design-system/pull/2749))
+
 ### [3.7.0-rc.0] - 2023-09-05
 
 #### Added

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 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];
+    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]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PPinCode = PPinCode;

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

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

package/cjs/public-api.cjs

@@ -35,6 +35,7 @@ var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.c
 var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
 var multiSelectOption_wrapper = require('./lib/components/multi-select-option.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
+var pinCode_wrapper = require('./lib/components/pin-code.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
 var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.cjs');
 var scroller_wrapper = require('./lib/components/scroller.wrapper.cjs');
@@ -108,6 +109,7 @@ exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
 exports.PMultiSelectOption = multiSelectOption_wrapper.PMultiSelectOption;
 exports.PPagination = pagination_wrapper.PPagination;
+exports.PPinCode = pinCode_wrapper.PPinCode;
 exports.PPopover = popover_wrapper.PPopover;
 exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
 exports.PScroller = scroller_wrapper.PScroller;

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -99,7 +99,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */

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?: "light" | "dark" | undefined;
+    background?: "auto" | "light" | "dark" | undefined;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

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

@@ -66,7 +66,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | 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/display.wrapper.d.ts

@@ -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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

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

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

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

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

@@ -50,7 +50,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -47,7 +47,7 @@ export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Predefined style of the headline.
      */

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

@@ -60,5 +60,5 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './model-signature.wrapper';
 export * from './multi-select.wrapper';
 export * from './multi-select-option.wrapper';
 export * from './pagination.wrapper';
+export * from './pin-code.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';
 export * from './scroller.wrapper';

package/esm/lib/components/inline-notification.wrapper.d.ts

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

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

@@ -115,7 +115,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Shows an underline under the label.
      */

package/esm/lib/components/link-social.wrapper.d.ts

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

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

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

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

@@ -78,7 +78,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The style variant of the link.
      */

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

@@ -10,7 +10,8 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     disableBackdropClick?: boolean;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean;
     /**
@@ -48,7 +49,8 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     disableBackdropClick?: boolean | undefined;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean | undefined;
     /**

package/esm/lib/components/model-signature.wrapper.d.ts

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

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -94,7 +94,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
     /**
      * Adapts the select color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The selected values.
      */

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

@@ -102,7 +102,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The total count of items.
      */

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -0,0 +1,120 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEvent, PinCodeState, Theme, PinCodeType } from '../types';
+export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: PinCodeLength;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Name of the control.
+     */
+    name?: string;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: (event: CustomEvent<PinCodeUpdateEvent>) => void;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: PinCodeState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Pin Code type.
+     */
+    type?: PinCodeType;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string;
+};
+export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string | undefined;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: 4 | 6 | undefined;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * Name of the control.
+     */
+    name?: string | undefined;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: ((event: CustomEvent<PinCodeUpdateEvent>) => void) | undefined;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "none" | "success" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "auto" | "light" | "dark" | undefined;
+    /**
+     * Pin Code type.
+     */
+    type?: "number" | "password" | undefined;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/pin-code.wrapper.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PPinCode = 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 elementRef = useRef();
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-pin-code');
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PPinCode };

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

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

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

@@ -9,6 +9,10 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The label text.
      */
     label?: string;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
@@ -31,6 +35,10 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      * The label text.
      */
     label?: string | undefined;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean | undefined;
     /**
      * The message styled depending on validation state.
      */
@@ -42,7 +50,7 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

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

package/esm/lib/components/segmented-control.wrapper.d.ts

@@ -46,7 +46,7 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
     /**
      * Adapts the segmented-control color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Sets the initial value of the segmented-control.
      */

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

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

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

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

package/esm/lib/components/stepper-horizontal.wrapper.d.ts

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

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

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