@porsche-design-system/components-react 3.32.0 → 4.0.0-beta.0

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,10 +9,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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.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" | "onToggle"> & 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;
     /**
      * 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),

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEventDetail, Theme } from '../types';
+import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEventDetail } from '../types';
 export type PSwitchProps = BaseProps & {
     /**
      * Aligns the label.
@@ -25,10 +25,6 @@ export type PSwitchProps = BaseProps & {
      * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
-     */
-    onSwitchChange?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
     /**
      * Emitted when checked status is changed.
      */
@@ -37,10 +33,6 @@ export type PSwitchProps = BaseProps & {
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * Adapts the switch color depending on the theme.
-     */
-    theme?: Theme;
 };
 export declare const PSwitch: 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"> & {
     /**
@@ -67,10 +59,6 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
      * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
-     */
-    onSwitchChange?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
     /**
      * Emitted when checked status is changed.
      */
@@ -79,10 +67,6 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * Adapts the switch color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,18 +1,17 @@
 "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 PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
+const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false, compact = false, disabled = false, hideLabel = false, loading = false, onUpdate, stretch = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch, theme || useTheme()];
+    const propsToSync = [alignLabel, checked, compact, disabled, hideLabel, loading, stretch];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignLabel', 'checked', 'compact', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignLabel', 'checked', 'compact', 'disabled', 'hideLabel', 'loading', 'stretch'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TableLayout, TableUpdateEventDetail, Theme } from '../types';
+import type { TableLayout, TableUpdateEventDetail } from '../types';
 export type PTableProps = BaseProps & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
@@ -13,18 +13,10 @@ export type PTableProps = BaseProps & {
      * Controls the layout behavior of the table.
      */
     layout?: TableLayout;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
-     */
-    onSortingChange?: (event: CustomEvent<TableUpdateEventDetail>) => void;
     /**
      * Emitted when sorting is changed.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 };
 export declare const PTable: 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"> & {
     /**
@@ -39,18 +31,10 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
      * Controls the layout behavior of the table.
      */
     layout?: TableLayout;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
-     */
-    onSortingChange?: (event: CustomEvent<TableUpdateEventDetail>) => void;
     /**
      * Emitted when sorting is changed.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,18 +1,17 @@
 "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 PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, compact, layout, theme || useTheme()];
+    const propsToSync = [caption, compact, layout];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'compact', 'layout', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,22 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
+import type { TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
     activeTabIndex?: number | undefined;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: TabsBarGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: TabsBarGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
-     */
-    onTabChange?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
     /**
      * Emitted when active tab is changed.
      */
@@ -25,10 +13,6 @@ export type PTabsBarProps = BaseProps & {
      * The text size.
      */
     size?: BreakpointCustomizable<TabsBarSize>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The text weight.
      */
@@ -39,18 +23,6 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
     activeTabIndex?: number | undefined;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: TabsBarGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: TabsBarGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
-     */
-    onTabChange?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
     /**
      * Emitted when active tab is changed.
      */
@@ -59,10 +31,6 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      * The text size.
      */
     size?: BreakpointCustomizable<TabsBarSize>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The text weight.
      */

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

@@ -1,18 +1,17 @@
 "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 PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,22 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsGradientColor, TabsGradientColorScheme, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
+import type { TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
     activeTabIndex?: number;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: TabsGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: TabsGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
-     */
-    onTabChange?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
      * Emitted when active tab is changed.
      */
@@ -25,10 +13,6 @@ export type PTabsProps = BaseProps & {
      * The text size.
      */
     size?: BreakpointCustomizable<TabsSize>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The text weight.
      */
@@ -39,18 +23,6 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
     activeTabIndex?: number;
-    /**
-     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
-     */
-    gradientColor?: TabsGradientColor;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
-     */
-    gradientColorScheme?: TabsGradientColorScheme;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
-     */
-    onTabChange?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
      * Emitted when active tab is changed.
      */
@@ -59,10 +31,6 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      * The text size.
      */
     size?: BreakpointCustomizable<TabsSize>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The text weight.
      */

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

@@ -1,18 +1,17 @@
 "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 PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
+    const propsToSync = [activeTabIndex, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,14 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
+import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
 export type PTagDismissibleProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
-    /**
-     * Background color variations
-     */
-    color?: TagDismissibleColor;
     /**
      * A boolean value that, if present, renders the tag dismissible as a compact version.
      */
@@ -17,20 +13,12 @@ export type PTagDismissibleProps = BaseProps & {
      * The label text.
      */
     label?: string;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 };
 export declare const PTagDismissible: 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<TagDismissibleAriaAttribute>;
-    /**
-     * Background color variations
-     */
-    color?: TagDismissibleColor;
     /**
      * A boolean value that, if present, renders the tag dismissible as a compact version.
      */
@@ -39,10 +27,6 @@ export declare const PTagDismissible: import("react").ForwardRefExoticComponent<
      * The label text.
      */
     label?: string;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/tag-dismissible.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 PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', compact = false, label, theme, className, ...rest }, ref) => {
+const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, compact = false, label, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, compact, label, theme || useTheme()];
+    const propsToSync = [aria, compact, label];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'compact', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,6 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TagColor, TagIcon, Theme } from '../types';
+import type { TagIcon, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
-    /**
-     * Background color variations depending on theme property.
-     */
-    color?: TagColor;
     /**
      * Displays as compact version.
      */
@@ -18,15 +14,11 @@ export type PTagProps = BaseProps & {
      */
     iconSource?: string;
     /**
-     * Adapts the tag color depending on the theme.
+     * Background color variations.
      */
-    theme?: Theme;
+    variant?: TagVariant;
 };
 export declare const PTag: 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"> & {
-    /**
-     * Background color variations depending on theme property.
-     */
-    color?: TagColor;
     /**
      * Displays as compact version.
      */
@@ -40,9 +32,9 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import
      */
     iconSource?: string;
     /**
-     * Adapts the tag color depending on the theme.
+     * Background color variations.
      */
-    theme?: Theme;
+    variant?: TagVariant;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/tag.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 PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
+const PTag = /*#__PURE__*/ forwardRef(({ compact = false, icon = 'none', iconSource, variant = 'secondary', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, compact, icon, iconSource, theme || useTheme()];
+    const propsToSync = [compact, icon, iconSource, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'icon', 'iconSource', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,36 +1,12 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TextListListType, TextListOrderType, Theme, TextListType } from '../types';
+import type { TextListType } from '../types';
 export type PTextListProps = BaseProps & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
-     */
-    listType?: TextListListType;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The list style type of ordered list. Only has effect when list type is set to 'ordered'.
-     */
-    orderType?: TextListOrderType;
-    /**
-     * Adapts the text color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The list style type.
      */
     type?: TextListType;
 };
 export declare const PTextList: 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"> & {
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
-     */
-    listType?: TextListListType;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The list style type of ordered list. Only has effect when list type is set to 'ordered'.
-     */
-    orderType?: TextListOrderType;
-    /**
-     * Adapts the text color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The list style type.
      */