@porsche-design-system/components-react 3.0.0-rc.2 → 3.0.0-rc.3

package/ssr/esm/components/dist/styles/esm/styles-entry.js

@@ -48,11 +48,11 @@ const borderWidthBase = '2px';
 const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
 
 const dropShadowLowStyle = {
-    filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 3px 8px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const dropShadowHighStyle = {
-    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const themeLightStateFocus = '#1A44EA';
@@ -3922,7 +3922,7 @@ const getComponentCss$Y = (size, compact, open, theme) => {
             })), hostHiddenStyles)),
             button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeightSemiBold }), buildResponsiveStyles(size, (s) => ({
                 fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '12px'} 0`,
+                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
             }))), mergeDeep({
                 '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
                     ? {
@@ -3948,11 +3948,16 @@ const getComponentCss$Y = (size, compact, open, theme) => {
         },
         heading: {
             margin: 0,
-            padding: '0 0 2px',
+        },
+        'icon-container': {
+            height: fontLineHeight,
+            display: 'flex',
+            alignItems: 'center',
         },
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
+            fontSize: fontSizeTextXXSmall,
             transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
         },
@@ -3991,24 +3996,25 @@ const ANIMATION_DURATION$1 = 600;
 const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
+const topBottomFallback = '56px';
 const getComponentCss$X = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), (isOpen
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed', bottom: `var(${cssVariableBottom},${topBottomFallback})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), { borderRadius: borderRadiusSmall }), (isOpen
                 ? {
                     opacity: 1,
                     visibility: 'inherit',
                     transform: 'translate3d(0,0,0)',
-                    transition: `opacity ${duration$1} ${easeInQuad$1}, transform ${duration$1} ${easeInQuad$1}`,
+                    transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
                 }
                 : {
                     opacity: 0,
                     visibility: 'hidden',
-                    transform: `translate3d(0,calc(var(${cssVariableBottom}) + 100%),0)`,
+                    transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
                     '&(.hydrated),&(.ssr)': {
-                        transition: `visibility 0s linear ${duration$1}, opacity ${duration$1} ${easeOutQuad$1}, transform ${duration$1} ${easeOutQuad$1}`,
+                        transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
                     },
-                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop})),0)` })), [getMediaQueryMin('xxl')]: {
+                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop},${topBottomFallback})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` })), [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
                 } }), hostHiddenStyles)),
@@ -4904,7 +4910,7 @@ const getComponentCss$E = (color, size, theme) => {
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
+        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0, pointerEvents: 'none' }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
                 getSchemedHighContrastMediaQuery({
                     filter: filter.light[color],
                 }, {
@@ -6489,7 +6495,13 @@ const getComponentCss$1 = () => {
 const getComponentCss = (size, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (size !== 'inherit' && {
+                height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)',
+                // workaround for Safari to optimize image rendering
+                '@supports (height: round(down, 1px, 1px))': {
+                    height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
+                },
+            })), hostHiddenStyles))),
             'a, svg': {
                 display: 'block',
                 maxWidth: '100%',

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js

@@ -72,7 +72,7 @@ class DSRAccordion extends Component {
         const contentId = 'accordion-panel';
         const Heading = this.props.tag;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Y(this.props.size, this.props.compact, this.props.open, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "inherit", "aria-hidden": "true" })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.js

@@ -23,8 +23,8 @@ class DSRSelectWrapperDropdown extends Component {
         const buttonId = 'value';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$o(this.props.direction === 'auto' ? 'down' : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
-                            jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: ((_a = getSelectedOptionMap(this.optionMaps)) === null || _a === void 0 ? void 0 : _a.value) || null, autoComplete: "off", value: this.searchString, ...getFilterInputAriaAttributes(this.isOpen, this.props.required, labelId, descriptionId, dropdownId, getHighlightedOptionMapIndex(this.optionMaps)) }),
-                            jsx("span", {}),
+                            jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: ((_a = getSelectedOptionMap(this.optionMaps)) === null || _a === void 0 ? void 0 : _a.value) || null, autoComplete: "off", defaultValue: this.searchString, ...getFilterInputAriaAttributes(this.isOpen, this.props.required, labelId, descriptionId, dropdownId, getHighlightedOptionMapIndex(this.optionMaps)) }, "input"),
+                            jsx("span", {}, "span"),
                         ]) : (jsx("button", { type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled, ...getSelectWrapperDropdownButtonAriaAttributes(this.isOpen, labelId, descriptionId, dropdownId, getHighlightedOptionMapIndex(this.optionMaps)) })) })] }) }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/wordmark.js

