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

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

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

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

@@ -17,6 +17,7 @@ const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
-export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFieldsetWrapperProps = BaseProps & {
     /**
      * The label text.
      */
@@ -27,7 +28,7 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */

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

@@ -18,6 +18,7 @@ const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

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

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

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

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

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

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

@@ -18,6 +18,7 @@ const PFlexItem = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

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

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

@@ -18,6 +18,7 @@ const PFlex = forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', di
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PFlyoutMultilevelItemProps = BaseProps & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     */
+    identifier: string;
+    /**
+     * Label of the item.
+     */
+    label?: string;
+};
+export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
+     */
+    identifier: string;
+    /**
+     * Label of the item.
+     */
+    label?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/{flyout-navigation-item.wrapper.mjs → flyout-multilevel-item.wrapper.mjs}

@@ -4,9 +4,9 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutNavigationItem = forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = forwardRef(({ identifier, label, className, ...rest }, ref) => {
     const elementRef = useRef();
-    const WebComponentTag = usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -17,7 +17,8 @@ const PFlyoutNavigationItem = forwardRef(({ identifier, label, className, ...res
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutNavigationItem };
+export { PFlyoutMultilevelItem };

package/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
+export type PFlyoutMultilevelProps = BaseProps & {
+    /**
+     * Defines which flyout-multilevel-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
+    /**
+     * If true, the flyout-multilevel is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the flyout-multilevel color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PFlyoutMultilevel: 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 flyout-multilevel-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: ((event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void) | undefined;
+    /**
+     * If true, the flyout-multilevel is visualized as opened.
+     */
+    open?: boolean | undefined;
+    /**
+     * Adapts the flyout-multilevel color depending on the theme.
+     */
+    theme?: "light" | "dark" | "auto" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/{flyout-navigation.wrapper.mjs → flyout-multilevel.wrapper.mjs}

@@ -4,11 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutNavigation = forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PFlyoutMultilevel = forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = usePrefix('p-flyout-navigation');
+    const WebComponentTag = usePrefix('p-flyout-multilevel');
     const propsToSync = [activeIdentifier, aria, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -19,7 +19,8 @@ const PFlyoutNavigation = forwardRef(({ activeIdentifier, aria, onDismiss, onUpd
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutNavigation };
+export { PFlyoutMultilevel };

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
-export type PFlyoutProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -26,7 +27,7 @@ export type PFlyoutProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PFlyout: 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/flyout.wrapper.mjs

@@ -18,6 +18,7 @@ const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, ope
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

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

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

@@ -18,6 +18,7 @@ const PGridItem = forwardRef(({ offset = 0, size = 1, className, ...rest }, ref)
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

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

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

@@ -18,6 +18,7 @@ const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
-export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PIconProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -31,7 +32,7 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PIcon: 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/icon.wrapper.mjs

@@ -17,6 +17,7 @@ const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/esm/lib/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './button.wrapper';
 export * from './button-group.wrapper';
 export * from './button-pure.wrapper';
 export * from './button-tile.wrapper';
+export * from './canvas.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
@@ -15,8 +16,8 @@ export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
-export * from './flyout-navigation.wrapper';
-export * from './flyout-navigation-item.wrapper';
+export * from './flyout-multilevel.wrapper';
+export * from './flyout-multilevel-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, Theme } from '../types';
-export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PInlineNotificationProps = BaseProps & {
     /**
      * Action icon of the inline-notification.
      */
@@ -50,7 +51,7 @@ export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PInlineNotification: 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 of the inline-notification.
      */

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -19,6 +19,7 @@ const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabe
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
-export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkPureProps = BaseProps & {
     /**
      * Display link in active state.
      */
@@ -63,7 +64,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: LinkPureWeight;
 };
-export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display link in active state.
      */
@@ -75,7 +76,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

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

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

package/esm/lib/components/link-social.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
-export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkSocialProps = BaseProps & {
     /**
      * Show or hide label.
      */
@@ -31,7 +32,7 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkSocial: 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.
      */

package/esm/lib/components/link-social.wrapper.mjs

@@ -18,6 +18,7 @@ const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/esm/lib/components/link-tile-model-signature.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkTileModelSignatureAspectRatio, LinkTileModelSignatureHeadingTag, LinkTileModelSignatureLinkDirection, LinkTileModelSignatureModel, LinkTileModelSignatureWeight } from '../types';
-export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkTileModelSignatureProps = BaseProps & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */
@@ -30,7 +31,7 @@ export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
 };
-export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */

package/esm/lib/components/link-tile-model-signature.wrapper.mjs

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

package/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, Theme } from '../types';
-export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkTileProductProps = BaseProps & {
     /**
      * Aspect ratio of the link-tile-product.
      */
@@ -50,7 +51,7 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-product.
      */