@porsche-design-system/components-react 3.0.0-alpha.2 → 3.0.0-alpha.3

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -10,9 +10,13 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     heading?: string;
     /**
-     * Emitted when accordion state is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when accordion state is changed.
      */
     onAccordionChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
+    /**
+     * Emitted when accordion state is changed.
+     */
+    onChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
     /**
      * Defines if accordion is open.
      */
@@ -30,7 +34,7 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -40,9 +44,13 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     heading?: string;
     /**
-     * Emitted when accordion state is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when accordion state is changed.
      */
     onAccordionChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
+    /**
+     * Emitted when accordion state is changed.
+     */
+    onChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
     /**
      * Defines if accordion is open.
      */

package/lib/components/accordion.wrapper.js

@@ -5,9 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
+    hooks.useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = hooks.usePrefix('p-accordion');
     const propsToSync = [compact, heading, open, size, tag, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,6 +1,14 @@
 import { HTMLAttributes } from 'react';
 import type { BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Description of the banner.
+     */
+    description?: string;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string;
     /**
      * Emitted when the close button is clicked.
      */
@@ -22,7 +30,15 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Description of the banner.
+     */
+    description?: string;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string;
     /**
      * Emitted when the close button is clicked.
      */

package/lib/components/banner.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PBanner = react.forwardRef(({ onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [persistent, state, theme, width];
+    const propsToSync = [description, heading, persistent, state, theme, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/button-group.wrapper.d.ts

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttribute, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
+export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Display button in active state.
      */
@@ -8,11 +8,11 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -24,7 +24,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -36,7 +36,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -48,14 +48,14 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonType;
+    type?: ButtonPureType;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: TextWeight;
+    weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Display button in active state.
      */
@@ -63,11 +63,11 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -79,7 +79,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -91,7 +91,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -103,12 +103,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonType;
+    type?: ButtonPureType;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: TextWeight;
+    weight?: ButtonPureWeight;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
+export type PButtonProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -16,7 +16,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -38,7 +38,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
@@ -54,7 +54,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonIcon;
     /**
      * A URL path to a custom icon.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
-export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Alignment of heading and description
      */
@@ -10,7 +10,7 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     description?: string;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @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>;
     /**
@@ -22,9 +22,17 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     intl?: CarouselInternationalization;
     /**
-     * Emitted when carousel's content slides.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean>;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
@@ -47,7 +55,7 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrapContent?: boolean;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Alignment of heading and description
      */
@@ -57,7 +65,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     description?: string;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @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>;
     /**
@@ -69,9 +77,17 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     intl?: CarouselInternationalization;
     /**
-     * Emitted when carousel's content slides.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean>;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */

package/lib/components/carousel.wrapper.js

@@ -5,14 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = react.forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ alignHeader = 'left', description, disablePagination, heading, intl = {}, onCarouselChange, onChange, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    hooks.useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState, Theme } from '../types';
-export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
+export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -16,13 +16,13 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: CheckboxWrapperState;
     /**
      * Adapts the color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -38,7 +38,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: CheckboxWrapperState;
     /**
      * Adapts the color depending on the theme.
      */

package/lib/components/content-wrapper.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -17,7 +17,7 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     width?: ContentWrapperWidth;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

package/lib/components/display.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
-export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Text alignment of the component.
      */
@@ -26,7 +26,7 @@ export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Text alignment of the component.
      */

package/lib/components/divider.wrapper.d.ts

@@ -1,12 +1,16 @@
 import { HTMLAttributes } from 'react';
-import type { DividerColor, BreakpointCustomizable, DividerOrientation, Theme } from '../types';
-export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
+export type PDividerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines color depending on theme.
      */
     color?: DividerColor;
     /**
-     * Defines orientation.
+     * Defines direction.
+     */
+    direction?: BreakpointCustomizable<DividerDirection>;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
      */
     orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
@@ -14,13 +18,17 @@ export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines color depending on theme.
      */
     color?: DividerColor;
     /**
-     * Defines orientation.
+     * Defines direction.
+     */
+    direction?: BreakpointCustomizable<DividerDirection>;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
      */
     orientation?: BreakpointCustomizable<DividerOrientation>;
     /**

package/lib/components/divider.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PDivider = react.forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-divider');
-    const propsToSync = [color, orientation, theme];
+    const propsToSync = [color, direction, orientation, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { FieldsetWrapperLabelSize, FormState, Theme } from '../types';
-export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
+export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * The label text.
      */
@@ -20,13 +20,13 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: FieldsetWrapperState;
     /**
      * Adapts color depending on theme.
      */
     theme?: Theme;
 };
-export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * The label text.
      */
@@ -46,7 +46,7 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: FieldsetWrapperState;
     /**
      * Adapts color depending on theme.
      */

package/lib/components/flex-item.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
-export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
@@ -27,7 +27,7 @@ export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */

package/lib/components/flex.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
-export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFlexProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
@@ -27,7 +27,7 @@ export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */

package/lib/components/grid-item.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
-export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
@@ -11,7 +11,7 @@ export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     size?: BreakpointCustomizable<GridItemSize>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */

package/lib/components/grid.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
-export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PGridProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
@@ -16,7 +16,7 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
     wrap?: BreakpointCustomizable<GridWrap>;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */

package/lib/components/heading.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
-export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Text alignment of the component.
      */
@@ -26,7 +26,7 @@ export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Text alignment of the component.
      */

package/lib/components/headline.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
-export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Text alignment of the component.
      */
@@ -27,7 +27,7 @@ export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
     variant?: HeadlineVariant;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Text alignment of the component.
      */