@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

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

@@ -1,18 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PRadioGroup = /*#__PURE__*/ forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PRadioGroup = /*#__PURE__*/ forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-radio-group');
-    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
+import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerScrollToPosition } from '../types';
 export type PScrollerProps = BaseProps & {
     /**
      * Sets the vertical position of scroll indicator.
@@ -9,18 +9,6 @@ export type PScrollerProps = BaseProps & {
      * Add ARIA role.
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: ScrollerGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: ScrollerGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `alignScrollIndicator` instead. Sets the vertical position of scroll indicator
-     */
-    scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
      * Scrolls the scroll area to the left either smooth or immediately.
      */
@@ -29,12 +17,8 @@ export type PScrollerProps = BaseProps & {
      * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the vertical position of scroll indicator.
      */
@@ -43,18 +27,6 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<i
      * Add ARIA role.
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: ScrollerGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: ScrollerGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `alignScrollIndicator` instead. Sets the vertical position of scroll indicator
-     */
-    scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
      * Scrolls the scroll area to the left either smooth or immediately.
      */
@@ -63,10 +35,6 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<i
      * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];
+    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -26,7 +26,7 @@ export type PSegmentedControlItemProps = BaseProps & {
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,10 +1,6 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlChangeEventDetail, SegmentedControlUpdateEventDetail, Theme } from '../types';
+import type { BreakpointCustomizable, SegmentedControlColumns, SegmentedControlChangeEventDetail, SegmentedControlState } from '../types';
 export type PSegmentedControlProps = BaseProps & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Background color variations
-     */
-    backgroundColor?: SegmentedControlBackgroundColor;
     /**
      * Sets the amount of columns.
      */
@@ -13,6 +9,10 @@ export type PSegmentedControlProps = BaseProps & {
      * A boolean value that, if present, renders the segmented-control as a compact version.
      */
     compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the segmented-control.
+     */
+    description?: string;
     /**
      * Disables the segmented-control.
      */
@@ -21,6 +21,18 @@ export type PSegmentedControlProps = BaseProps & {
      * The id of a form element the segmented-control should be associated with.
      */
     form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
     /**
      * The name of the segmented-control.
      */
@@ -34,27 +46,19 @@ export type PSegmentedControlProps = BaseProps & {
      */
     onChange?: (event: CustomEvent<SegmentedControlChangeEventDetail>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
-     */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
-    /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * A boolean value that specifies a selection must be made from the group before the form can be submitted.
      */
-    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
+    required?: boolean;
     /**
-     * Adapts the segmented-control color depending on the theme.
+     * Indicates the validation or overall status of the component.
      */
-    theme?: Theme;
+    state?: SegmentedControlState;
     /**
      * Sets the initial value of the segmented-control.
      */
     value?: string | number;
 };
-export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Background color variations
-     */
-    backgroundColor?: SegmentedControlBackgroundColor;
+export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the amount of columns.
      */
@@ -63,6 +67,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * A boolean value that, if present, renders the segmented-control as a compact version.
      */
     compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the segmented-control.
+     */
+    description?: string;
     /**
      * Disables the segmented-control.
      */
@@ -71,6 +79,18 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * The id of a form element the segmented-control should be associated with.
      */
     form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
     /**
      * The name of the segmented-control.
      */
@@ -84,17 +104,13 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      */
     onChange?: (event: CustomEvent<SegmentedControlChangeEventDetail>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
-     */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
-    /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * A boolean value that specifies a selection must be made from the group before the form can be submitted.
      */
-    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
+    required?: boolean;
     /**
-     * Adapts the segmented-control color depending on the theme.
+     * Indicates the validation or overall status of the component.
      */
-    theme?: Theme;
+    state?: SegmentedControlState;
     /**
      * Sets the initial value of the segmented-control.
      */

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -1,20 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, disabled = false, form, name, onBlur, onChange, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, disabled, form, name, theme || useTheme(), value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'disabled', 'form', 'name', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -9,7 +9,7 @@ export type PSelectOptionProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectUpdateEventDetail, SelectState, Theme } from '../types';
+import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectToggleEventDetail, SelectState } from '../types';
 export type PSelectProps = BaseProps & {
     /**
      * Displays as compact version.
@@ -18,7 +18,7 @@ export type PSelectProps = BaseProps & {
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered.
+     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
      */
     filter?: boolean;
     /**
@@ -50,9 +50,9 @@ export type PSelectProps = BaseProps & {
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
     /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
+     * Emitted when the dropdown is toggled.
      */
-    onUpdate?: (event: CustomEvent<SelectUpdateEventDetail>) => void;
+    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
@@ -61,16 +61,12 @@ export type PSelectProps = BaseProps & {
      * The validation state.
      */
     state?: SelectState;
-    /**
-     * Adapts the select color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The selected value.
      */
     value?: string;
 };
-export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.
      */
@@ -88,7 +84,7 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<imp
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered.
+     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
      */
     filter?: boolean;
     /**
@@ -120,9 +116,9 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<imp
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
     /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
+     * Emitted when the dropdown is toggled.
      */
-    onUpdate?: (event: CustomEvent<SelectUpdateEventDetail>) => void;
+    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
@@ -131,10 +127,6 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<imp
      * The validation state.
      */
     state?: SelectState;
-    /**
-     * Adapts the select color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The selected value.
      */

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

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, required = false, state = 'none', value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'update', onUpdate);
+    useEventCallback(elementRef, 'toggle', onToggle);
     const WebComponentTag = usePrefix('p-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,14 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, SheetAriaAttribute, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, Theme } from '../types';
+import type { SelectedAriaAttributes, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail } from '../types';
 export type PSheetProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * Defines the background color
+     */
+    background?: SheetBackground;
     /**
      * If true, the sheet will not be closable via backdrop click.
      */
@@ -29,16 +33,16 @@ export type PSheetProps = BaseProps & {
      * If true, the sheet is open.
      */
     open: boolean;
-    /**
-     * Adapts the sheet color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PSheet: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSheet: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * Defines the background color
+     */
+    background?: SheetBackground;
     /**
      * If true, the sheet will not be closable via backdrop click.
      */
@@ -63,10 +67,6 @@ export declare const PSheet: import("react").ForwardRefExoticComponent<Omit<impo
      * If true, the sheet is open.
      */
     open: boolean;
-    /**
-     * Adapts the sheet color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSheet = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+const PSheet = /*#__PURE__*/ forwardRef(({ aria, background = 'canvas', disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-sheet');
-    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || useTheme()];
+    const propsToSync = [aria, background, disableBackdropClick, dismissButton, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'dismissButton', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'background', 'disableBackdropClick', 'dismissButton', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
+import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize } from '../types';
 export type PSpinnerProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -9,12 +9,8 @@ export type PSpinnerProps = BaseProps & {
      * Size of the spinner.
      */
     size?: BreakpointCustomizable<SpinnerSize>;
-    /**
-     * Adapts the spinner color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
@@ -23,8 +19,4 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<im
      * Size of the spinner.
      */
     size?: BreakpointCustomizable<SpinnerSize>;
-    /**
-     * Adapts the spinner color depending on the theme.
-     */
-    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
+const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme || useTheme()];
+    const propsToSync = [aria, size];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -10,7 +10,7 @@ export type PStepperHorizontalItemProps = BaseProps & {
      */
     state?: StepperHorizontalItemState;
 };
-export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */

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

@@ -1,10 +1,6 @@
 import type { BaseProps } from '../../BaseProps';
-import type { StepperHorizontalUpdateEventDetail, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
+import type { StepperHorizontalUpdateEventDetail, BreakpointCustomizable, StepperHorizontalSize } from '../types';
 export type PStepperHorizontalProps = BaseProps & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
-     */
-    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
     /**
      * Emitted when active step is changed.
      */
@@ -13,16 +9,8 @@ export type PStepperHorizontalProps = BaseProps & {
      * The text size.
      */
     size?: BreakpointCustomizable<StepperHorizontalSize>;
-    /**
-     * Adapts the tag color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
-     */
-    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Emitted when active step is changed.
      */
@@ -31,10 +19,6 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
      * The text size.
      */
     size?: BreakpointCustomizable<StepperHorizontalSize>;
-    /**
-     * Adapts the tag color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/stepper-horizontal.wrapper.mjs

@@ -1,19 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onUpdate, size = 'small', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
+        elementRef.current.size = size;
+    }, [size]);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),