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

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

@@ -25,6 +25,10 @@ class DSRInputTel extends react.Component {
     initialLoading = false;
     inputElement;
     defaultValue;
+    // Native input.value is always a string; coerce number/null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
         // triggers value watcher
     }
@@ -36,7 +40,7 @@ class DSRInputTel extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputTelCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-tel", name: this.props.name, form: this.props.form, type: "tel", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-tel", name: this.props.name, form: this.props.form, type: "tel", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
                                 start: jsxRuntime.jsx(icon_wrapper.PIcon, { "aria-hidden": "true", name: "phone", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -23,6 +23,10 @@ class DSRInputText extends react.Component {
     initialLoading = false;
     inputElement;
     defaultValue;
+    // Native input.value is always a string; coerce number/null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
         // triggers value watcher
     }
@@ -34,10 +38,10 @@ class DSRInputText extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputTextCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.counter));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text", name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.counter && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text", name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.inputMode !== '' && { inputMode: this.props.inputMode }), ...(this.props.counter && {
                                 end: (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}` })] })),
+                                                ? `You have ${this.props.maxLength - this.parsedValue.length} out of ${this.props.maxLength} characters left`
+                                                : `${this.parsedValue.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.parsedValue.length}/${this.props.maxLength}` : `${this.parsedValue.length}` })] })),
                             }) })] }), this.props.children] }));
     }
 }

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

@@ -26,6 +26,10 @@ class DSRInputTime extends react.Component {
     initialLoading = false;
     inputElement;
     defaultValue;
+    // Native input.value is always a string; coerce null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
         // triggers value watcher
     }
@@ -37,7 +41,7 @@ class DSRInputTime extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputTimeCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-time", name: this.props.name, form: this.props.form, type: "time", required: this.props.required, max: this.props.max, min: this.props.min, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(utilsEntry.hasShowPickerSupport() && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-time", name: this.props.name, form: this.props.form, type: "time", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(utilsEntry.hasShowPickerSupport() && {
                                 end: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "clock", disabled: this.props.disabled || this.props.readOnly, children: "Open time picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -25,6 +25,10 @@ class DSRInputUrl extends react.Component {
     initialLoading = false;
     inputElement;
     defaultValue;
+    // Native input.value is always a string; coerce number/null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
         // triggers value watcher
     }
@@ -36,7 +40,7 @@ class DSRInputUrl extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputUrlCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-url", name: this.props.name, form: this.props.form, type: "url", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-url", name: this.props.name, form: this.props.form, type: "url", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
                                 start: jsxRuntime.jsx(icon_wrapper.PIcon, { "aria-hidden": "true", name: "linked", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -26,6 +26,10 @@ class DSRInputWeek extends react.Component {
     initialLoading = false;
     inputElement;
     defaultValue;
+    // Native input.value is always a string; coerce null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
         // triggers value watcher
     }
@@ -37,7 +41,7 @@ class DSRInputWeek extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputWeekCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-week", name: this.props.name, form: this.props.form, type: "week", required: this.props.required, max: this.props.max, min: this.props.min, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(utilsEntry.hasShowPickerSupport() && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-week", name: this.props.name, form: this.props.form, type: "week", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(utilsEntry.hasShowPickerSupport() && {
                                 end: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "calendar", disabled: this.props.disabled || this.props.readOnly, children: "Open date picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -47,10 +47,15 @@ class DSRMultiSelect extends react.Component {
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
     cleanUpAutoUpdate;
     currentlyHighlightedOption = null;
-    setFormValue(value) {
+    setFormValue() {
+        if (this.props.value == null || this.props.value.length === 0) {
+            // null excludes the control from form submission (mirrors native behavior)
+            this.props.internals?.setFormValue(null);
+            return;
+        }
         const formData = new FormData();
-        for (const val of value) {
-            formData.append(this.props.name, val);
+        for (const val of this.props.value) {
+            formData.append(this.props.name, String(val));
         }
         this.props.internals?.setFormValue(formData);
     }
@@ -60,7 +65,7 @@ class DSRMultiSelect extends react.Component {
     formStateRestoreCallback() {
     }
     formResetCallback() {
-        this.props.setFormValue(this.props.defaultValue);
+        // triggers value watcher which syncs form value
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
@@ -71,7 +76,7 @@ class DSRMultiSelect extends react.Component {
         const selectDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? utilsEntry.descriptionId : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const style = minifyCss.minifyCss(stylesEntry.getMultiSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, 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("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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && utilsEntry.labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsxRuntime.jsx("slot", { name: "selected" })) : (jsxRuntime.jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value.length > 0 && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxRuntime.jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsxRuntime.jsx("slot", { name: "filter" })) : (jsxRuntime.jsx(inputSearch_wrapper.PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxRuntime.jsxs("div", { id: listboxId, className: "options", ...utilsEntry.getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && utilsEntry.labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsxRuntime.jsx(noResultsOption.NoResultsOption, {}), jsxRuntime.jsx("slot", { name: "options-status" }), jsxRuntime.jsx("slot", {})] })] }), 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] }));
+        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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && utilsEntry.labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsxRuntime.jsx("slot", { name: "selected" })) : (jsxRuntime.jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value?.length > 0 && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxRuntime.jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsxRuntime.jsx("slot", { name: "filter" })) : (jsxRuntime.jsx(inputSearch_wrapper.PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxRuntime.jsxs("div", { id: listboxId, className: "options", ...utilsEntry.getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && utilsEntry.labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsxRuntime.jsx(noResultsOption.NoResultsOption, {}), jsxRuntime.jsx("slot", { name: "options-status" }), jsxRuntime.jsx("slot", {})] })] }), 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/select.cjs

@@ -50,13 +50,17 @@ class DSRSelect extends react.Component {
     get hasFilter() {
         return !!(this.props.filter || this.props.filterSlot);
     }
+    setFormValue() {
+        // `null`/`undefined` → `undefined`, removing the select from form submission (mirrors native behavior)
+        this.props.internals?.setFormValue(this.props.value === null || this.props.value === undefined ? undefined : String(this.props.value));
+    }
     formDisabledCallback() {
         // Called when a parent fieldset is disabled or enabled
     }
     formStateRestoreCallback() {
     }
     formResetCallback() {
-        this.props.internals?.setFormValue(this.props.defaultValue);
+        // triggers value watcher which syncs form value
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);

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

@@ -22,8 +22,12 @@ class DSRTextarea extends react.Component {
     internals;
     defaultValue;
     textAreaElement;
+    // Native input.value is always a string; coerce null/undefined to mirror native behavior.
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
-        this.props.internals?.setFormValue(this.props.defaultValue);
+        // triggers value watcher
     }
     formDisabledCallback() {
         // Called when a parent fieldset is disabled or enabled
@@ -36,9 +40,9 @@ class DSRTextarea extends react.Component {
         const textareaDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? utilsEntry.descriptionId : undefined;
         const textareaMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         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.setAriaIDREF(textareaMessageId, textareaDescriptionId), "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, host: null })] })] }), this.props.children] }));
+        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.setAriaIDREF(textareaMessageId, textareaDescriptionId), "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, defaultValue: this.parsedValue, 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.parsedValue.length} out of ${this.props.maxLength} characters left`
+                                                        : `${this.parsedValue.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.parsedValue.length}/${this.props.maxLength}` : `${this.parsedValue.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/public-api.cjs

@@ -3,6 +3,7 @@
 var componentsJs = require('@porsche-design-system/components-js');
 var hooks = require('./hooks.cjs');
 var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
+var aiTag_wrapper = require('./lib/components/ai-tag.wrapper.cjs');
 var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
 var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
@@ -87,6 +88,7 @@ Object.defineProperty(exports, "componentsReady", {
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useToastManager = hooks.useToastManager;
 exports.PAccordion = accordion_wrapper.PAccordion;
+exports.PAiTag = aiTag_wrapper.PAiTag;
 exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;

package/ssr/esm/BaseProps.d.ts

@@ -1,2 +1,2 @@
 import type { DOMAttributes, HTMLAttributes } from 'react';
-export type BaseProps = Omit<DOMAttributes<{}>, 'onChange' | 'onInput' | 'onToggle'> & 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' | 'inputMode' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;