@@ -8,7 +8,7 @@ import { parseAndGetAriaAttributes } from '../../../../../../components/dist/uti
 class DSRWordmark extends Component {
     render() {
         // optimized with SVGO, see docs in assets folder
-        const svg = (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4383 300", children: [jsx("title", { children: "Porsche" }), jsx("path", { d: "M492 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h424zm6-143v65c0 7.8-4.2 12-12 12H68V66h418c7.8 0 12 4.2 12 12zm220 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h407c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H718zm401-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H724c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h395zm657-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-351v79h-68V0h492c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-418v89h418zm155-81c0-48.1 25.9-74 74-74h482v56h-476c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h412c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-482v-56h476c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-412c-48.1 0-74-25.9-74-74V74zm643 0c0-48.1 25.9-74 74-74h470v66h-464c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h464v66h-470c-48.1 0-74-25.9-74-74V74zM3718 0v300h-68V183h-397v117h-68V0h68v117h397V0h68zm148 56v66h517v56h-517v66h517v56h-585V0h585v56h-517z" })] }));
+        const svg = (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4500 300", children: [jsx("title", { children: "Porsche" }), jsx("path", { d: "M502 221c48.1 0 74-25.9 74-74V74c0-48.1-25.9-74-74-74H0v300h68v-79h434zm6-143v65c0 7.8-4.2 12-12 12H68V66h428c7.8 0 12 4.2 12 12zm228 222c-48.1 0-74-25.9-74-74V74c0-48.1 25.9-74 74-74h417c48.1 0 74 25.9 74 74v152c0 48.1-25.9 74-74 74H736zm411-66c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12H742c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h405zm675-36c39.844 16.757 67.853 56.1 68 102h-68c0-54-25-79-79-79h-361v79h-68V0h502c48.1 0 74 25.9 74 74v50.14c0 46.06-23.75 71.76-68 73.86zm-12-43c7.8 0 12-4.2 12-12V78c0-7.8-4.2-12-12-12h-428v89h428zm162-81c0-48.1 25.9-74 74-74h492v56h-486c-7.8 0-12 4.2-12 12v42c0 7.8 4.2 12 12 12h422c48.1 0 74 25.9 74 74v30c0 48.1-25.9 74-74 74h-492v-56h486c7.8 0 12-4.2 12-12v-42c0-7.8-4.2-12-12-12h-422c-48.1 0-74-25.9-74-74V74zm661 0c0-48.1 25.9-74 74-74h480v66h-474c-7.8 0-12 4.2-12 12v144c0 7.8 4.2 12 12 12h474v66h-480c-48.1 0-74-25.9-74-74V74zM3817 0v300h-68V183h-407v117h-68V0h68v117h407V0h68zm156 56v66h527v56h-527v66h527v56h-595V0h595v56h-527z" })] }));
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss(this.props.size, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (svg) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: svg })) })] }) }));
     }

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -34,7 +34,7 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Description of the banner.
      */
@@ -39,7 +39,7 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Description of the banner.
      */

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

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display button in active state.
      */
@@ -55,7 +55,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> &
      */
     weight?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Display button in active state.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
-export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of button and description.
      */
@@ -58,7 +58,7 @@ export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> &
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Alignment of button and description.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
@@ -38,7 +38,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
-export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
@@ -59,7 +59,7 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     wrapContent?: boolean;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
-export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -26,7 +26,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
      */
     theme?: Theme;
 };
-export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -17,7 +17,7 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'
     width?: ContentWrapperWidth;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
-export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Text alignment of the component.
      */
@@ -26,7 +26,7 @@ export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Text alignment of the component.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
-export type PDividerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines color depending on theme.
      */
@@ -18,7 +18,7 @@ export type PDividerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines color depending on theme.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
-export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The label text.
      */
@@ -27,7 +27,7 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
     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" | "onChange"> & {
+export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The label text.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
-export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The label text.
      */
@@ -26,7 +26,7 @@ export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The label text.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
-export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * 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 +27,7 @@ export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     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" | "onChange"> & {
+export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * 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/ssr/lib/components/flex.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
-export type PFlexProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * 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 +27,7 @@ export type PFlexProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     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" | "onChange"> & {
+export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * 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/ssr/lib/components/grid-item.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
-export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * 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 +11,7 @@ export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     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" | "onChange"> & {
+export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * 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/ssr/lib/components/grid.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
-export type PGridProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * 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 +16,7 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     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" | "onChange"> & {
+export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * 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/ssr/lib/components/heading.wrapper.d.ts

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
-export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Text alignment of the component.
      */
@@ -27,7 +27,7 @@ export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     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" | "onChange"> & {
+export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Text alignment of the component.
      */

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
-export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display link in active state.
      */
@@ -63,7 +63,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     weight?: LinkPureWeight;
 };
-export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Display link in active state.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
-export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label.
      */
@@ -31,7 +31,7 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> &
     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" | "onChange"> & {
+export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Show or hide label.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, LinkTileModelSignatureAspectRatio, LinkTileModelSignatureHeadingTag, LinkTileModelSignatureLinkDirection, LinkTileModelSignatureModel, LinkTileModelSignatureWeight } from '../types';
-export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */
@@ -30,7 +30,7 @@ export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color' | 'o
      */
     weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
 };
-export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
-export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of link and description.
      */
@@ -54,7 +54,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     weight?: BreakpointCustomizable<LinkTileWeight>;
 };
-export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Alignment of link and description.
      */