@porsche-design-system/components-react 3.16.0-rc.0 → 3.16.0-rc.2

package/cjs/lib/components/table-row.wrapper.cjs

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

package/cjs/lib/components/table.wrapper.cjs

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

package/cjs/lib/components/tabs-bar.wrapper.cjs

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

package/cjs/lib/components/tabs-item.wrapper.cjs

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

package/cjs/lib/components/tabs.wrapper.cjs

@@ -21,6 +21,7 @@ const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'backgroun
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/tag-dismissible.wrapper.cjs

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

package/cjs/lib/components/tag.wrapper.cjs

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

package/cjs/lib/components/text-field-wrapper.wrapper.cjs

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

package/cjs/lib/components/text-list-item.wrapper.cjs

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

package/cjs/lib/components/text-list.wrapper.cjs

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

package/cjs/lib/components/text.wrapper.cjs

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

package/cjs/lib/components/textarea-wrapper.wrapper.cjs

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

package/cjs/lib/components/toast.wrapper.cjs

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

package/cjs/lib/components/wordmark.wrapper.cjs

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

package/cjs/public-api.cjs

@@ -7,6 +7,7 @@ var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
+var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
 var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
 var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
@@ -18,8 +19,8 @@ var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper
 var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var flyoutNavigation_wrapper = require('./lib/components/flyout-navigation.wrapper.cjs');
-var flyoutNavigationItem_wrapper = require('./lib/components/flyout-navigation-item.wrapper.cjs');
+var flyoutMultilevel_wrapper = require('./lib/components/flyout-multilevel.wrapper.cjs');
+var flyoutMultilevelItem_wrapper = require('./lib/components/flyout-multilevel-item.wrapper.cjs');
 var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
@@ -86,6 +87,7 @@ exports.PButton = button_wrapper.PButton;
 exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
+exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
@@ -97,8 +99,8 @@ exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PFlyoutNavigation = flyoutNavigation_wrapper.PFlyoutNavigation;
-exports.PFlyoutNavigationItem = flyoutNavigationItem_wrapper.PFlyoutNavigationItem;
+exports.PFlyoutMultilevel = flyoutMultilevel_wrapper.PFlyoutMultilevel;
+exports.PFlyoutMultilevelItem = flyoutMultilevelItem_wrapper.PFlyoutMultilevelItem;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;

package/esm/BaseProps.d.ts

@@ -0,0 +1,2 @@
+import type { DOMAttributes, HTMLAttributes } from 'react';
+export type BaseProps = DOMAttributes<{}> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PAccordionProps = BaseProps & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -42,7 +43,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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */

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

@@ -19,6 +19,7 @@ const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordio
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PBannerProps = BaseProps & {
     /**
      * Description of the banner.
      */
@@ -43,7 +44,7 @@ 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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Description of the banner.
      */

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

@@ -18,6 +18,7 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,12 +1,13 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonGroupProps = BaseProps & {
     /**
      * 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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * 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/esm/lib/components/button-group.wrapper.mjs

@@ -15,6 +15,7 @@ const PButtonGroup = forwardRef(({ direction = { base: 'column', xs: 'row' }, cl
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonPureProps = BaseProps & {
     /**
      * Display button in active state.
      */
@@ -67,7 +68,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display button in active state.
      */
@@ -79,7 +80,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/button-pure.wrapper.mjs

@@ -17,6 +17,7 @@ const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disa
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
-export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
      */
@@ -62,7 +63,7 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      */
@@ -70,7 +71,7 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
     /**
      * Aspect ratio of the button-tile.
      */

package/esm/lib/components/button-tile.wrapper.mjs

@@ -17,6 +17,7 @@ const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', b
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -46,11 +47,11 @@ 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<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-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

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

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

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+export type PCanvasProps = BaseProps & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: CanvasSidebarEndWidth;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: CanvasSidebarStartWidth;
+};
+export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Emitted when the component requests to close the sidebar on the end side.
+     */
+    onDismissSidebarEnd?: ((event: CustomEvent<void>) => void) | undefined;
+    /**
+     * Emitted when the component requests to close the sidebar on the start side.
+     */
+    onDismissSidebarStart?: ((event: CustomEvent<void>) => void) | undefined;
+    /**
+     * Open Sidebar on the end side
+     */
+    sidebarEndOpen?: boolean | undefined;
+    /**
+     * Defines the width of the sidebar on the end side
+     */
+    sidebarEndWidth?: "medium" | "large" | undefined;
+    /**
+     * Open Sidebar on the start side
+     */
+    sidebarStartOpen?: boolean | undefined;
+    /**
+     * Defines the width of the sidebar on the start side
+     */
+    sidebarStartWidth?: "medium" | "large" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
+    useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
+    const WebComponentTag = usePrefix('p-canvas');
+    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCanvas };

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
-export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
@@ -71,7 +72,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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */

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

@@ -19,6 +19,7 @@ const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', ari
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
-export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCheckboxWrapperProps = BaseProps & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -26,7 +27,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PContentWrapperProps = BaseProps & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -17,7 +18,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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -18,6 +18,7 @@ const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, wi
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
-export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PCrestProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -14,11 +15,11 @@ export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PCrest: 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/crest.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
-export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PDisplayProps = BaseProps & {
     /**
      * Text alignment of the component.
      */
@@ -26,7 +27,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<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/display.wrapper.mjs

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