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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, RadioButtonWrapperState, Theme } from '../types';
-export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -22,7 +22,7 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onCha
      */
     theme?: Theme;
 };
-export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
-export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Sets the vertical position of scroll indicator.
      */
@@ -34,7 +34,7 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Sets the vertical position of scroll indicator.
      */

package/lib/components/segmented-control-item.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SegmentedControlItemIcon } from '../types';
-export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -22,7 +22,7 @@ export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onC
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/lib/components/segmented-control.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SegmentedControlBackgroundColor, SegmentedControlUpdateEvent, Theme } from '../types';
-export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
@@ -22,7 +22,7 @@ export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color' | 'onChang
      */
     value?: string | number;
 };
-export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectWrapperDropdownDirection, BreakpointCustomizable, SelectWrapperState, Theme } from '../types';
-export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The description text.
      */
@@ -38,7 +38,7 @@ export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'>
      */
     theme?: Theme;
 };
-export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The description text.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
-export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
@@ -14,7 +14,7 @@ export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Add ARIA attributes.
      */

package/lib/components/stepper-horizontal-item.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { StepperHorizontalItemState } from '../types';
-export type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */
@@ -10,7 +10,7 @@ export type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color' | 'on
      */
     state?: StepperHorizontalItemState;
 };
-export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */

package/lib/components/stepper-horizontal.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { StepperHorizontalUpdateEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
-export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */
@@ -18,7 +18,7 @@ export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChan
      */
     theme?: Theme;
 };
-export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEvent, Theme } from '../types';
-export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
@@ -38,7 +38,7 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Aligns the label.
      */

package/lib/components/table-body.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type PTableBodyProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {};
-export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export type PTableBodyProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table-cell.wrapper.d.ts

@@ -1,11 +1,11 @@
 import { HTMLAttributes } from 'react';
-export type PTableCellProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTableCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */
     multiline?: boolean;
 };
-export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */

package/lib/components/table-head-cell.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TableHeadCellSort } from '../types';
-export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */
@@ -14,7 +14,7 @@ export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'>
      */
     sort?: TableHeadCellSort;
 };
-export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */

package/lib/components/table-head-row.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type PTableHeadRowProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {};
-export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export type PTableHeadRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table-head.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type PTableHeadProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {};
-export declare const PTableHead: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export type PTableHeadProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableHead: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table-row.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type PTableRowProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {};
-export declare const PTableRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export type PTableRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TableUpdateEvent, Theme } from '../types';
-export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
@@ -18,7 +18,7 @@ export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
-export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
@@ -34,7 +34,7 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     weight?: TabsBarWeight;
 };
-export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */

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

@@ -1,11 +1,11 @@
 import { HTMLAttributes } from 'react';
-export type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the label used in tabs.
      */
     label: string;
 };
-export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the label used in tabs.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TabsGradientColor, TabsGradientColorScheme, TabsUpdateEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
-export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
@@ -34,7 +34,7 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     weight?: TabsWeight;
 };
-export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
-export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
@@ -18,7 +18,7 @@ export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'
      */
     theme?: Theme;
 };
-export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TagColor, TagIcon, Theme } from '../types';
-export type PTagProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Background color variations depending on theme property.
      */
@@ -18,7 +18,7 @@ export type PTagProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Background color variations depending on theme property.
      */

package/lib/components/text-field-wrapper.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TextFieldWrapperActionIcon, BreakpointCustomizable, TextFieldWrapperState, Theme, TextFieldWrapperUnitPosition } from '../types';
-export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */
@@ -54,7 +54,7 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChang
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type PTextListItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {};
-export declare const PTextListItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export type PTextListItemProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTextListItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TextListListType, TextListOrderType, Theme, TextListType } from '../types';
-export type PTextListProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */
@@ -18,7 +18,7 @@ export type PTextListProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     type?: TextListType;
 };
-export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
-export type PTextProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Text alignment of the component.
      */
@@ -30,7 +30,7 @@ export type PTextProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Text alignment of the component.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
-export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The description text.
      */
@@ -34,7 +34,7 @@ export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
      */
     theme?: Theme;
 };
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The description text.
      */

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

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import type { Theme } from '../types';
-export type PToastProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PToastProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the toast color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Adapts the toast color depending on the theme.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
-export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
@@ -22,7 +22,7 @@ export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Add ARIA attributes.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.3",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-rc.2"
+    "@porsche-design-system/components-js": "3.0.0-rc.3"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -50,11 +50,11 @@ const borderWidthBase = '2px';
 const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
 
 const dropShadowLowStyle = {
-    filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 3px 8px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const dropShadowHighStyle = {
-    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const themeLightStateFocus = '#1A44EA';
@@ -3924,7 +3924,7 @@ const getComponentCss$Y = (size, compact, open, theme) => {
             })), hostHiddenStyles)),
             button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeightSemiBold }), buildResponsiveStyles(size, (s) => ({
                 fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '12px'} 0`,
+                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
             }))), mergeDeep({
                 '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
                     ? {
@@ -3950,11 +3950,16 @@ const getComponentCss$Y = (size, compact, open, theme) => {
         },
         heading: {
             margin: 0,
-            padding: '0 0 2px',
+        },
+        'icon-container': {
+            height: fontLineHeight,
+            display: 'flex',
+            alignItems: 'center',
         },
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
+            fontSize: fontSizeTextXXSmall,
             transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
         },
@@ -3993,24 +3998,25 @@ const ANIMATION_DURATION$1 = 600;
 const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
+const topBottomFallback = '56px';
 const getComponentCss$X = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), (isOpen
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed', bottom: `var(${cssVariableBottom},${topBottomFallback})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), { borderRadius: borderRadiusSmall }), (isOpen
                 ? {
                     opacity: 1,
                     visibility: 'inherit',
                     transform: 'translate3d(0,0,0)',
-                    transition: `opacity ${duration$1} ${easeInQuad$1}, transform ${duration$1} ${easeInQuad$1}`,
+                    transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
                 }
                 : {
                     opacity: 0,
                     visibility: 'hidden',
-                    transform: `translate3d(0,calc(var(${cssVariableBottom}) + 100%),0)`,
+                    transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
                     '&(.hydrated),&(.ssr)': {
-                        transition: `visibility 0s linear ${duration$1}, opacity ${duration$1} ${easeOutQuad$1}, transform ${duration$1} ${easeOutQuad$1}`,
+                        transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
                     },
-                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop})),0)` })), [getMediaQueryMin('xxl')]: {
+                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop},${topBottomFallback})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` })), [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
                 } }), hostHiddenStyles)),
