@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.cjs

@@ -16,8 +16,8 @@ class DSRStepperHorizontalItem extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stylesEntry.getStepperHorizontalItemCss(this.props.state, this.props.disabled, this.props.theme || 'light'));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: this.props.disabled ? 'state-disabled' : `notification-${utilsEntry.getStepperHorizontalIconName(this.props.state)}`, "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getStepperHorizontalItemCss(this.props.state, this.props.disabled));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) ? (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", color: utilsEntry.getStepperHorizontalIconName(this.props.state), "aria-hidden": "true" })) : (jsxRuntime.jsx("span", { className: "icon", "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.cjs

@@ -22,7 +22,7 @@ class DSRStepperHorizontal extends react.Component {
             ? { ...child, props: { ...child.props, theme: this.props.theme } }
             : child);
         const style = minifyCss.minifyCss(stylesEntry.getStepperHorizontalCss(this.props.size));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(scroller_wrapper.PScroller, { className: "scroller", aria: { role: 'list' }, theme: this.props.theme, children: jsxRuntime.jsx("slot", {}) }) })] }), manipulatedChildren] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(scroller_wrapper.PScroller, { className: "scroller", aria: { role: 'list' }, children: jsxRuntime.jsx("slot", {}) }) })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.cjs

@@ -20,9 +20,10 @@ class DSRSwitch extends react.Component {
     initialLoading = false;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stylesEntry.getSwitchCss(this.props.alignLabel, this.props.hideLabel, this.props.stretch, this.props.checked, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ...utilsEntry.getSwitchButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.checked), id: "switch", type: "button", role: "switch", "aria-labelledby": "label" // only relevant for axe-core because of https://github.com/dequelabs/axe-core/issues/1393
-                                    , "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: jsxRuntime.jsx("span", { className: "toggle", children: this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })) }) }), jsxRuntime.jsx("label", { id: "label", htmlFor: "switch", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const id = 'x';
+        const style = minifyCss.minifyCss(stylesEntry.getSwitchCss(this.props.alignLabel, this.props.hideLabel, this.props.stretch, this.props.checked, this.props.disabled, this.props.loading, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ...utilsEntry.getSwitchButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.checked), id: id, type: "button", role: "switch", "aria-labelledby": "label" // only relevant for axe-core because of https://github.com/dequelabs/axe-core/issues/1393
+                                    , "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: jsxRuntime.jsx("span", { className: "toggle", children: this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }) }) }), jsxRuntime.jsx("label", { id: "label", htmlFor: id, children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.cjs

@@ -21,8 +21,8 @@ class DSRTable extends react.Component {
         const tableAttr = this.props.caption
             ? { 'aria-label': this.props.caption }
             : hasSlottedCaption && { 'aria-labelledby': captionId };
-        const style = minifyCss.minifyCss(stylesEntry.getTableCss(this.props.compact, this.props.layout, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedCaption && (jsxRuntime.jsx("div", { id: captionId, className: "caption", children: jsxRuntime.jsx("slot", { name: "caption" }) })), jsxRuntime.jsx(scroller_wrapper.PScroller, { scrollbar: true, theme: this.props.theme, children: jsxRuntime.jsx("div", { className: "table", role: "table", ...tableAttr, children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getTableCss(this.props.compact, this.props.layout));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedCaption && (jsxRuntime.jsx("div", { id: captionId, className: "caption", children: jsxRuntime.jsx("slot", { name: "caption" }) })), jsxRuntime.jsx(scroller_wrapper.PScroller, { scrollbar: true, children: jsxRuntime.jsx("div", { className: "table", role: "table", ...tableAttr, children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.cjs

@@ -45,11 +45,8 @@ class DSRTabsBar extends react.Component {
                     }
                     : child
             : child);
-        const deprecationMap = {
-            semibold: 'semi-bold',
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.size, (deprecationMap[this.props.weight] || this.props.weight), this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", ...(this.props.areTabsButtons && { aria: { role: 'tablist' } }), theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, gradientColor: this.props.gradientColor, alignScrollIndicator: "top", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
+        const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.size, this.props.weight));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", ...(this.props.areTabsButtons && { aria: { role: 'tablist' } }), alignScrollIndicator: "top", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-item.cjs

@@ -13,8 +13,7 @@ class DSRTabsItem extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stylesEntry.getTabsItemCss(this.props.theme || 'light' // default as fallback
-        ));
+        const style = minifyCss.minifyCss(stylesEntry.getTabsItemCss());
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("slot", {})] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.cjs

@@ -22,7 +22,7 @@ class DSRTabs extends react.Component {
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
         const style = minifyCss.minifyCss(stylesEntry.getTabsCss());
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, gradientColor: this.props.gradientColor, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.cjs

@@ -16,11 +16,8 @@ class DSRTagDismissible extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const deprecationMap = {
-            'background-default': 'background-base',
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getTagDismissibleCss((deprecationMap[this.props.color] || this.props.color), !!this.props.label, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove:" }), jsxRuntime.jsxs("span", { children: [this.props.label && jsxRuntime.jsx("span", { className: "label", children: this.props.label }), jsxRuntime.jsx("slot", {})] }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "close", theme: this.props.theme, "aria-hidden": "true" })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getTagDismissibleCss(!!this.props.label, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove:" }), jsxRuntime.jsxs("span", { children: [this.props.label && jsxRuntime.jsx("span", { className: "label", children: this.props.label }), jsxRuntime.jsx("slot", {})] }), jsxRuntime.jsx("span", { className: "icon", children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "close", "aria-hidden": "true" }) })] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.cjs

@@ -16,17 +16,9 @@ class DSRTag extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const hasIcon = !!(this.props.icon || this.props.iconSource);
-        const deprecationMap = {
-            'background-default': 'background-base',
-            'neutral-contrast-high': 'primary',
-            'notification-neutral': 'notification-info-soft',
-            'notification-warning': 'notification-warning-soft',
-            'notification-success': 'notification-success-soft',
-            'notification-error': 'notification-error-soft',
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getTagCss((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!utilsEntry.getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("span", { children: [hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
+        const hasIcon = this.props.icon !== 'none' || !!this.props.iconSource;
+        const style = minifyCss.minifyCss(stylesEntry.getTagCss(this.props.variant, this.props.compact, !!utilsEntry.getDirectChildHTMLElement(null, 'a,button'), hasIcon));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("span", { children: [hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "inherit", size: "x-small", "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.cjs

@@ -14,7 +14,7 @@ class DSRTextListItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getTextListItemCss());
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx("slot", {}) }) })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.cjs

@@ -14,8 +14,8 @@ class DSRTextList extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const TagType = utilsEntry.isListTypeOrdered(this.props.listType || this.props.type) ? 'ol' : 'ul';
-        const style = minifyCss.minifyCss(stylesEntry.getTextListCss(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme));
+        const TagType = utilsEntry.isListTypeOrdered(this.props.type) ? 'ol' : 'ul';
+        const style = minifyCss.minifyCss(stylesEntry.getTextListCss(this.props.type));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(TagType, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.cjs

@@ -14,24 +14,8 @@ class DSRText extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const colorDeprecationMap = {
-            brand: 'primary',
-            default: 'primary',
-            'neutral-contrast-low': 'contrast-low',
-            'neutral-contrast-medium': 'contrast-medium',
-            'neutral-contrast-high': 'contrast-high',
-            'notification-neutral': 'notification-info',
-        };
-        const weightDeprecationMap = {
-            thin: 'regular',
-            semibold: 'semi-bold',
-        };
-        const alignDeprecationMap = {
-            left: 'start',
-            right: 'end',
-        };
         const TagType = utilsEntry.getTextTagType(null, this.props.tag);
-        const style = minifyCss.minifyCss(stylesEntry.getTextCss(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), (alignDeprecationMap[this.props.align] || this.props.align), (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme));
+        const style = minifyCss.minifyCss(stylesEntry.getTextCss(this.props.size, this.props.weight, this.props.align, this.props.color, this.props.ellipsis));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(TagType, { className: "root", children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea.cjs

@@ -25,16 +25,17 @@ class DSRTextarea extends react.Component {
         this.props.internals?.setFormValue(this.props.defaultValue);
     }
     formDisabledCallback() {
+        // Called when a parent fieldset is disabled or enabled
     }
     formStateRestoreCallback() {
     }
     render() {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss.minifyCss(stylesEntry.getTextareaCss(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.counter, this.props.resize, this.props.theme));
+        const style = minifyCss.minifyCss(stylesEntry.getTextareaCss(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.compact, this.props.counter, this.props.resize));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("textarea", { "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, defaultValue: this.props.value, form: this.props.form, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, rows: this.props.rows, readOnly: this.props.readOnly, spellCheck: this.props.spellCheck, autoComplete: this.props.autoComplete, wrap: this.props.wrap }), this.props.counter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: this.props.maxLength
                                                         ? `You have ${this.props.maxLength - this.props.value.length} out of ${this.props.maxLength} characters left`
-                                                        : `${this.props.value.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
+                                                        : `${this.props.value.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -11,7 +11,7 @@ class DSRWordmark extends react.Component {
     render() {
         // optimized with SVGO, see docs in assets folder
         const svg = (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 4500 300", children: [jsxRuntime.jsx("title", { children: "Porsche" }), jsxRuntime.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.minifyCss(stylesEntry.getWordmarkCss(this.props.size, this.props.theme));
+        const style = minifyCss.minifyCss(stylesEntry.getWordmarkCss(this.props.size));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.href === undefined ? (svg) : (jsxRuntime.jsx("a", { href: this.props.href, target: this.props.target, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: svg })) })] }) }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/provider.cjs

@@ -2,15 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var componentsJs = require('@porsche-design-system/components-js');
+var react = require('react');
 
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = react.createContext({
     prefix: undefined,
-    theme: 'light',
 });
-const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
     // @ts-ignore
     if (!process.browser) {
         // for ssr we set the global PORSCHE_DESIGN_SYSTEM_CDN_URL variable that is used in our getCDNBaseURL() util to respect the cdn
@@ -21,7 +20,7 @@ const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...pro
     react.useEffect(() => {
         componentsJs.load({ prefix, cdn });
     }, []); // runtime prefix or cdn change is not supported
-    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix, theme }, ...props });
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 
 exports.PorscheDesignSystemContext = PorscheDesignSystemContext;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs

@@ -1,17 +1,15 @@
 'use strict';
 
 var componentsJs = require('@porsche-design-system/components-js');
+var hooks = require('./hooks.cjs');
 var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
 var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
 var button_wrapper = require('./lib/components/button.wrapper.cjs');
-var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
 var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
 var checkbox_wrapper = require('./lib/components/checkbox.wrapper.cjs');
-var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
-var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
 var crest_wrapper = require('./lib/components/crest.wrapper.cjs');
 var display_wrapper = require('./lib/components/display.wrapper.cjs');
 var divider_wrapper = require('./lib/components/divider.wrapper.cjs');
@@ -19,19 +17,14 @@ var drilldown_wrapper = require('./lib/components/drilldown.wrapper.cjs');
 var drilldownItem_wrapper = require('./lib/components/drilldown-item.wrapper.cjs');
 var drilldownLink_wrapper = require('./lib/components/drilldown-link.wrapper.cjs');
 var fieldset_wrapper = require('./lib/components/fieldset.wrapper.cjs');
-var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.cjs');
 var flag_wrapper = require('./lib/components/flag.wrapper.cjs');
-var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
-var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
-var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
-var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
 var inputDate_wrapper = require('./lib/components/input-date.wrapper.cjs');
 var inputEmail_wrapper = require('./lib/components/input-email.wrapper.cjs');
+var inputMonth_wrapper = require('./lib/components/input-month.wrapper.cjs');
 var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var inputSearch_wrapper = require('./lib/components/input-search.wrapper.cjs');
@@ -39,13 +32,11 @@ var inputTel_wrapper = require('./lib/components/input-tel.wrapper.cjs');
 var inputText_wrapper = require('./lib/components/input-text.wrapper.cjs');
 var inputTime_wrapper = require('./lib/components/input-time.wrapper.cjs');
 var inputUrl_wrapper = require('./lib/components/input-url.wrapper.cjs');
+var inputWeek_wrapper = require('./lib/components/input-week.wrapper.cjs');
 var link_wrapper = require('./lib/components/link.wrapper.cjs');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
-var linkSocial_wrapper = require('./lib/components/link-social.wrapper.cjs');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.cjs');
-var linkTileModelSignature_wrapper = require('./lib/components/link-tile-model-signature.wrapper.cjs');
 var linkTileProduct_wrapper = require('./lib/components/link-tile-product.wrapper.cjs');
-var marque_wrapper = require('./lib/components/marque.wrapper.cjs');
 var modal_wrapper = require('./lib/components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.cjs');
 var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
@@ -54,7 +45,6 @@ var optgroup_wrapper = require('./lib/components/optgroup.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
 var pinCode_wrapper = require('./lib/components/pin-code.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
-var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.cjs');
 var radioGroup_wrapper = require('./lib/components/radio-group.wrapper.cjs');
 var radioGroupOption_wrapper = require('./lib/components/radio-group-option.wrapper.cjs');
 var scroller_wrapper = require('./lib/components/scroller.wrapper.cjs');
@@ -62,7 +52,6 @@ var segmentedControl_wrapper = require('./lib/components/segmented-control.wrapp
 var segmentedControlItem_wrapper = require('./lib/components/segmented-control-item.wrapper.cjs');
 var select_wrapper = require('./lib/components/select.wrapper.cjs');
 var selectOption_wrapper = require('./lib/components/select-option.wrapper.cjs');
-var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.cjs');
 var sheet_wrapper = require('./lib/components/sheet.wrapper.cjs');
 var spinner_wrapper = require('./lib/components/spinner.wrapper.cjs');
 var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.cjs');
@@ -81,15 +70,12 @@ var tabsItem_wrapper = require('./lib/components/tabs-item.wrapper.cjs');
 var tag_wrapper = require('./lib/components/tag.wrapper.cjs');
 var tagDismissible_wrapper = require('./lib/components/tag-dismissible.wrapper.cjs');
 var text_wrapper = require('./lib/components/text.wrapper.cjs');
-var textFieldWrapper_wrapper = require('./lib/components/text-field-wrapper.wrapper.cjs');
 var textList_wrapper = require('./lib/components/text-list.wrapper.cjs');
 var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.cjs');
 var textarea_wrapper = require('./lib/components/textarea.wrapper.cjs');
-var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.cjs');
 var toast_wrapper = require('./lib/components/toast.wrapper.cjs');
 var wordmark_wrapper = require('./lib/components/wordmark.wrapper.cjs');
 var provider = require('./provider.cjs');
-var hooks = require('./hooks.cjs');
 var utils = require('./utils.cjs');
 
 
@@ -98,17 +84,16 @@ Object.defineProperty(exports, "componentsReady", {
 	enumerable: true,
 	get: function () { return componentsJs.componentsReady; }
 });
+exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
+exports.useToastManager = hooks.useToastManager;
 exports.PAccordion = accordion_wrapper.PAccordion;
 exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
-exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
 exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckbox = checkbox_wrapper.PCheckbox;
-exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
-exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
 exports.PCrest = crest_wrapper.PCrest;
 exports.PDisplay = display_wrapper.PDisplay;
 exports.PDivider = divider_wrapper.PDivider;
@@ -116,19 +101,14 @@ exports.PDrilldown = drilldown_wrapper.PDrilldown;
 exports.PDrilldownItem = drilldownItem_wrapper.PDrilldownItem;
 exports.PDrilldownLink = drilldownLink_wrapper.PDrilldownLink;
 exports.PFieldset = fieldset_wrapper.PFieldset;
-exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlag = flag_wrapper.PFlag;
-exports.PFlex = flex_wrapper.PFlex;
-exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PGrid = grid_wrapper.PGrid;
-exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;
-exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
 exports.PInputDate = inputDate_wrapper.PInputDate;
 exports.PInputEmail = inputEmail_wrapper.PInputEmail;
+exports.PInputMonth = inputMonth_wrapper.PInputMonth;
 exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PInputSearch = inputSearch_wrapper.PInputSearch;
@@ -136,13 +116,11 @@ exports.PInputTel = inputTel_wrapper.PInputTel;
 exports.PInputText = inputText_wrapper.PInputText;
 exports.PInputTime = inputTime_wrapper.PInputTime;
 exports.PInputUrl = inputUrl_wrapper.PInputUrl;
+exports.PInputWeek = inputWeek_wrapper.PInputWeek;
 exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;
-exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
-exports.PLinkTileModelSignature = linkTileModelSignature_wrapper.PLinkTileModelSignature;
 exports.PLinkTileProduct = linkTileProduct_wrapper.PLinkTileProduct;
-exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
@@ -151,7 +129,6 @@ exports.POptgroup = optgroup_wrapper.POptgroup;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPinCode = pinCode_wrapper.PPinCode;
 exports.PPopover = popover_wrapper.PPopover;
-exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
 exports.PRadioGroup = radioGroup_wrapper.PRadioGroup;
 exports.PRadioGroupOption = radioGroupOption_wrapper.PRadioGroupOption;
 exports.PScroller = scroller_wrapper.PScroller;
@@ -159,7 +136,6 @@ exports.PSegmentedControl = segmentedControl_wrapper.PSegmentedControl;
 exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlItem;
 exports.PSelect = select_wrapper.PSelect;
 exports.PSelectOption = selectOption_wrapper.PSelectOption;
-exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
 exports.PSheet = sheet_wrapper.PSheet;
 exports.PSpinner = spinner_wrapper.PSpinner;
 exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
@@ -178,15 +154,11 @@ exports.PTabsItem = tabsItem_wrapper.PTabsItem;
 exports.PTag = tag_wrapper.PTag;
 exports.PTagDismissible = tagDismissible_wrapper.PTagDismissible;
 exports.PText = text_wrapper.PText;
-exports.PTextFieldWrapper = textFieldWrapper_wrapper.PTextFieldWrapper;
 exports.PTextList = textList_wrapper.PTextList;
 exports.PTextListItem = textListItem_wrapper.PTextListItem;
 exports.PTextarea = textarea_wrapper.PTextarea;
-exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
 exports.PWordmark = wordmark_wrapper.PWordmark;
 exports.PorscheDesignSystemContext = provider.PorscheDesignSystemContext;
 exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
-exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
-exports.useToastManager = hooks.useToastManager;
 exports.skipPorscheDesignSystemCDNRequestsDuringTests = utils.skipPorscheDesignSystemCDNRequestsDuringTests;

package/ssr/esm/BaseProps.d.ts

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