npm - @porsche-design-system/components-react - Versions diffs - 3.15.2 → 3.16.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (527) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.
      */
@@ -27,7 +28,7 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     fullscreen?: BreakpointCustomizable<boolean>;
     /**
-     * The title of the modal
+     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
      */
     heading?: string;
     /**
@@ -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.
      */
@@ -74,7 +75,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     fullscreen?: BreakpointCustomizable<boolean> | undefined;
     /**
-     * The title of the modal
+     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
      */
     heading?: string | undefined;
     /**

package/esm/lib/components/modal.wrapper.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.
      */
@@ -79,7 +80,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
      */
-    intl?: PaginationInternationalization | undefined;
+    intl?: Partial<Record<"page" | "prev" | "next" | "root", string>> | undefined;
     /**
      * The total count of items which should be shown per page.
      */

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 });
 });

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

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

package/esm/lib/components/stepper-horizontal.wrapper.mjs CHANGED Viewed

@@ -19,6 +19,7 @@ const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });

package/esm/lib/components/switch.wrapper.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from 'react';
+/// <reference types="react" />
+import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEventDetail, Theme } from '../types';
-export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PSwitchProps = BaseProps & {
     /**
      * Aligns the label.
      */
@@ -38,7 +39,7 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSwitch: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the label.
      */