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

package/CHANGELOG.md

@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.32.1] - 2026-02-24
+
 ## [3.32.1-rc.0] - 2026-02-20
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.32.1-rc.0",
+  "version": "3.32.1",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.32.1-rc.0"
+    "@porsche-design-system/components-js": "3.32.1"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -3643,7 +3643,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -6277,6 +6277,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPurePadding}`]: `calc(1px * ${buttonCompensation})`,
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
                 '&(:dir(rtl)) input::placeholder': {
                     direction: 'rtl',
                     textAlign: 'end',
@@ -8231,7 +8232,11 @@ const getComponentCss$X = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8370,7 +8375,11 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8455,7 +8464,11 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3446,7 +3446,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console

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

@@ -21,7 +21,8 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);
-    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This is the default: let the browser decide in which direction the value should be placed.
+                     }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 exports.InputBase = InputBase;

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

@@ -3641,7 +3641,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -6275,6 +6275,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPurePadding}`]: `calc(1px * ${buttonCompensation})`,
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
                 '&(:dir(rtl)) input::placeholder': {
                     direction: 'rtl',
                     textAlign: 'end',
@@ -8229,7 +8230,11 @@ const getComponentCss$X = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8368,7 +8373,11 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },
@@ -8453,7 +8462,11 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
                 WebkitAppearance: 'none',
             },
-        }, {
+        }, 
+        // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+        // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+        // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+        {
             '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
                 direction: 'ltr',
             },

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3444,7 +3444,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.32.1-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console

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

@@ -19,7 +19,8 @@ id, label, description, loading, initialLoading, required, disabled, state, mess
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren(children);
-    return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": loading ? loadingId : `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+    return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": loading ? loadingId : `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This is the default: let the browser decide in which direction the value should be placed.
+                     }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 export { InputBase };