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

package/{styles → emotion}/package.json

@@ -8,11 +8,6 @@
       "types": "./esm/index.d.ts",
       "import": "./esm/index.mjs",
       "default": "./cjs/index.cjs"
-    },
-    "./vanilla-extract": {
-      "types": "./vanilla-extract/esm/vanilla-extract/index.d.ts",
-      "import": "./vanilla-extract/esm/vanilla-extract/index.mjs",
-      "default": "./vanilla-extract/cjs/vanilla-extract/index.cjs"
     }
   }
 }

package/esm/hooks.d.ts

@@ -1,13 +1,12 @@
 import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
-import type { Theme, ToastMessage } from './lib/types';
+import type { ToastMessage } from './lib/types';
 /**
  * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
  * when `process.env.NODE_ENV === 'test'`
  */
 export declare const skipCheckForPorscheDesignSystemProviderDuringTests: () => void;
 export declare const usePrefix: (tagName: string) => string;
-export declare const useTheme: () => Theme;
 export declare const useEventCallback: (ref: MutableRefObject<HTMLElement | undefined>, eventName: string, eventHandler: (e: Event) => void) => void;
 export declare const useMergedClass: (ref: MutableRefObject<HTMLElement | undefined>, className?: string) => string | undefined;
 export declare const useBrowserLayoutEffect: typeof useEffect;

package/esm/hooks.mjs

@@ -23,14 +23,6 @@ const usePrefix = (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
-const useTheme = () => {
-    if (process.env.NODE_ENV === 'test' && skipCheck) {
-        return 'light';
-    }
-    else {
-        return useContext(PorscheDesignSystemContext).theme; // eslint-disable-line react-hooks/rules-of-hooks
-    }
-};
 const useEventCallback = (ref, eventName, eventHandler) => {
     // @ts-expect-error
     useEffect(() => {
@@ -72,4 +64,4 @@ const internalHooks = {
     usePrefix,
 };
 
-export { internalHooks, skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useTheme, useToastManager };
+export { internalHooks, skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useToastManager };

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -13,10 +13,6 @@ export type PAccordionProps = BaseProps & {
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: AccordionHeadingTag;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
-     */
-    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
@@ -33,14 +29,6 @@ export type PAccordionProps = BaseProps & {
      * @experimental Sticks the Accordion heading at the top, fixed while scrolling
      */
     sticky?: boolean;
-    /**
-     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
-     */
-    tag?: AccordionTag;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 };
 export declare const PAccordion: 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 +43,6 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: AccordionHeadingTag;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
-     */
-    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
@@ -75,14 +59,6 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * @experimental Sticks the Accordion heading at the top, fixed while scrolling
      */
     sticky?: boolean;
-    /**
-     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
-     */
-    tag?: AccordionTag;
-    /**
-     * Adapts the color when used on dark background.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/accordion.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 PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, headingTag, open, size, sticky, tag, theme || useTheme()];
+    const propsToSync = [compact, heading, headingTag, open, size, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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,23 +25,10 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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,11 +61,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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.
      */
@@ -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.
      */
@@ -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,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarStartUpdateEventDetail, Theme } from '../types';
+import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../types';
 export type PCanvasProps = BaseProps & {
+    /**
+     * Defines the background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */
@@ -17,12 +21,12 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Defines the background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */
@@ -39,10 +43,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(({ background = 'canvas', 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 = [background, sidebarEndOpen, sidebarStartOpen];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['background', '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,11 +69,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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,