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

package/CHANGELOG.md

@@ -14,12 +14,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
-## [3.32.0-rc.0] - 2025-12-16
+## [3.32.0-rc.1] - 2026-01-12
 
 ### Added
-
 - `AG Grid`: Relaxed peer dependency to support AG Grid new major version 35
   ([#4143](https://github.com/porsche-design-system/porsche-design-system/issues/4143))
+
+### Fixed
+
+- `Radio Group Option`: missing `delegatesFocus`
+  ([#4135](https://github.com/porsche-design-system/porsche-design-system/pull/4135))
+
+## [3.32.0-rc.0] - 2025-12-16
+
+### Added
+
 - `Multi Select, Select`:
   - `selected` slot for custom selection rendering and enabling complex options
   - `options-status` slot for loading, error and no results states when using custom filtering

package/cjs/lib/components/button-group.wrapper.cjs

@@ -6,6 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-group');

package/esm/lib/components/button-group.wrapper.d.ts

@@ -6,6 +6,7 @@ export type PButtonGroupProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 export declare const PButtonGroup: 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"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.

package/esm/lib/components/button-group.wrapper.mjs

@@ -4,6 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-group');

package/esm/lib/components/radio-group-option.wrapper.d.ts

@@ -34,4 +34,6 @@ export declare const PRadioGroupOption: import("react").ForwardRefExoticComponen
      * The value for the input.
      */
     value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.32.0-rc.0",
+  "version": "3.32.0-rc.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.0-rc.0"
+    "@porsche-design-system/components-js": "3.32.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <36.0.0",

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

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

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.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.0-rc.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/components/button-group.wrapper.cjs

@@ -7,6 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var buttonGroup = require('../dsr-components/button-group.cjs');
 
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-group');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/radio-group-option.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var radioGroupOption = require('../dsr-components/radio-group-option.cjs');
 
-const PRadioGroupOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, label, loading = false, value, className, ...rest }, ref) => {
+const PRadioGroupOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, label, loading = false, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-radio-group-option');
     const propsToSync = [disabled, label, loading, value];
@@ -20,9 +20,10 @@ const PRadioGroupOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, la
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(radioGroupOption.DSRRadioGroupOption, { disabled, label, loading, value })),
+                children: (jsxRuntime.jsx(radioGroupOption.DSRRadioGroupOption, { disabled, label, loading, value, children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',

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

@@ -8,6 +8,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ * @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead.
  */
 class DSRButtonGroup extends react.Component {
     host;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group-option.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
@@ -10,20 +11,26 @@ var label = require('./label.cjs');
 var stateMessage = require('./state-message.cjs');
 var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ */
 class DSRRadioGroupOption extends react.Component {
     host;
     initialLoading = false;
     inputElement;
     render() {
+        splitChildren.splitChildren(this.props.children);
         const { theme = 'light', selected: isSelected, name, state } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
         const isOptionLoading = this.props.loading && !isSelected;
         const isLoading = isOptionLoading || this.props.loadingParent;
         const id = 'radio-group-option';
         const style = minifyCss.minifyCss(stylesEntry.getRadioGroupOptionCss(isDisabled, isLoading, state, theme));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
-                                                e.stopPropagation();
-                                            }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }) }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
     }
 }
 

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

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

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.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.0-rc.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/components/button-group.wrapper.mjs

@@ -5,6 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRButtonGroup } from '../dsr-components/button-group.mjs';
 
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-group');

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/radio-group-option.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRRadioGroupOption } from '../dsr-components/radio-group-option.mjs';
 
-const PRadioGroupOption = /*#__PURE__*/ forwardRef(({ disabled = false, label, loading = false, value, className, ...rest }, ref) => {
+const PRadioGroupOption = /*#__PURE__*/ forwardRef(({ disabled = false, label, loading = false, value, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-radio-group-option');
     const propsToSync = [disabled, label, loading, value];
@@ -18,9 +18,10 @@ const PRadioGroupOption = /*#__PURE__*/ forwardRef(({ disabled = false, label, l
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRRadioGroupOption, { disabled, label, loading, value })),
+                children: (jsx(DSRRadioGroupOption, { disabled, label, loading, value, children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',

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

@@ -6,6 +6,7 @@ import { getButtonGroupCss as getComponentCss$1n } from '../../../../../../compo
 
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ * @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead.
  */
 class DSRButtonGroup extends Component {
     host;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group-option.mjs

@@ -1,6 +1,7 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getRadioGroupOptionCss as getComponentCss$y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
@@ -8,20 +9,26 @@ import { Label } from './label.mjs';
 import { messageId } from './state-message.mjs';
 import { PSpinner } from '../components/spinner.wrapper.mjs';
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ */
 class DSRRadioGroupOption extends Component {
     host;
     initialLoading = false;
     inputElement;
     render() {
+        splitChildren(this.props.children);
         const { theme = 'light', selected: isSelected, name, state } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
         const isOptionLoading = this.props.loading && !isSelected;
         const isLoading = isOptionLoading || this.props.loadingParent;
         const id = 'radio-group-option';
         const style = minifyCss(getComponentCss$y(isDisabled, isLoading, state, theme));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
-                                                e.stopPropagation();
-                                            }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }) }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -6,6 +6,7 @@ export type PButtonGroupProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 export declare const PButtonGroup: 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"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.

package/ssr/esm/lib/components/radio-group-option.wrapper.d.ts

@@ -34,4 +34,6 @@ export declare const PRadioGroupOption: import("react").ForwardRefExoticComponen
      * The value for the input.
      */
     value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/button-group.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ * @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead.
  */
 export declare class DSRButtonGroup extends Component<any> {
     host: HTMLElement;

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

@@ -1,5 +1,10 @@
 import { Component } from 'react';
 import type { RadioGroupOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ */
 export declare class DSRRadioGroupOption extends Component<any> {
     host: HTMLElement & RadioGroupOptionInternalHTMLProps;
     private initialLoading;