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

package/CHANGELOG.md

@@ -14,12 +14,35 @@ 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.2] - 2026-02-03
 
 ### Added
 
-- `AG Grid`: Relaxed peer dependency to support AG Grid new major version 35
+- `Checkbox`, `Input-*`, `Multi-Select`, `Pin Code`, `Radio Button Group`, `Segmented-Control`, `Select`, `Textarea`:
+  New slot `label-after` to add custom content (e.g. `Popover`) after the `label` element
+  ([#4181](https://github.com/porsche-design-system/porsche-design-system/pull/4181))
+- `Angular`: Bumped peer dependency to support Angular new major version 21 ([#4178](https://github.com/porsche-design-system/porsche-design-system/pull/4178))
+- `Carousel`:
+  - `width` prop now supports `wide` and `full` values ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+  - `--p-carousel-px` CSS custom property introduced to control horizontal padding (when used, the `width` prop has no effect anymore)
+    ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+
+## [3.32.0-rc.1] - 2026-01-12
+
+### Added
+
+- `AG Grid`: Bumped 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/esm/lib/types.d.ts

@@ -924,7 +924,9 @@ export type CanvasSidebarStartUpdateEventDetail = {
 };
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
-    "extended"
+    "extended",
+    "wide",
+    "full"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.32.0-rc.0",
+  "version": "3.32.0-rc.2",
   "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,12 +17,12 @@
   "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.2"
   },
   "peerDependencies": {
-    "ag-grid-community": ">= 33.0.0 <36.0.0",
-    "ag-grid-enterprise": ">= 33.0.0 <36.0.0",
-    "ag-grid-react": ">= 33.0.0 <36.0.0",
+    "ag-grid-community": ">= 35.0.0 <36.0.0",
+    "ag-grid-enterprise": ">= 35.0.0 <36.0.0",
+    "ag-grid-react": ">= 35.0.0 <36.0.0",
     "react": ">=19.0.0 <20.0.0",
     "react-dom": ">=19.0.0 <20.0.0",
     "tailwindcss": ">= 4.0.0 <5.0.0"

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

@@ -157,6 +157,18 @@ const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL}
 
 const gridFullOffset = _gridPadding;
 
+const gridWideOffsetBase = _gridSafeZoneBase;
+
+const gridWideOffsetS = _gridSafeZoneS;
+
+const gridWideOffsetXXL = `calc(${_gridPadding} + ${_gridSafeZoneXXL})`;
+
+const gridWideOffset = {
+    base: gridWideOffsetBase,
+    s: gridWideOffsetS,
+    xxl: gridWideOffsetXXL,
+};
+
 const gridExtendedOffsetBase = _gridSafeZoneBase;
 
 const gridExtendedOffsetS = _getGridOffsetS('extended');
@@ -3631,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.0-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.0-rc.2"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -5164,6 +5176,18 @@ const getComponentCss$1j = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-px", "description": "Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInline = '--p-carousel-px';
+/**
+ * @css-variable {"name": "--p-carousel-ps", "description": "Defines the logical inline start padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-pe`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInlineStart = '--p-carousel-ps';
+/**
+ * @css-variable {"name": "--p-carousel-pe", "description": "Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInlineEnd = '--p-carousel-pe';
 /**
  * @css-variable {"name": "--p-carousel-prev-next-filter", "description": "CSS Filter applied to the navigation (prev/next buttons)", "defaultValue": "none"}
  */
@@ -5191,6 +5215,12 @@ const mediaQueryPointerCoarse = '@media (pointer: coarse)';
 const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
+    wide: gridWideOffset,
+    full: {
+        base: gridFullOffset,
+        s: gridFullOffset,
+        xxl: gridFullOffset
+    },
 };
 const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
@@ -5306,14 +5336,17 @@ const getComponentCss$1i = (gradientColor, hasHeading, hasDescription, hasContro
         },
         header: {
             display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
+            paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+            paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
             [mediaQueryS]: {
-                gridTemplateColumns: 'minmax(0px, 1fr) auto',
-                padding: `0 ${spacingMap[width].s}`,
+                gridTemplateColumns: 'minmax(0px,1fr) auto',
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                 ...(hasNavigation && { columnGap: spacingStaticMedium }),
             },
             [mediaQueryXXL]: {
-                padding: `0 ${spacingMap[width].xxl}`,
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
             },
         },
         nav: {
@@ -5345,12 +5378,16 @@ const getComponentCss$1i = (gradientColor, hasHeading, hasDescription, hasContro
                 position: 'relative',
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
-                    padding: `0 ${spacingMap[width].base}`,
+                    paddingBlock: '0px',
+                    paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+                    paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
                     [mediaQueryS]: {
-                        padding: `0 ${spacingMap[width].s}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                     },
                     [mediaQueryXXL]: {
-                        padding: `0 ${spacingMap[width].xxl}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
                     },
                 }),
                 '&--draggable': {
@@ -5580,13 +5617,13 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    '&(input:hover),label:hover~.wrapper &(input)': {
+                    '&(input:hover),.label-wrapper:hover~.wrapper &(input)': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    '&(input:checked:hover),label:hover~.wrapper &(input:checked)': {
+                    '&(input:checked:hover),.label-wrapper:hover~.wrapper &(input:checked)': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -5594,7 +5631,7 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'label:hover~.wrapper &(input)': supportsChromiumMediaQuery({
+                    '.label-wrapper:hover~.wrapper &(input)': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -5619,26 +5656,44 @@ const getFunctionalComponentRequiredStyles = () => {
     };
 };
 
-const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme, additionalDefaultJssStyle, additionalIsShownJssStyle) => {
+const getFunctionalComponentLabelAfterStyles = (isDisabledOrLoading, additionalIsDisabledJssStyle) => {
+    return {
+        'slot[name="label-after"]': {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            ...(isDisabledOrLoading && {
+                pointerEvents: 'none',
+                opacity: '0.4', // workaround: must be opacity because color tokens would not affect e.g. slotted `popover`
+                ...additionalIsDisabledJssStyle,
+            }),
+        },
+    };
+};
+const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
     const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     return {
+        'label-wrapper': {
+            ...buildResponsiveStyles(hideLabel, (isHidden) => ({
+                ...(!isHidden && { minWidth: 'fit-content' }), // ensures label contents don't shrink to zero in grid containers
+                ...getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle),
+            })),
+            ...additionalLabelWrapperJssStyle,
+        },
         label: {
             ...textSmallStyle,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
-            justifySelf: 'flex-start', // ensures label is not getting stretched by flex or grid context of its parent
             color: isDisabledOrLoading ? disabledColor : primaryColor,
             transition: getTransition('color'), // for smooth transitions between e.g. disabled state
-            ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle)),
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
+            display: 'inline',
             '&:empty': {
                 display: 'none', // prevents outer spacing caused by parents grid gap, in case no label value is defined (although it has to be set to be a11y compliant)
             },
-            '&+&': {
+            '&:is(span)': {
                 cursor: 'unset',
-                marginTop: `-${spacingStaticXSmall}`,
                 fontSize: fontSizeTextXSmall,
                 ...(!isDisabledOrLoading && {
                     color: contrastHighColor,
@@ -5646,6 +5701,8 @@ const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme
                         color: contrastHighColorDark,
                     }),
                 }),
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXSmall}` })),
+                marginTop: `-${spacingStaticXSmall}`,
             },
             ...additionalDefaultJssStyle,
         },
@@ -5767,7 +5824,7 @@ const getComponentCss$1h = (hideLabel, state, isDisabled, isLoading, theme) => {
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
             gridArea: '1/2',
-        }, {
+        }, null, {
             paddingTop: '2px', // compensate vertical alignment
             paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
         }),
@@ -5936,6 +5993,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             ...preventFoucOfNestedElementsStyles,
             input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
@@ -5973,13 +6031,13 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    'input:hover,label:hover~.wrapper input': {
+                    'input:hover,.wrapper:has(.label-wrapper:hover) input': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                    'input:checked:hover,.wrapper:has(.label-wrapper:hover) input:checked': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -5987,7 +6045,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'input:indeterminate:hover,label:hover~.wrapper input:indeterminate': {
+                    'input:indeterminate:hover,.wrapper:has(.label-wrapper:hover) input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedHoverColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColor)),
@@ -5997,7 +6055,7 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
                             backgroundColor: 'transparent',
                         }),
                     },
-                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                    '.label-wrapper:hover~.wrapper input': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -6019,21 +6077,24 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
         },
         root: {
             display: 'grid',
-            gridTemplateColumns: 'auto minmax(0, 1fr)',
             rowGap: spacingStaticXSmall,
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
             }),
         },
         wrapper: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+        },
+        'input-wrapper': {
             ...textSmallStyle,
             minWidth: minimumTouchTargetSize,
             minHeight: minimumTouchTargetSize,
             justifyContent: 'center',
             alignItems: 'center',
+            alignSelf: 'flex-start', // in case label becomes multiline
             display: 'grid',
             gridArea: '1/1',
-            alignSelf: 'flex-start', // in case label becomes multiline
             height,
         },
         ...(isLoading && {
@@ -6049,16 +6110,13 @@ const getComponentCss$1g = (hideLabel, state, isDisabled, isLoading, compact, th
         }),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
-            gridArea: '1/2',
             ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
-        }, {
+        }, null, {
             paddingTop,
             paddingInlineStart,
         }),
         // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state, {
-            gridColumn: '1/3',
-        }),
+        ...getFunctionalComponentStateMessageStyles(theme, state, {}),
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
     });
@@ -6100,7 +6158,7 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
         ...(!isLoading &&
             hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
+                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),.label-wrapper:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',.label-wrapper:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,
@@ -6220,6 +6278,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
                     [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -6296,7 +6355,7 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, null, !disabled &&
             !readOnly &&
             hoverMediaQuery({
                 '&:hover~.wrapper': hoverStyles,
@@ -9274,6 +9333,7 @@ const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme)
                     [`${cssVarInternalOptgroupScaling}`]: scalingVar,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, scalingVar, theme),
@@ -9484,6 +9544,7 @@ const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, comp
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             // input
             ...inputStyles,
@@ -9705,7 +9766,7 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, theme) => {
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
             gridArea: '1/2',
-        }, {
+        }, null, {
             paddingTop: '2px', // compensate vertical alignment
             paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
         }),
@@ -9771,6 +9832,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
                 }),
                 display: 'block',
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             input: {
                 gridArea: '1/1',
                 borderRadius: '50%',
@@ -9827,13 +9889,13 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
                 hoverMediaQuery({
-                    'input:hover,label:hover~.wrapper input': {
+                    'input:hover,.wrapper:has(~.label-wrapper:hover) input': {
                         borderColor: uncheckedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: uncheckedHoverColorDark,
                         }),
                     },
-                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                    'input:checked:hover,.wrapper:has(~.label-wrapper:hover) input:checked': {
                         borderColor: checkedHoverColor,
                         backgroundColor: checkedHoverColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -9841,7 +9903,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
                             backgroundColor: checkedHoverColorDark,
                         }),
                     },
-                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                    '.wrapper:has(~.label-wrapper:hover) input': supportsChromiumMediaQuery({
                         transition: 'unset', // Fixes a chrome bug where transition properties are stuck on hover
                     }),
                 })),
@@ -9870,7 +9932,6 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
         wrapper: {
             ...textSmallStyle,
             display: 'grid',
-            gridArea: '1/1',
             minWidth: minimumTouchTargetSize,
             minHeight: minimumTouchTargetSize,
             justifyContent: 'center',
@@ -9893,9 +9954,7 @@ const getComponentCss$y = (disabled, loading, state, theme) => {
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, {
-            gridArea: '1/2',
-        }, {
+        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, null, null, {
             paddingTop,
             paddingInlineStart,
         }),
@@ -9908,7 +9967,7 @@ const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
 const groupRadioGroupDirectionJssStyles = {
     column: {
         flexFlow: 'column nowrap',
-        alignItems: 'stretch',
+        alignItems: 'start',
     },
     row: {
         flexFlow: 'row wrap',
@@ -9936,6 +9995,7 @@ const getComponentCss$x = (disabled, loading, hideLabel, state, compact, directi
                 }),
                 [`${cssVarInternalRadioGroupOptionScaling}`]: scalingVar,
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
@@ -9966,9 +10026,6 @@ const getComponentCss$x = (disabled, loading, hideLabel, state, compact, directi
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
             cursor: 'inherit',
-            '&:is(legend)': {
-                marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
-            },
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
@@ -10216,6 +10273,7 @@ const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, sta
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
             'slot:not([name])': {
                 display: 'grid',
@@ -10261,7 +10319,7 @@ const getButtonStyles = (isOpen, state, theme) => {
                 margin: 0,
                 padding: 0,
                 background: 'transparent',
-                border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, // using border of styled select below for label:hover selector
+                border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, // using border of styled select below for .label-wrapper:hover selector
                 borderRadius: borderRadiusSmall,
                 outline: '0',
                 cursor: 'pointer',
@@ -10575,6 +10633,7 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme)
                     [`${cssVarInternalOptgroupScaling}`]: scalingVar,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('select', isOpen, isDisabled, state, scalingVar, theme),
@@ -11986,6 +12045,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, compact, co
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             textarea: {
                 resize,
@@ -12046,7 +12106,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, compact, co
             },
             ...hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                'textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
+                'textarea:not(:disabled):not(:focus):not([readonly]):hover,.label-wrapper:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,
@@ -12220,6 +12280,7 @@ exports.getFlexCss = getComponentCss$14;
 exports.getFlexItemCss = getComponentCss$15;
 exports.getFlyoutCss = getComponentCss$13;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
+exports.getFunctionalComponentLabelAfterStyles = getFunctionalComponentLabelAfterStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentNoResultsOptionStyles = getFunctionalComponentNoResultsOptionStyles;

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.2"}]` // 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/checkbox.cjs

@@ -14,6 +14,7 @@ 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 DSRCheckbox extends react.Component {
@@ -40,7 +41,7 @@ class DSRCheckbox extends react.Component {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'checkbox';
         const style = minifyCss.minifyCss(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }