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

package/esm/lib/components/input-url.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 PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-url');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-week.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState, Theme } from '../types';
+import type { BreakpointCustomizable, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState } from '../types';
 export type PInputWeekProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
@@ -77,10 +77,6 @@ export type PInputWeekProps = BaseProps & {
      * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 month.
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27')
      */
@@ -163,10 +159,6 @@ export declare const PInputWeek: import("react").ForwardRefExoticComponent<Omit<
      * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 month.
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27')
      */

package/esm/lib/components/input-week.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 PInputWeek = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, ...rest }, ref) => {
+const PInputWeek = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-week');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
+import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget } from '../types';
 export type PLinkPureProps = BaseProps & {
     /**
      * Display link in active state.
@@ -49,19 +49,10 @@ export type PLinkPureProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkPureTarget;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Shows an underline under the label.
      */
     underline?: boolean;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    weight?: LinkPureWeight;
 };
 export declare const PLinkPure: 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"> & {
     /**
@@ -112,19 +103,10 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<i
      * Target attribute where the link should be opened.
      */
     target?: LinkPureTarget;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Shows an underline under the label.
      */
     underline?: boolean;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    weight?: LinkPureWeight;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-pure.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 PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', underline = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, Theme } from '../types';
+import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget } from '../types';
 export type PLinkTileProductProps = BaseProps & {
     /**
      * Aspect ratio of the link-tile-product.
@@ -45,10 +45,6 @@ export type PLinkTileProductProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkTileProductTarget;
-    /**
-     * Adapts the link-tile-product color depending on the theme.
-     */
-    theme?: Theme;
 };
 export declare const PLinkTileProduct: 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"> & {
     /**
@@ -95,10 +91,6 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      * Target attribute where the link should be opened.
      */
     target?: LinkTileProductTarget;
-    /**
-     * Adapts the link-tile-product color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -1,17 +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 PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = BaseProps & {
     /**
      * Alignment of link and description.
@@ -13,10 +13,6 @@ export type PLinkTileProps = BaseProps & {
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
-    /**
-     * Adapts the description and link theme when used on light background image.
-     */
-    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */
@@ -71,10 +67,6 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<i
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
-    /**
-     * Adapts the description and link theme when used on light background image.
-     */
-    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

package/esm/lib/components/link-tile.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', compact = false, description, download, gradient = false, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, LinkVariant } from '../types';
 export type PLinkProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -37,10 +37,6 @@ export type PLinkProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkTarget;
-    /**
-     * Adapts the link color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The style variant of the link.
      */
@@ -83,10 +79,6 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<impor
      * Target attribute where the link should be opened.
      */
     target?: LinkTarget;
-    /**
-     * Adapts the link color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The style variant of the link.
      */

package/esm/lib/components/link.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 PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
+const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link');
-    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, Theme } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, ModalBackground, BreakpointCustomizable, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail } from '../types';
 export type PModalProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -10,14 +10,13 @@ export type PModalProps = BaseProps & {
      */
     backdrop?: ModalBackdrop;
     /**
-     * If true, the modal will not be closable via backdrop click.
+     * Defines the background color
      */
-    disableBackdropClick?: boolean;
+    background?: ModalBackground;
     /**
-     * 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.
+     * If true, the modal will not be closable via backdrop click.
      */
-    disableCloseButton?: boolean;
+    disableBackdropClick?: boolean;
     /**
      * If false, the modal will not have a dismiss button.
      */
@@ -26,14 +25,6 @@ export type PModalProps = BaseProps & {
      * If true the modal uses max viewport height and width. Should only be used for mobile.
      */
     fullscreen?: BreakpointCustomizable<boolean>;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
-     */
-    heading?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismiss` event instead. Emitted when the component requests to be dismissed.
-     */
-    onClose?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -50,10 +41,6 @@ export type PModalProps = BaseProps & {
      * If true, the modal is open.
      */
     open: boolean;
-    /**
-     * Adapts the modal color depending on the theme.
-     */
-    theme?: Theme;
 };
 export declare const PModal: 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"> & {
     /**
@@ -65,14 +52,13 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<impo
      */
     backdrop?: ModalBackdrop;
     /**
-     * If true, the modal will not be closable via backdrop click.
+     * Defines the background color
      */
-    disableBackdropClick?: boolean;
+    background?: ModalBackground;
     /**
-     * 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.
+     * If true, the modal will not be closable via backdrop click.
      */
-    disableCloseButton?: boolean;
+    disableBackdropClick?: boolean;
     /**
      * If false, the modal will not have a dismiss button.
      */
@@ -81,14 +67,6 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<impo
      * If true the modal uses max viewport height and width. Should only be used for mobile.
      */
     fullscreen?: BreakpointCustomizable<boolean>;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
-     */
-    heading?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismiss` event instead. Emitted when the component requests to be dismissed.
-     */
-    onClose?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -105,10 +83,6 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<impo
      * If true, the modal is open.
      */
     open: boolean;
-    /**
-     * Adapts the modal color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,20 +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 PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, dismissButton = true, fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, dismissButton, fullscreen, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'dismissButton', 'fullscreen', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize } from '../types';
 export type PModelSignatureProps = BaseProps & {
     /**
      * Adapts the color of the component.
@@ -25,10 +25,6 @@ export type PModelSignatureProps = BaseProps & {
      * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
     size?: ModelSignatureSize;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 };
 export declare const PModelSignature: 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"> & {
     /**
@@ -55,10 +51,6 @@ export declare const PModelSignature: import("react").ForwardRefExoticComponent<
      * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
     size?: ModelSignatureSize;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/model-signature.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 PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, ...rest }, ref) => {
+const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-model-signature');
-    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || useTheme()];
+    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'fetchPriority', 'lazy', 'model', 'safeZone', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'fetchPriority', 'lazy', 'model', 'safeZone', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectChangeEventDetail, MultiSelectToggleEventDetail, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectChangeEventDetail, MultiSelectToggleEventDetail, MultiSelectState } from '../types';
 export type PMultiSelectProps = BaseProps & {
     /**
      * Displays as compact version.
@@ -49,10 +49,6 @@ export type PMultiSelectProps = BaseProps & {
      * Emitted when the dropdown is toggled.
      */
     onToggle?: (event: CustomEvent<MultiSelectToggleEventDetail>) => void;
-    /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
-     */
-    onUpdate?: (event: CustomEvent<MultiSelectUpdateEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
@@ -61,10 +57,6 @@ export type PMultiSelectProps = BaseProps & {
      * The validation state.
      */
     state?: MultiSelectState;
-    /**
-     * Adapts the multi-select color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The selected values.
      */
@@ -119,10 +111,6 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
      * Emitted when the dropdown is toggled.
      */
     onToggle?: (event: CustomEvent<MultiSelectToggleEventDetail>) => void;
-    /**
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
-     */
-    onUpdate?: (event: CustomEvent<MultiSelectUpdateEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
@@ -131,10 +119,6 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
      * The validation state.
      */
     state?: MultiSelectState;
-    /**
-     * Adapts the multi-select color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The selected values.
      */

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

@@ -1,20 +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 PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', 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, 'toggle', onToggle);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,