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

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

@@ -23,6 +23,10 @@ class DSRInputTel extends 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,7 +38,7 @@ class DSRInputTel extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$L(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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: jsx(PIcon, { "aria-hidden": "true", name: "phone", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -21,6 +21,10 @@ class DSRInputText extends 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
     }
@@ -32,10 +36,10 @@ class DSRInputText extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$K(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.counter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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: (jsxs(Fragment, { children: [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` }), 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` }), 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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-time.mjs

@@ -24,6 +24,10 @@ class DSRInputTime extends 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
     }
@@ -35,7 +39,7 @@ class DSRInputTime extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$J(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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, ...(hasShowPickerSupport() && {
                                 end: (jsx(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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-url.mjs

@@ -23,6 +23,10 @@ class DSRInputUrl extends 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,7 +38,7 @@ class DSRInputUrl extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$I(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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: jsx(PIcon, { "aria-hidden": "true", name: "linked", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -24,6 +24,10 @@ class DSRInputWeek extends 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
     }
@@ -35,7 +39,7 @@ class DSRInputWeek extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$H(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(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, ...(hasShowPickerSupport() && {
                                 end: (jsx(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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select.mjs

@@ -45,10 +45,15 @@ class DSRMultiSelect extends Component {
     hasNativePopoverSupport = 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);
     }
@@ -58,7 +63,7 @@ class DSRMultiSelect extends Component {
     formStateRestoreCallback() {
     }
     formResetCallback() {
-        this.props.setFormValue(this.props.defaultValue);
+        // triggers value watcher which syncs form value
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
@@ -69,7 +74,7 @@ class DSRMultiSelect extends Component {
         const selectDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$y(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact));
-        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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), 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, host: null })] })] }), this.props.children] }));
+        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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value?.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), 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, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -48,13 +48,17 @@ class DSRSelect extends 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(this.props.children);

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

@@ -20,8 +20,12 @@ class DSRTextarea extends 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
@@ -34,9 +38,9 @@ class DSRTextarea extends Component {
         const textareaDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const textareaMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.compact, this.props.counter, this.props.resize));
-        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": 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 && (jsxs(Fragment, { children: [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` }), jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] }))] }), 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, host: null })] })] }), this.props.children] }));
+        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": 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 && (jsxs(Fragment, { children: [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` }), jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.parsedValue.length}/${this.props.maxLength}` : `${this.parsedValue.length}` })] }))] }), 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, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 export { componentsReady } from '@porsche-design-system/components-js';
 export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.mjs';
 export { PAccordion } from './lib/components/accordion.wrapper.mjs';
+export { PAiTag } from './lib/components/ai-tag.wrapper.mjs';
 export { PBanner } from './lib/components/banner.wrapper.mjs';
 export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
+import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, BreakpointCustomizable, AccordionUpdateEventDetail, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
      * Aligns the marker within the summary section.
@@ -24,6 +24,11 @@ export type PAccordionProps = BaseProps & {
      * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
+    /**
+     * Indents the slotted content to be vertically aligned with the text of the summary section.
+     * @default false
+     */
+    indent?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the accordion state changes.
      */
@@ -42,7 +47,7 @@ export type PAccordionProps = BaseProps & {
      */
     sticky?: boolean;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the marker within the summary section.
      * @default 'end'
@@ -66,6 +71,11 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
+    /**
+     * Indents the slotted content to be vertically aligned with the text of the summary section.
+     * @default false
+     */
+    indent?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the accordion state changes.
      */

package/ssr/esm/lib/components/ai-tag.wrapper.d.ts

@@ -0,0 +1,26 @@
+import type { BaseProps } from '../../BaseProps';
+import type { AiTagLocale, AiTagVariant } from '../types';
+export type PAiTagProps = BaseProps & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     * @default 'en_US'
+     */
+    locale?: AiTagLocale;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     * @default 'generated'
+     */
+    variant?: AiTagVariant;
+};
+export declare const PAiTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     * @default 'en_US'
+     */
+    locale?: AiTagLocale;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     * @default 'generated'
+     */
+    variant?: AiTagVariant;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -41,7 +41,7 @@ export type PBannerProps = BaseProps & {
      */
     state?: BannerState;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the description text of the banner.
      * @default ''

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

@@ -77,7 +77,7 @@ export type PButtonPureProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the button in its active state.
      * @default false

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

@@ -68,7 +68,7 @@ export type PButtonTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      * @default 'bottom'

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

@@ -57,7 +57,7 @@ export type PButtonProps = BaseProps & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -25,7 +25,7 @@ export type PCanvasProps = BaseProps & {
      */
     sidebarStartOpen?: boolean;
 };
-export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the background color of the main section and auto adjust it for the sidebar
      * @default 'canvas'

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

@@ -81,7 +81,7 @@ export type PCarouselProps = BaseProps & {
      */
     width?: CarouselWidth;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide is active (zero-based numbering).
      * @default 0

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

@@ -74,7 +74,7 @@ export type PCheckboxProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      * @default false

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

@@ -15,7 +15,7 @@ export type PCrestProps = BaseProps & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -27,7 +27,7 @@ export type PDisplayProps = BaseProps & {
     tag?: DisplayTag;
 };
 /** @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead. */
-export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      * @default 'start'

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

@@ -12,7 +12,7 @@ export type PDividerProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<DividerDirection>;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines color.
      * @default 'contrast-lower'

package/ssr/esm/lib/components/drilldown-item.wrapper.d.ts

@@ -24,7 +24,7 @@ export type PDrilldownItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      * @default false

package/ssr/esm/lib/components/drilldown-link.wrapper.d.ts

@@ -28,7 +28,7 @@ export type PDrilldownLinkProps = BaseProps & {
      */
     target?: DrilldownLinkTarget;
 };
-export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the link in its active state.
      * @default false

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

@@ -23,7 +23,7 @@ export type PDrilldownProps = BaseProps & {
      */
     open?: boolean;
 };
-export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which `p-drilldown-item` is shown as open.
      */

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

@@ -31,7 +31,7 @@ export type PFieldsetProps = BaseProps & {
      */
     state?: FieldsetState;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -16,7 +16,7 @@ export type PFlagProps = BaseProps & {
      */
     size?: BreakpointCustomizable<FlagSize>;
 };
-export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A map of ARIA attributes to enhance the flag's accessibility. For example, use `{ 'aria-label': 'German flag' }` to provide a descriptive label for screen readers.
      */

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

@@ -48,7 +48,7 @@ export type PFlyoutProps = BaseProps & {
      */
     position?: FlyoutPosition;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -36,7 +36,7 @@ export type PHeadingProps = BaseProps & {
      */
     weight?: HeadingWeight;
 };
-export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the heading. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
      * @default 'start'

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

@@ -25,7 +25,7 @@ export type PIconProps = BaseProps & {
      */
     source?: string;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -1,4 +1,5 @@
 export * from './accordion.wrapper';
+export * from './ai-tag.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-pure.wrapper';

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

@@ -49,7 +49,7 @@ export type PInlineNotificationProps = BaseProps & {
      */
     state?: InlineNotificationState;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon of the inline-notification.
      * @default 'arrow-right'

package/ssr/esm/lib/components/input-date.wrapper.d.ts

@@ -92,9 +92,9 @@ export type PInputDateProps = BaseProps & {
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 };
-export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='bday' for a birthday).
      */
@@ -186,7 +186,7 @@ export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/input-email.wrapper.d.ts

@@ -106,9 +106,9 @@ export type PInputEmailProps = BaseProps & {
      * The default email address (or comma-separated list of addresses) for the input.
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 };
-export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
      */
@@ -214,7 +214,7 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
      * The default email address (or comma-separated list of addresses) for the input.
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;