@porsche-design-system/components-react 3.15.2 → 3.16.0-rc.1

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

@@ -19,6 +19,7 @@ const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = fa
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PTableBodyProps = Omit<HTMLAttributes<{}>, 'color'> & {};
-export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTableBodyProps = BaseProps & {};
+export declare const PTableBody: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-body.wrapper.mjs

@@ -12,6 +12,7 @@ const PTableBody = forwardRef(({ className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,11 +1,12 @@
-import { type HTMLAttributes } from 'react';
-export type PTableCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTableCellProps = BaseProps & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */
     multiline?: boolean;
 };
-export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTableCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */

package/esm/lib/components/table-cell.wrapper.mjs

@@ -15,6 +15,7 @@ const PTableCell = forwardRef(({ multiline = false, className, ...rest }, ref) =
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TableHeadCellSort } from '../types';
-export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTableHeadCellProps = BaseProps & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */
@@ -14,7 +15,7 @@ export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     sort?: TableHeadCellSort;
 };
-export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */

package/esm/lib/components/table-head-cell.wrapper.mjs

@@ -17,6 +17,7 @@ const PTableHeadCell = forwardRef(({ hideLabel = false, multiline = false, sort,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PTableHeadRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
-export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTableHeadRowProps = BaseProps & {};
+export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-head-row.wrapper.mjs

@@ -12,6 +12,7 @@ const PTableHeadRow = forwardRef(({ className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PTableHeadProps = Omit<HTMLAttributes<{}>, 'color'> & {};
-export declare const PTableHead: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTableHeadProps = BaseProps & {};
+export declare const PTableHead: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-head.wrapper.mjs

@@ -12,6 +12,7 @@ const PTableHead = forwardRef(({ className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PTableRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
-export declare const PTableRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTableRowProps = BaseProps & {};
+export declare const PTableRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-row.wrapper.mjs

@@ -12,6 +12,7 @@ const PTableRow = forwardRef(({ className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TableUpdateEventDetail, Theme } from '../types';
-export type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTableProps = BaseProps & {
     /**
      * 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 +19,7 @@ export type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTable: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * 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/esm/lib/components/table.wrapper.mjs

@@ -19,6 +19,7 @@ const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme, classNam
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
-export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTabsBarProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
@@ -34,7 +35,7 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: TabsBarWeight;
 };
-export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabsBar: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -19,6 +19,7 @@ const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base'
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,11 +1,12 @@
-import { type HTMLAttributes } from 'react';
-export type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTabsItemProps = BaseProps & {
     /**
      * Defines the label used in tabs.
      */
     label: string;
 };
-export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabsItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the label used in tabs.
      */

package/esm/lib/components/tabs-item.wrapper.mjs

@@ -15,6 +15,7 @@ const PTabsItem = forwardRef(({ label, className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TabsGradientColor, TabsGradientColorScheme, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
-export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTabsProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
@@ -34,7 +35,7 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: TabsWeight;
 };
-export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabs: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */

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

@@ -19,6 +19,7 @@ const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
-export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTagDismissibleProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -18,7 +19,7 @@ export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/tag-dismissible.wrapper.mjs

@@ -17,6 +17,7 @@ const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TagColor, TagIcon, Theme } from '../types';
-export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTagProps = BaseProps & {
     /**
      * Background color variations depending on theme property.
      */
@@ -18,7 +19,7 @@ export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTag: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Background color variations depending on theme property.
      */

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

@@ -17,6 +17,7 @@ const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TextFieldWrapperActionIcon, BreakpointCustomizable, TextFieldWrapperState, Theme, TextFieldWrapperUnitPosition } from '../types';
-export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTextFieldWrapperProps = BaseProps & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */
@@ -62,7 +63,7 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */

package/esm/lib/components/text-field-wrapper.wrapper.mjs

@@ -18,6 +18,7 @@ const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, descr
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PTextListItemProps = Omit<HTMLAttributes<{}>, 'color'> & {};
-export declare const PTextListItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PTextListItemProps = BaseProps & {};
+export declare const PTextListItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/text-list-item.wrapper.mjs

@@ -12,6 +12,7 @@ const PTextListItem = forwardRef(({ className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TextListListType, TextListOrderType, Theme, TextListType } from '../types';
-export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTextListProps = BaseProps & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */
@@ -18,7 +19,7 @@ export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     type?: TextListType;
 };
-export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextList: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */

package/esm/lib/components/text-list.wrapper.mjs

@@ -17,6 +17,7 @@ const PTextList = forwardRef(({ listType, orderType, theme, type = 'unordered',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
-export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTextProps = BaseProps & {
     /**
      * Text alignment of the component.
      */
@@ -30,7 +31,7 @@ export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

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

@@ -17,6 +17,7 @@ const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
-export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTextareaWrapperProps = BaseProps & {
     /**
      * The description text.
      */
@@ -34,7 +35,7 @@ export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/textarea-wrapper.wrapper.mjs

@@ -17,6 +17,7 @@ const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, labe
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,12 +1,13 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { Theme } from '../types';
-export type PToastProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PToastProps = BaseProps & {
     /**
      * Adapts the toast color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PToast: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Adapts the toast color depending on the theme.
      */

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

@@ -16,6 +16,7 @@ const PToast = forwardRef(({ theme, className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
-export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PWordmarkProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -22,11 +23,11 @@ export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PWordmark: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */

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

@@ -17,6 +17,7 @@ const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', th
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/esm/lib/types.d.ts

@@ -451,7 +451,7 @@ export type BreakpointValues<T> = {
 } & {
     base: T;
 };
-export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
+export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
 declare const LINK_TARGETS: readonly [
     "_self",
     "_blank",
@@ -616,7 +616,7 @@ export type PorscheDesignSystem = {
         prefixes: string[];
     };
 };
-export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T> | string;
+export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
 declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
@@ -676,6 +676,13 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
+declare const CANVAS_SIDEBAR_WIDTHS: readonly [
+    "medium",
+    "large"
+];
+export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
+export type CanvasSidebarStartWidth = CanvasSidebarWidth;
+export type CanvasSidebarEndWidth = CanvasSidebarWidth;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
@@ -692,7 +699,7 @@ declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
-export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | string;
+export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 /** @deprecated */
 export type CarouselUpdateEvent = {
     activeIndex: number;
@@ -1143,7 +1150,7 @@ export type PaginationUpdateEvent = {
     previousPage: number;
 };
 export type PaginationUpdateEventDetail = PaginationUpdateEvent;
-export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>> | string;
+export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
 declare const PIN_CODE_TYPES: readonly [
     "number",
     "password"
@@ -1190,6 +1197,10 @@ export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
+declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
 export type SelectState = FormState;
 export type SelectDropdownDirection = SelectComponentsDropdownDirection;
 export type SelectUpdateEventDetail = {

package/esm/public-api.mjs

@@ -5,6 +5,7 @@ export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
+export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.15.2",
+  "version": "3.16.0-rc.1",
   "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.15.2"
+    "@porsche-design-system/components-js": "3.16.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",