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

package/esm/lib/components/link-tile-product.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
-export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkTileProps = BaseProps & {
     /**
      * Alignment of link and description.
      */
@@ -58,7 +59,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: BreakpointCustomizable<LinkTileWeight>;
 };
-export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkTile: 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 link and description.
      */
@@ -66,7 +67,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
     /**
      * Aspect ratio of the link-tile.
      */

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
-export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PLinkProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -42,11 +43,11 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: LinkVariant;
 };
-export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLink: 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;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget, MarqueVariant } from '../types';
-export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PMarqueProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -27,11 +28,11 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
     variant?: MarqueVariant;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PMarque: 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/marque.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, Theme } from '../types';
-export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PModalProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -47,7 +48,7 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PModal: 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/modal.wrapper.mjs

@@ -19,6 +19,7 @@ const PModal = forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = fal
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
-export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PModelSignatureProps = BaseProps & {
     /**
      * Adapts the color of the component.
      */
@@ -30,7 +31,7 @@ export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PModelSignature: 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 color of the component.
      */

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

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

package/esm/lib/components/multi-select-option.wrapper.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PMultiSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PMultiSelectOptionProps = BaseProps & {
     /**
      * Disables the option.
      */
@@ -9,7 +10,7 @@ export type PMultiSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value: string;
 };
-export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

package/esm/lib/components/multi-select-option.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
-export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PMultiSelectProps = BaseProps & {
     /**
      * The description text.
      */
@@ -50,7 +51,7 @@ export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value?: string[];
 };
-export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PMultiSelect: 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/multi-select.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEventDetail, Theme } from '../types';
-export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PPaginationProps = BaseProps & {
     /**
      * Index of the currently active page.
      */
@@ -55,7 +56,7 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     totalItemsCount: number;
 };
-export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PPagination: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Index of the currently active page.
      */

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

@@ -19,6 +19,7 @@ const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, ally
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEventDetail, PinCodeState, Theme, PinCodeType } from '../types';
-export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PPinCodeProps = BaseProps & {
     /**
      * The description text.
      */
@@ -58,7 +59,7 @@ export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value?: string;
 };
-export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PPinCode: 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/pin-code.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, PopoverAriaAttribute, PopoverDirection, Theme } from '../types';
-export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PPopoverProps = BaseProps & {
     /**
      * Add ARIA attributes.
      */
@@ -18,7 +19,7 @@ export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PPopover: 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/popover.wrapper.mjs

@@ -17,6 +17,7 @@ const PPopover = forwardRef(({ aria, description, direction = 'bottom', theme, c
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, RadioButtonWrapperState, Theme } from '../types';
-export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PRadioButtonWrapperProps = BaseProps & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -26,7 +27,7 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PRadioButtonWrapper: 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/radio-button-wrapper.wrapper.mjs

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
-export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PScrollerProps = BaseProps & {
     /**
      * Sets the vertical position of scroll indicator.
      */
@@ -34,7 +35,7 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the vertical position of scroll indicator.
      */

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

@@ -17,6 +17,7 @@ const PScroller = forwardRef(({ alignScrollIndicator = 'center', aria, gradientC
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,6 +1,11 @@
-import { type HTMLAttributes } from 'react';
-import type { SegmentedControlItemIcon } from '../types';
-export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, SegmentedControlItemAriaAttribute, SegmentedControlItemIcon } from '../types';
+export type PSegmentedControlItemProps = BaseProps & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SegmentedControlItemAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -22,7 +27,11 @@ export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSegmentedControlItem: 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"> | undefined;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/segmented-control-item.wrapper.mjs

@@ -4,19 +4,20 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSegmentedControlItem = forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
+const PSegmentedControlItem = forwardRef(({ aria, disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-segmented-control-item');
-    const propsToSync = [disabled, icon, iconSource, label, value];
+    const propsToSync = [aria, disabled, icon, iconSource, label, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disabled', 'icon', 'iconSource', 'label', 'value'].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 });
 });
 

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

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

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -19,6 +19,7 @@ const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSeg
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-export type PSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
+export type PSelectOptionProps = BaseProps & {
     /**
      * Disables the option.
      */
@@ -9,7 +10,7 @@ export type PSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value?: string;
 };
-export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

package/esm/lib/components/select-option.wrapper.mjs

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

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

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { SelectDropdownDirection, BreakpointCustomizable, SelectUpdateEventDetail, SelectState, Theme } from '../types';
-export type PSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PSelectProps = BaseProps & {
     /**
      * The description text.
      */
@@ -50,7 +51,7 @@ export type PSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value?: string;
 };
-export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSelect: 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/select.wrapper.mjs

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

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

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

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

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

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { StepperHorizontalItemState } from '../types';
-export type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PStepperHorizontalItemProps = BaseProps & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */
@@ -10,7 +11,7 @@ export type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     state?: StepperHorizontalItemState;
 };
-export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/stepper-horizontal-item.wrapper.mjs

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