@@ -4906,7 +4912,7 @@ const getComponentCss$E = (color, size, theme) => {
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
+        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0, pointerEvents: 'none' }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
                 getSchemedHighContrastMediaQuery({
                     filter: filter.light[color],
                 }, {
@@ -6491,7 +6497,13 @@ const getComponentCss$1 = () => {
 const getComponentCss = (size, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (size !== 'inherit' && {
+                height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)',
+                // workaround for Safari to optimize image rendering
+                '@supports (height: round(down, 1px, 1px))': {
+                    height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
+                },
+            })), hostHiddenStyles))),
             'a, svg': {
                 display: 'block',
                 maxWidth: '100%',

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js

@@ -74,7 +74,7 @@ class DSRAccordion extends react.Component {
         const contentId = 'accordion-panel';
         const Heading = this.props.tag;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "inherit", "aria-hidden": "true" })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.js

@@ -25,8 +25,8 @@ class DSRSelectWrapperDropdown extends react.Component {
         const buttonId = 'value';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction === 'auto' ? 'down' : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
-                            jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: ((_a = utilsEntry.getSelectedOptionMap(this.optionMaps)) === null || _a === void 0 ? void 0 : _a.value) || null, autoComplete: "off", value: this.searchString, ...utilsEntry.getFilterInputAriaAttributes(this.isOpen, this.props.required, labelId, descriptionId, dropdownId, utilsEntry.getHighlightedOptionMapIndex(this.optionMaps)) }),
-                            jsxRuntime.jsx("span", {}),
+                            jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: ((_a = utilsEntry.getSelectedOptionMap(this.optionMaps)) === null || _a === void 0 ? void 0 : _a.value) || null, autoComplete: "off", defaultValue: this.searchString, ...utilsEntry.getFilterInputAriaAttributes(this.isOpen, this.props.required, labelId, descriptionId, dropdownId, utilsEntry.getHighlightedOptionMapIndex(this.optionMaps)) }, "input"),
+                            jsxRuntime.jsx("span", {}, "span"),
                         ]) : (jsxRuntime.jsx("button", { type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled, ...utilsEntry.getSelectWrapperDropdownButtonAriaAttributes(this.isOpen, labelId, descriptionId, dropdownId, utilsEntry.getHighlightedOptionMapIndex(this.optionMaps)) })) })] }) }));
     }
 }

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/wordmark.js

@@ -10,7 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 class DSRWordmark extends react.Component {
     render() {
         // optimized with SVGO, see docs in assets folder
-        const svg = (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4383 300", children: [jsxRuntime.jsx("title", { children: "Porsche" }), jsxRuntime.jsx("path", { d: "M492 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h424zm6-143v65c0 7.8-4.2 12-12 12H68V66h418c7.8 0 12 4.2 12 12zm220 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h407c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H718zm401-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H724c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h395zm657-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-351v79h-68V0h492c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-418v89h418zm155-81c0-48.1 25.9-74 74-74h482v56h-476c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h412c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-482v-56h476c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-412c-48.1 0-74-25.9-74-74V74zm643 0c0-48.1 25.9-74 74-74h470v66h-464c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h464v66h-470c-48.1 0-74-25.9-74-74V74zM3718 0v300h-68V183h-397v117h-68V0h68v117h397V0h68zm148 56v66h517v56h-517v66h517v56h-585V0h585v56h-517z" })] }));
+        const svg = (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4500 300", children: [jsxRuntime.jsx("title", { children: "Porsche" }), jsxRuntime.jsx("path", { d: "M502 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h434zm6-143v65c0 7.8-4.2 12-12 12H68V66h428c7.8 0 12 4.2 12 12zm228 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h417c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H736zm411-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H742c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h405zm675-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-361v79h-68V0h502c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-428v89h428zm162-81c0-48.1 25.9-74 74-74h492v56h-486c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h422c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-492v-56h486c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-422c-48.1 0-74-25.9-74-74V74zm661 0c0-48.1 25.9-74 74-74h480v66h-474c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h474v66h-480c-48.1 0-74-25.9-74-74V74zM3817 0v300h-68V183h-407v117h-68V0h68v117h407V0h68zm156 56v66h527v56h-527v66h527v56h-595V0h595v56h-527z" })] }));
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getWordmarkCss(this.props.size, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.href === undefined ? (svg) : (jsxRuntime.jsx("a", { href: this.props.href, target: this.props.target, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: svg })) })] }) }));
     }