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

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
+import type { BannerHeadingTag, BannerState } from '../types';
 export type PBannerProps = BaseProps & {
     /**
      * Description of the banner.
@@ -25,25 +25,12 @@ export type PBannerProps = BaseProps & {
      * If true, the banner is open.
      */
     open: boolean;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
-     */
-    persistent?: boolean;
     /**
      * State of the banner.
      */
     state?: BannerState;
-    /**
-     * Adapts the banner color depending on the theme.
-     */
-    theme?: Theme;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    width?: BannerWidth;
 };
-export declare const PBanner: 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 PBanner: 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"> & {
     /**
      * Description of the banner.
      */
@@ -68,23 +55,10 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<imp
      * If true, the banner is open.
      */
     open: boolean;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
-     */
-    persistent?: boolean;
     /**
      * State of the banner.
      */
     state?: BannerState;
-    /**
-     * Adapts the banner color depending on the theme.
-     */
-    theme?: Theme;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    width?: BannerWidth;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/banner.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 PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || useTheme(), width];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 export type PButtonPureProps = BaseProps & {
     /**
      * Display button in active state.
@@ -49,10 +49,6 @@ export type PButtonPureProps = BaseProps & {
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
@@ -65,13 +61,8 @@ export type PButtonPureProps = BaseProps & {
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
     value?: string;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: 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 PButtonPure: 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"> & {
     /**
      * Display button in active state.
      */
@@ -120,10 +111,6 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
@@ -136,11 +123,6 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
     value?: string;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    weight?: ButtonPureWeight;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
@@ -13,10 +13,6 @@ export type PButtonTileProps = BaseProps & {
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
-    /**
-     * Adapts the description and button theme when used on light background image.
-     */
-    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */
@@ -62,7 +58,7 @@ export type PButtonTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: 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 PButtonTile: 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"> & {
     /**
      * Alignment of button and description.
      */
@@ -75,10 +71,6 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
      * Aspect ratio of the button-tile.
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
-    /**
-     * Adapts the description and button theme when used on light background image.
-     */
-    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

package/esm/lib/components/button-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 PButtonTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', compact = false, description, disabled = false, gradient = false, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
+import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -37,10 +37,6 @@ export type PButtonProps = BaseProps & {
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      */
     name?: string;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
@@ -54,7 +50,7 @@ export type PButtonProps = BaseProps & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: 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 PButton: 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.
      */
@@ -91,10 +87,6 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      */
     name?: string;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Specifies the type of the button.
      */

package/esm/lib/components/button.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 PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarStartUpdateEventDetail, Theme } from '../types';
+import type { CanvasSidebarStartUpdateEventDetail } from '../types';
 export type PCanvasProps = BaseProps & {
     /**
      * Emitted when the sidebar end requests to be dismissed.
@@ -17,12 +17,8 @@ export type PCanvasProps = BaseProps & {
      * Open the sidebar on the start side
      */
     sidebarStartOpen?: boolean;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PCanvas: 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 PCanvas: 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 the sidebar end requests to be dismissed.
      */
@@ -39,10 +35,6 @@ export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<imp
      * Open the sidebar on the start side
      */
     sidebarStartOpen?: boolean;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/canvas.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 PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarStartOpen, theme || useTheme()];
+    const propsToSync = [sidebarEndOpen, sidebarStartOpen];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, CarouselSlidesPerPage, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, BreakpointCustomizable, CarouselSlidesPerPage, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -21,18 +21,14 @@ export type PCarouselProps = BaseProps & {
      * Defines the description used in the carousel.
      */
     description?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
-     */
-    disablePagination?: BreakpointCustomizable<boolean>;
     /**
      * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
      */
     focusOnCenterSlide?: boolean;
     /**
-     * Adapts the background gradient for the left and right edge.
+     * Fades the slides out.
      */
-    gradientColor?: CarouselGradientColor;
+    gradient?: boolean;
     /**
      * Defines the heading used in the carousel.
      */
@@ -45,10 +41,6 @@ export type PCarouselProps = BaseProps & {
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: CarouselInternationalization;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
-     */
-    onCarouselChange?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * Emitted when carousel's content slides.
      */
@@ -69,10 +61,6 @@ export type PCarouselProps = BaseProps & {
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
      */
@@ -81,13 +69,8 @@ export type PCarouselProps = BaseProps & {
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */
     width?: CarouselWidth;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    wrapContent?: boolean;
 };
-export declare const PCarousel: 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 PCarousel: 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"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
@@ -108,18 +91,14 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
      * Defines the description used in the carousel.
      */
     description?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
-     */
-    disablePagination?: BreakpointCustomizable<boolean>;
     /**
      * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
      */
     focusOnCenterSlide?: boolean;
     /**
-     * Adapts the background gradient for the left and right edge.
+     * Fades the slides out.
      */
-    gradientColor?: CarouselGradientColor;
+    gradient?: boolean;
     /**
      * Defines the heading used in the carousel.
      */
@@ -132,10 +111,6 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: CarouselInternationalization;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
-     */
-    onCarouselChange?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * Emitted when carousel's content slides.
      */
@@ -156,10 +131,6 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
      */
@@ -168,11 +139,6 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */
     width?: CarouselWidth;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    wrapContent?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/carousel.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 PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, focusOnCenterSlide = false, gradient = false, heading, headingSize = 'x-large', intl, onUpdate, pagination = false, rewind = false, skipLinkTarget, slidesPerPage = 1, trimSpace = false, width = 'basic', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, focusOnCenterSlide, gradient, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, trimSpace, width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'focusOnCenterSlide', 'gradient', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'trimSpace', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
+import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState } from '../types';
 export type PCheckboxProps = BaseProps & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
@@ -49,11 +49,6 @@ export type PCheckboxProps = BaseProps & {
      * Emitted when checkbox checked property is changed.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
-    /**
-     * Emitted when checkbox checked property is changed.
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
-     */
-    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
     /**
      * Marks the checkbox as required.
      */
@@ -62,16 +57,12 @@ export type PCheckboxProps = BaseProps & {
      * The validation state.
      */
     state?: CheckboxState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
      */
     value?: string;
 };
-export declare const PCheckbox: 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 PCheckbox: 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"> & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      */
@@ -120,11 +111,6 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
      * Emitted when checkbox checked property is changed.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
-    /**
-     * Emitted when checkbox checked property is changed.
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
-     */
-    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
     /**
      * Marks the checkbox as required.
      */
@@ -133,10 +119,6 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
      * The validation state.
      */
     state?: CheckboxState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
      */

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

@@ -1,19 +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 PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, required = false, state = 'none', value = 'on', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-checkbox');
-    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -14,7 +14,7 @@ export type PCrestProps = BaseProps & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: 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 PCrest: 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/display.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
+import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag } from '../types';
 export type PDisplayProps = BaseProps & {
     /**
      * Text alignment of the component.
@@ -21,12 +21,8 @@ export type PDisplayProps = BaseProps & {
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 };
-export declare const PDisplay: 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 PDisplay: 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"> & {
     /**
      * Text alignment of the component.
      */
@@ -47,10 +43,6 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<im
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;