@porsche-design-system/components-react 3.17.0 → 3.18.0-rc.0

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

@@ -67,6 +67,7 @@ import '../components/text.wrapper.mjs';
 import '../components/text-field-wrapper.wrapper.mjs';
 import '../components/text-list.wrapper.mjs';
 import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
@@ -74,7 +75,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTabsBarCss as getComponentCss$c } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTabsBarCss as getComponentCss$d } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the `button` or `a` tags which will be rendered as tabs." }
@@ -116,7 +117,7 @@ class DSRTabsBar extends Component {
         const deprecationMap = {
             semibold: 'semi-bold',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$c(this.props.size, (deprecationMap[this.props.weight] || this.props.weight), this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$d(this.props.size, (deprecationMap[this.props.weight] || this.props.weight), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", ...(this.props.areTabsButtons && { aria: { role: 'tablist' } }), theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, gradientColor: this.props.gradientColor, alignScrollIndicator: "top", children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
     }
 }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTabsItemCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTabsItemCss as getComponentCss$c } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the tab content." }
@@ -12,7 +12,7 @@ class DSRTabsItem extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$b(this.props.theme || 'light' // default as fallback
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$c(this.props.theme || 'light' // default as fallback
         )));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
     }

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

@@ -67,6 +67,7 @@ import '../components/text.wrapper.mjs';
 import '../components/text-field-wrapper.wrapper.mjs';
 import '../components/text-list.wrapper.mjs';
 import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
@@ -74,7 +75,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTabsCss as getComponentCss$a } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTabsCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the `p-tabs-item` tags." }
@@ -89,7 +90,7 @@ class DSRTabs extends Component {
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$a()));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$b()));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(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) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }

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

@@ -67,6 +67,7 @@ import '../components/text.wrapper.mjs';
 import '../components/text-field-wrapper.wrapper.mjs';
 import '../components/text-list.wrapper.mjs';
 import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
@@ -74,7 +75,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTagDismissibleCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTagDismissibleCss as getComponentCss$a } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -87,7 +88,7 @@ class DSRTagDismissible extends Component {
         const deprecationMap = {
             'background-default': 'background-base',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$9((deprecationMap[this.props.color] || this.props.color), !!this.props.label, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$a((deprecationMap[this.props.color] || this.props.color), !!this.props.label, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { type: "button", ...parseAndGetAriaAttributes(this.props.aria), children: [jsx("span", { className: "sr-only", children: "Remove:" }), jsxs("span", { children: [this.props.label && jsx("span", { className: "label", children: this.props.label }), jsx("slot", {})] }), jsx(PIcon, { className: "icon", name: "close", theme: this.props.theme, "aria-hidden": "true" })] })] }), this.props.children] }));
     }
 }

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

@@ -67,6 +67,7 @@ import '../components/text.wrapper.mjs';
 import '../components/text-field-wrapper.wrapper.mjs';
 import '../components/text-list.wrapper.mjs';
 import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
@@ -74,7 +75,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTagCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTagCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getDirectChildHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -93,7 +94,7 @@ class DSRTag extends Component {
             'notification-success': 'notification-success-soft',
             'notification-error': 'notification-error-soft',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$9((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [hasIcon && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: this.props.theme, "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -68,13 +68,14 @@ import '../components/text.wrapper.mjs';
 import '../components/text-field-wrapper.wrapper.mjs';
 import '../components/text-list.wrapper.mjs';
 import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea.wrapper.mjs';
 import '../components/textarea-wrapper.wrapper.mjs';
 import '../components/toast.wrapper.mjs';
 import '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTextFieldWrapperCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextFieldWrapperCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
@@ -119,7 +120,7 @@ class DSRTextFieldWrapper extends Component {
         const hasAction = hasLocateAction(this.props.actionIcon);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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, label: this.props.label, description: this.props.description, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter , (this.props.isCounterVisible) && (jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
                                             this.props.isWithinForm && this.props.submitButton ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTextListItemCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextListItemCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the content." }
@@ -12,7 +12,7 @@ class DSRTextListItem extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5()));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6()));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("span", { children: jsx("slot", {}) }) })] }), this.props.children] }));
     }
 }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTextListCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextListCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isListTypeOrdered } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -14,7 +14,7 @@ class DSRTextList extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = isListTypeOrdered(this.props.listType || this.props.type) ? 'ol' : 'ul';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(this.props.listType === 'ordered' ? this.props.orderType || 'numbered' : this.props.type, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTextCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getTextTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -30,7 +30,7 @@ class DSRText extends Component {
             right: 'end',
         };
         const TagType = getTextTagType(null, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(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(stripFocusAndHoverStyles(getComponentCss$5(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)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTextareaWrapperCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTextareaWrapperCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
 
@@ -23,7 +23,7 @@ class DSRTextareaWrapper extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(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] }));
     }
 }

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

@@ -0,0 +1,38 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
+import { minifyCss } from '../../minifyCss.mjs';
+import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
+import { getTextareaCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { debounce } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
+import { Label, descriptionId } from './label.mjs';
+
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
+class DSRTextarea extends Component {
+    host;
+    // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
+    // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
+    internals;
+    textAreaElement;
+    counterElement;
+    hasCounter;
+    setCounterAriaTextDebounced = debounce(() => this.props.setCounterAriaText());
+    formResetCallback() {
+        this.props.internals.setValidity({});
+        this.props.internals.setFormValue('');
+        this.props.textAreaElement.value = '';
+    }
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const id = 'textarea';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("textarea", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, value: 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.hasCounter && (jsx("span", { className: "counter", "aria-hidden": "true", children: `${this.props.value.length}/${this.props.maxLength}` })), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(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] }));
+    }
+}
+
+export { DSRTextarea };

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

@@ -67,6 +67,7 @@ export { PText } from './lib/components/text.wrapper.mjs';
 export { PTextFieldWrapper } from './lib/components/text-field-wrapper.wrapper.mjs';
 export { PTextList } from './lib/components/text-list.wrapper.mjs';
 export { PTextListItem } from './lib/components/text-list-item.wrapper.mjs';
+export { PTextarea } from './lib/components/textarea.wrapper.mjs';
 export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.mjs';
 export { PToast } from './lib/components/toast.wrapper.mjs';
 export { PWordmark } from './lib/components/wordmark.wrapper.mjs';

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

@@ -66,6 +66,7 @@ export * from './text.wrapper';
 export * from './text-field-wrapper.wrapper';
 export * from './text-list.wrapper';
 export * from './text-list-item.wrapper';
+export * from './textarea.wrapper';
 export * from './textarea-wrapper.wrapper';
 export * from './toast.wrapper';
 export * from './wordmark.wrapper';

package/ssr/esm/lib/components/textarea.wrapper.d.ts

@@ -0,0 +1,198 @@
+import type { BaseProps } from '../../BaseProps';
+import type { TextareaAutoComplete, BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, Theme, TextareaWrap } from '../types';
+export type PTextareaProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: TextareaAutoComplete;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the textarea as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the textarea should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max length of the textarea.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the textarea.
+     */
+    minLength?: number;
+    /**
+     * The name of the textarea.
+     */
+    name: string;
+    /**
+     * Emitted when the textarea has lost focus.
+     */
+    onBlur?: (event: CustomEvent<TextareaBlurEventDetail>) => void;
+    /**
+     * Emitted when the textarea loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the textarea should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the textarea as required.
+     */
+    required?: boolean;
+    /**
+     * Controls whether the textarea is resizable and in which direction.
+     */
+    resize?: TextareaResize;
+    /**
+     * The amount of rows of the textarea.
+     */
+    rows?: number;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
+    /**
+     * Specifies whether the input should have its spelling and grammar checked
+     */
+    spellCheck?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: TextareaState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The textarea value.
+     */
+    value?: string;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: TextareaWrap;
+};
+export declare const PTextarea: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: TextareaAutoComplete;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the textarea as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the textarea should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max length of the textarea.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the textarea.
+     */
+    minLength?: number;
+    /**
+     * The name of the textarea.
+     */
+    name: string;
+    /**
+     * Emitted when the textarea has lost focus.
+     */
+    onBlur?: (event: CustomEvent<TextareaBlurEventDetail>) => void;
+    /**
+     * Emitted when the textarea loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the textarea should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the textarea as required.
+     */
+    required?: boolean;
+    /**
+     * Controls whether the textarea is resizable and in which direction.
+     */
+    resize?: TextareaResize;
+    /**
+     * The amount of rows of the textarea.
+     */
+    rows?: number;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
+    /**
+     * Specifies whether the input should have its spelling and grammar checked
+     */
+    spellCheck?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: TextareaState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The textarea value.
+     */
+    value?: string;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: TextareaWrap;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { SegmentedControlItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+import { type SegmentedControlItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the content." }
  */

package/ssr/esm/lib/dsr-components/select-option.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { SelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+import { type SelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the option content." }
  */

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { StepperHorizontalItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+import { type StepperHorizontalItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the content." }
  */

package/ssr/esm/lib/dsr-components/textarea.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
+export declare class DSRTextarea extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private textAreaElement;
+    private counterElement;
+    private hasCounter;
+    private setCounterAriaTextDebounced;
+    formResetCallback(): void;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/types.d.ts

@@ -1363,6 +1363,31 @@ declare const TEXT_LIST_TYPES: readonly [
     "alphabetically"
 ];
 export type TextListType = typeof TEXT_LIST_TYPES[number];
+export type TextareaState = FormState;
+declare const AUTO_COMPLETE: readonly [
+    "off",
+    "on",
+    ""
+];
+export type TextareaAutoComplete = (typeof AUTO_COMPLETE)[number];
+declare const TEXTAREA_WRAPS: readonly [
+    "hard",
+    "soft",
+    "off"
+];
+export type TextareaWrap = (typeof TEXTAREA_WRAPS)[number];
+declare const TEXTAREA_RESIZE: readonly [
+    "none",
+    "both",
+    "horizontal",
+    "vertical",
+    "block",
+    "inline"
+];
+export type TextareaResize = (typeof TEXTAREA_RESIZE)[number];
+export type TextareaChangeEventDetail = Event;
+export type TextareaBlurEventDetail = Event;
+export type TextareaInputEventDetail = InputEvent;
 export type TextareaWrapperState = FormState;
 declare const TOAST_STATES: readonly [
     "info",