@porsche-design-system/components-react 3.28.0-rc.2 → 3.28.0-rc.3

package/CHANGELOG.md

@@ -14,6 +14,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.28.0-rc.3] - 2025-05-19
+
+### Added
+
+- `Styles`: theme for `tailwindcss` including utilities available under
+  `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';`
+  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
+
+### Changed
+
+- Partials: `getInitialStyles` removed default styles for `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `b` and `strong`
+  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
+
+#### Fixed
+
+- `Multi Select`: enable full a11y compliance
+  ([#3819](https://github.com/porsche-design-system/porsche-design-system/pull/3819))
+- Accessibility: fix ARIA live announcements of form components status messages
+  ([#3796](https://github.com/porsche-design-system/porsche-design-system/pull/3796))
+
 ## [3.28.0-rc.2] - 2025-04-23
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.28.0-rc.2",
+  "version": "3.28.0-rc.3",
   "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.28.0-rc.2"
+    "@porsche-design-system/components-js": "3.28.0-rc.3"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",
@@ -75,6 +75,9 @@
       "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
+    "./tailwindcss": {
+      "style": "./tailwind/index.css"
+    },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",
       "import": "./ag-grid/esm/index.mjs",

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

@@ -5536,8 +5536,12 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: getThemedFormStateColors('dark', state).formStateColor,
             }),
-            transition: getTransition('color'),
+            transition: `${getTransition('color')}, ${getTransition('opacity')}`,
             ...additionalDefaultJssStyle,
+            '&:empty': {
+                opacity: '0',
+                position: 'absolute',
+            },
         },
     };
 };
@@ -5644,13 +5648,112 @@ const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) => {
+    const { contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
+    return {
+        position: 'relative',
+        '&::before': {
+            // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
+            // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
+            content: '""',
+            position: 'absolute',
+            inset,
+        },
+        width: dimension,
+        height: dimension,
+        font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+        display: 'block',
+        margin: 0,
+        padding: 0,
+        WebkitAppearance: 'none', // iOS safari
+        appearance: 'none',
+        boxSizing: 'content-box',
+        background,
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+        border: `${borderWidthBase} solid ${uncheckedColor}`,
+        outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+        ...(disabledOrLoading
+            ? {
+                pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+            }
+            : {
+                cursor: 'pointer',
+            }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: uncheckedColorDark,
+        }),
+        gridArea: '1/1',
+        borderRadius: borderRadiusSmall,
+        ...addImportantToEachRule({
+            backgroundSize: 'cover',
+        }),
+    };
+};
+
 const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
+const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    return {
+        borderColor: checkedColor,
+        backgroundColor: checkedColor,
+        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            borderColor: checkedColorDark,
+            backgroundColor: checkedColorDark,
+        }),
+        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+        ...(isHighContrastMode &&
+            getSchemedHighContrastMediaQuery({
+                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+            }, {
+                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+            })),
+    };
+};
+
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
 const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
@@ -5675,8 +5778,6 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
             : formStateColorDark || primaryColorDark;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
-    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(disabledOrLoading ? disabledColorDark : formStateColor || primaryColor);
     const indeterminateIconColorDark = escapeHashCharacter(formStateColorDark || primaryColorDark);
     const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
@@ -5684,18 +5785,11 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
     const background = `transparent 0% 0% / ${fontLineHeight}`;
     const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
     const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
-    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
     const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
-    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
-    // Scales proportionally with the line height and the scaling factor.
     const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
     const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
     const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
-    // Adjusts padding to maintain consistent spacing when the checkbox is smaller than the minimum touch target size.
-    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
     const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
-    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
     const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the checkbox, whichever is larger.
     return getCss({
         '@global': {
@@ -5707,44 +5801,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            input: {
-                position: 'relative',
-                '&::before': {
-                    // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
-                    // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
-                    content: '""',
-                    position: 'absolute',
-                    inset,
-                },
-                width: dimension,
-                height: dimension,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-                display: 'block',
-                margin: 0,
-                padding: 0,
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                boxSizing: 'content-box',
-                background,
-                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                border: `${borderWidthBase} solid ${uncheckedColor}`,
-                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
-                ...(disabledOrLoading
-                    ? {
-                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
-                    }
-                    : {
-                        cursor: 'pointer',
-                    }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: uncheckedColorDark,
-                }),
-                gridArea: '1/1',
-                borderRadius: borderRadiusSmall,
-                ...addImportantToEachRule({
-                    backgroundSize: 'cover',
-                }),
-            },
+            input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
                 ? {
                     'input:checked': {
@@ -5758,23 +5815,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                     },
                 }
                 : {
-                    'input:checked': {
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
-                        ...(isHighContrastMode &&
-                            getSchemedHighContrastMediaQuery({
-                                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
-                            }, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
-                            })),
-                    },
+                    'input:checked': getCheckboxCheckedBaseStyles(theme, isDisabled, isLoading, state),
                     'input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
@@ -7609,12 +7650,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
                     borderColor: primaryColorDark,
                 }),
             },
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
+            ...(!disabled &&
+                !readOnly &&
+                hoverMediaQuery({
                     '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
-                }),
-            }),
+                })),
             ...(disabled && {
                 cursor: 'not-allowed',
                 color: disabledColor,
@@ -7643,14 +7683,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
-                    '&:hover~.wrapper': hoverStyles,
-                }),
-            }),
-        }),
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+            !readOnly &&
+            hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            })),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
     });
@@ -7692,12 +7729,12 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
-        icon: {
-            ...(isPrimary &&
-                !isHighContrastMode && {
+        ...(isPrimary &&
+            !isHighContrastMode && {
+            icon: {
                 filter: 'invert(1)',
-            }),
-        },
+            },
+        }),
     }, hasSlottedAnchor && {
         ...(isHighContrastMode && {
             root: {
@@ -8580,7 +8617,10 @@ optionHeight, theme) => {
     };
 };
 
-const getComponentCss$D = (theme) => {
+const getComponentCss$D = (theme, isDisabled, selected) => {
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
     return getCss({
         '@global': {
             ':host': {
@@ -8590,11 +8630,19 @@ const getComponentCss$D = (theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                display: 'block',
+                paddingTop,
+            },
+        },
+        option: {
+            ...getOptionJssStyle('multi-select-option', 1, theme),
+            columnGap: '8px',
         },
-        option: getOptionJssStyle('multi-select-option', 1, theme),
         checkbox: {
-            pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
+            flexShrink: 0,
+            ...getCheckboxBaseStyles(theme, isDisabled),
+            ...(selected && getCheckboxCheckedBaseStyles(theme, isDisabled)),
         },
     });
 };

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

@@ -3449,10 +3449,6 @@ function debounce(fn, ms = 800) {
     };
 }
 
-const getRole = (state) => {
-    return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
-};
-
 const isWithinForm = (host) => !!getClosestHTMLElement(host, 'form');
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
@@ -3955,7 +3951,6 @@ exports.getInlineNotificationIconName = getInlineNotificationIconName;
 exports.getInnerManifest = getInnerManifest;
 exports.getListAriaAttributes = getListAriaAttributes;
 exports.getOptionAriaAttributes = getOptionAriaAttributes;
-exports.getRole = getRole;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getSelectedOptionString = getSelectedOptionString;

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

@@ -1,9 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
@@ -14,9 +13,9 @@ class DSRMultiSelectOption extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted } = this.props;
-        this.props.disabled || this.props.disabledParent;
-        minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme));
+        const { theme = 'light', selected: isSelected, highlighted } = this.props;
+        const isDisabled = this.props.disabled || this.props.disabledParent;
+        minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme, isDisabled, isSelected));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
     }
 }

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

@@ -3,13 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 require('../../provider.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 const messageId = 'message';
 const StateMessage = ({ hasMessage, state, message, theme }) => {
     const isErrorState = state === 'error';
-    return (hasMessage && (jsxRuntime.jsxs("span", { id: messageId, className: "message", role: utilsEntry.getRole(state), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }), message || jsxRuntime.jsx("slot", { name: "message" })] })));
+    return (
+    // needs to be rendered always to have correct behaviour for screen readers
+    jsxRuntime.jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && [
+            jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }),
+            message || jsxRuntime.jsx("slot", { name: "message" }),
+        ] }));
 };
 
 exports.StateMessage = StateMessage;

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

@@ -5534,8 +5534,12 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: getThemedFormStateColors('dark', state).formStateColor,
             }),
-            transition: getTransition('color'),
+            transition: `${getTransition('color')}, ${getTransition('opacity')}`,
             ...additionalDefaultJssStyle,
+            '&:empty': {
+                opacity: '0',
+                position: 'absolute',
+            },
         },
     };
 };
@@ -5642,13 +5646,112 @@ const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) => {
+    const { contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
+    return {
+        position: 'relative',
+        '&::before': {
+            // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
+            // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
+            content: '""',
+            position: 'absolute',
+            inset,
+        },
+        width: dimension,
+        height: dimension,
+        font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+        display: 'block',
+        margin: 0,
+        padding: 0,
+        WebkitAppearance: 'none', // iOS safari
+        appearance: 'none',
+        boxSizing: 'content-box',
+        background,
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+        border: `${borderWidthBase} solid ${uncheckedColor}`,
+        outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+        ...(disabledOrLoading
+            ? {
+                pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+            }
+            : {
+                cursor: 'pointer',
+            }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: uncheckedColorDark,
+        }),
+        gridArea: '1/1',
+        borderRadius: borderRadiusSmall,
+        ...addImportantToEachRule({
+            backgroundSize: 'cover',
+        }),
+    };
+};
+
 const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
+const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    return {
+        borderColor: checkedColor,
+        backgroundColor: checkedColor,
+        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            borderColor: checkedColorDark,
+            backgroundColor: checkedColorDark,
+        }),
+        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+        ...(isHighContrastMode &&
+            getSchemedHighContrastMediaQuery({
+                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+            }, {
+                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+            })),
+    };
+};
+
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
 const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
@@ -5673,8 +5776,6 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
             : formStateColorDark || primaryColorDark;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
-    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(disabledOrLoading ? disabledColorDark : formStateColor || primaryColor);
     const indeterminateIconColorDark = escapeHashCharacter(formStateColorDark || primaryColorDark);
     const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
@@ -5682,18 +5783,11 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
     const background = `transparent 0% 0% / ${fontLineHeight}`;
     const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
     const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
-    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
     const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
-    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
-    // Scales proportionally with the line height and the scaling factor.
     const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
     const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
     const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
-    // Adjusts padding to maintain consistent spacing when the checkbox is smaller than the minimum touch target size.
-    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
     const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
-    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
     const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the checkbox, whichever is larger.
     return getCss({
         '@global': {
@@ -5705,44 +5799,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            input: {
-                position: 'relative',
-                '&::before': {
-                    // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
-                    // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
-                    content: '""',
-                    position: 'absolute',
-                    inset,
-                },
-                width: dimension,
-                height: dimension,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-                display: 'block',
-                margin: 0,
-                padding: 0,
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                boxSizing: 'content-box',
-                background,
-                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                border: `${borderWidthBase} solid ${uncheckedColor}`,
-                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
-                ...(disabledOrLoading
-                    ? {
-                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
-                    }
-                    : {
-                        cursor: 'pointer',
-                    }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: uncheckedColorDark,
-                }),
-                gridArea: '1/1',
-                borderRadius: borderRadiusSmall,
-                ...addImportantToEachRule({
-                    backgroundSize: 'cover',
-                }),
-            },
+            input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
                 ? {
                     'input:checked': {
@@ -5756,23 +5813,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                     },
                 }
                 : {
-                    'input:checked': {
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
-                        ...(isHighContrastMode &&
-                            getSchemedHighContrastMediaQuery({
-                                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
-                            }, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
-                            })),
-                    },
+                    'input:checked': getCheckboxCheckedBaseStyles(theme, isDisabled, isLoading, state),
                     'input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
@@ -7607,12 +7648,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
                     borderColor: primaryColorDark,
                 }),
             },
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
+            ...(!disabled &&
+                !readOnly &&
+                hoverMediaQuery({
                     '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
-                }),
-            }),
+                })),
             ...(disabled && {
                 cursor: 'not-allowed',
                 color: disabledColor,
@@ -7641,14 +7681,11 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
-                    '&:hover~.wrapper': hoverStyles,
-                }),
-            }),
-        }),
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+            !readOnly &&
+            hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            })),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
     });
@@ -7690,12 +7727,12 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
-        icon: {
-            ...(isPrimary &&
-                !isHighContrastMode && {
+        ...(isPrimary &&
+            !isHighContrastMode && {
+            icon: {
                 filter: 'invert(1)',
-            }),
-        },
+            },
+        }),
     }, hasSlottedAnchor && {
         ...(isHighContrastMode && {
             root: {
@@ -8578,7 +8615,10 @@ optionHeight, theme) => {
     };
 };
 
-const getComponentCss$D = (theme) => {
+const getComponentCss$D = (theme, isDisabled, selected) => {
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
     return getCss({
         '@global': {
             ':host': {
@@ -8588,11 +8628,19 @@ const getComponentCss$D = (theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                display: 'block',
+                paddingTop,
+            },
+        },
+        option: {
+            ...getOptionJssStyle('multi-select-option', 1, theme),
+            columnGap: '8px',
         },
-        option: getOptionJssStyle('multi-select-option', 1, theme),
         checkbox: {
-            pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
+            flexShrink: 0,
+            ...getCheckboxBaseStyles(theme, isDisabled),
+            ...(selected && getCheckboxCheckedBaseStyles(theme, isDisabled)),
         },
     });
 };

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

@@ -3447,10 +3447,6 @@ function debounce(fn, ms = 800) {
     };
 }
 
-const getRole = (state) => {
-    return state === 'error' ? 'alert' : state === 'success' ? 'status' : null;
-};
-
 const isWithinForm = (host) => !!getClosestHTMLElement(host, 'form');
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
@@ -3916,4 +3912,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getMultiSelectOptionCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
@@ -12,9 +11,9 @@ class DSRMultiSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted } = this.props;
-        this.props.disabled || this.props.disabledParent;
-        minifyCss(getComponentCss$D(theme));
+        const { theme = 'light', selected: isSelected, highlighted } = this.props;
+        const isDisabled = this.props.disabled || this.props.disabledParent;
+        minifyCss(getComponentCss$D(theme, isDisabled, isSelected));
         return (jsx(Fragment, {}));
     }
 }

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

@@ -1,13 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import 'react';
 import '../../provider.mjs';
-import { getRole } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 const messageId = 'message';
 const StateMessage = ({ hasMessage, state, message, theme }) => {
     const isErrorState = state === 'error';
-    return (hasMessage && (jsxs("span", { id: messageId, className: "message", role: getRole(state), children: [jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }), message || jsx("slot", { name: "message" })] })));
+    return (
+    // needs to be rendered always to have correct behaviour for screen readers
+    jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && [
+            jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'notification-error' : 'notification-success', theme: theme, "aria-hidden": "true" }),
+            message || jsx("slot", { name: "message" }),
+        ] }));
 };
 
 export { StateMessage, messageId };

package/tailwind/index.css

@@ -0,0 +1,348 @@
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-primary: #010205;
+  --color-base: #fff;
+  --color-surface: #eeeff2;
+  --color-shading: rgba(1, 2, 5, 0.67);
+  --color-frosted: hsla(240, 4%, 85%, 0.35);
+  --color-contrast-low: #d8d8db;
+  --color-contrast-medium: #6b6d70;
+  --color-contrast-high: #535457;
+  --color-success: #197e10;
+  --color-success-soft: #e4ffec;
+  --color-warning: #f3be00;
+  --color-warning-soft: #fff4d2;
+  --color-error: #cc1922;
+  --color-error-soft: #ffe2e4;
+  --color-info: #2762ec;
+  --color-info-soft: #d3e1ff;
+  --color-hover: rgba(148, 149, 152, 0.18);
+  --color-active: rgba(148, 149, 152, 0.2);
+  --color-focus: #1a44ea;
+  --color-disabled: #949598;
+  --color-skeleton: #f7f7f7;
+  --color-primary-light: #010205;
+  --color-base-light: #fff;
+  --color-surface-light: #eeeff2;
+  --color-shading-light: rgba(1, 2, 5, 0.67);
+  --color-frosted-light: hsla(240, 4%, 85%, 0.35);
+  --color-contrast-low-light: #d8d8db;
+  --color-contrast-medium-light: #6b6d70;
+  --color-contrast-high-light: #535457;
+  --color-success-light: #197e10;
+  --color-success-soft-light: #e4ffec;
+  --color-warning-light: #f3be00;
+  --color-warning-soft-light: #fff4d2;
+  --color-error-light: #cc1922;
+  --color-error-soft-light: #ffe2e4;
+  --color-info-light: #2762ec;
+  --color-info-soft-light: #d3e1ff;
+  --color-hover-light: rgba(148, 149, 152, 0.18);
+  --color-active-light: rgba(148, 149, 152, 0.2);
+  --color-focus-light: #1a44ea;
+  --color-disabled-light: #949598;
+  --color-skeleton-light: #f7f7f7;
+  --color-primary-dark: #fbfcff;
+  --color-base-dark: #0e0e12;
+  --color-surface-dark: #212225;
+  --color-shading-dark: rgba(38, 38, 41, 0.67);
+  --color-frosted-dark: hsla(240, 3%, 26%, 0.35);
+  --color-contrast-low-dark: #404044;
+  --color-contrast-medium-dark: #88898c;
+  --color-contrast-high-dark: #afb0b3;
+  --color-success-dark: #09d087;
+  --color-success-soft-dark: #003320;
+  --color-warning-dark: #f7cb47;
+  --color-warning-soft-dark: #362b0a;
+  --color-error-dark: #fc4040;
+  --color-error-soft-dark: #3a0f0f;
+  --color-info-dark: #178bff;
+  --color-info-soft-dark: #04294e;
+  --color-hover-dark: rgba(148, 149, 152, 0.18);
+  --color-active-dark: rgba(126, 127, 130, 0.2);
+  --color-focus-dark: #1a44ea;
+  --color-disabled-dark: #7e7f82;
+  --color-skeleton-dark: #1a1b1e;
+  --font-porsche-next: Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --leading-normal: calc(6px + 2.125ex);
+  --text-2xs: 0.75rem;
+  --text-2xs--line-height: calc(6px + 2.125ex);
+  --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
+  --text-xs--line-height: calc(6px + 2.125ex);
+  --text-base: 1rem;
+  --text-base--line-height: calc(6px + 2.125ex);
+  --text-sm: 1rem;
+  --text-sm--line-height: calc(6px + 2.125ex);
+  --text-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
+  --text-md--line-height: calc(6px + 2.125ex);
+  --text-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
+  --text-lg--line-height: calc(6px + 2.125ex);
+  --text-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
+  --text-xl--line-height: calc(6px + 2.125ex);
+  --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
+  --text-2xl--line-height: calc(6px + 2.125ex);
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 760px;
+  --breakpoint-md: 1000px;
+  --breakpoint-lg: 1300px;
+  --breakpoint-xl: 1760px;
+  --breakpoint-2xl: 1920px;
+  --spacing: 0.25rem;
+  --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
+  --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
+  --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
+  --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
+  --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
+  --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
+  --spacing-static-xs: 4px;
+  --spacing-static-sm: 8px;
+  --spacing-static-md: 16px;
+  --spacing-static-lg: 32px;
+  --spacing-static-xl: 48px;
+  --spacing-static-2xl: 80px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --default-border-width: 2px;
+  --border-width-thin: 1px;
+  --blur-frosted: 32px;
+  --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
+  --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
+  --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
+  --default-outline-width: 2px;
+  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
+  --default-transition-duration: 0.25s;
+  --transition-duration-short: 0.25s;
+  --transition-duration-moderate: 0.4s;
+  --transition-duration-long: 0.6s;
+  --transition-duration-very-long: 1.2s;
+  --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
+  @keyframes skeleton {
+    from {
+      background-position-x: 100%;
+    }
+    to {
+      background-position-x: -100%;
+    }
+  }
+}
+@layer theme {
+  .light {
+    --color-primary: #010205;
+    --color-base: #fff;
+    --color-surface: #eeeff2;
+    --color-shading: rgba(1, 2, 5, 0.67);
+    --color-frosted: hsla(240, 4%, 85%, 0.35);
+    --color-contrast-low: #d8d8db;
+    --color-contrast-medium: #6b6d70;
+    --color-contrast-high: #535457;
+    --color-success: #197e10;
+    --color-success-soft: #e4ffec;
+    --color-warning: #f3be00;
+    --color-warning-soft: #fff4d2;
+    --color-error: #cc1922;
+    --color-error-soft: #ffe2e4;
+    --color-info: #2762ec;
+    --color-info-soft: #d3e1ff;
+    --color-hover: rgba(148, 149, 152, 0.18);
+    --color-active: rgba(148, 149, 152, 0.2);
+    --color-focus: #1a44ea;
+    --color-disabled: #949598;
+    --color-skeleton: #f7f7f7;
+  }
+  .dark {
+    --color-primary: #fbfcff;
+    --color-base: #0e0e12;
+    --color-surface: #212225;
+    --color-shading: rgba(38, 38, 41, 0.67);
+    --color-frosted: hsla(240, 3%, 26%, 0.35);
+    --color-contrast-low: #404044;
+    --color-contrast-medium: #88898c;
+    --color-contrast-high: #afb0b3;
+    --color-success: #09d087;
+    --color-success-soft: #003320;
+    --color-warning: #f7cb47;
+    --color-warning-soft: #362b0a;
+    --color-error: #fc4040;
+    --color-error-soft: #3a0f0f;
+    --color-info: #178bff;
+    --color-info-soft: #04294e;
+    --color-hover: rgba(148, 149, 152, 0.18);
+    --color-active: rgba(126, 127, 130, 0.2);
+    --color-focus: #1a44ea;
+    --color-disabled: #7e7f82;
+    --color-skeleton: #1a1b1e;
+  }
+  @media (prefers-color-scheme: dark) {
+    .auto {
+      --color-primary: #fbfcff;
+      --color-base: #0e0e12;
+      --color-surface: #212225;
+      --color-shading: rgba(38, 38, 41, 0.67);
+      --color-frosted: hsla(240, 3%, 26%, 0.35);
+      --color-contrast-low: #404044;
+      --color-contrast-medium: #88898c;
+      --color-contrast-high: #afb0b3;
+      --color-success: #09d087;
+      --color-success-soft: #003320;
+      --color-warning: #f7cb47;
+      --color-warning-soft: #362b0a;
+      --color-error: #fc4040;
+      --color-error-soft: #3a0f0f;
+      --color-info: #178bff;
+      --color-info-soft: #04294e;
+      --color-hover: rgba(148, 149, 152, 0.18);
+      --color-active: rgba(126, 127, 130, 0.2);
+      --color-focus: #1a44ea;
+      --color-disabled: #7e7f82;
+      --color-skeleton: #1a1b1e;
+    }
+  }
+}
+@utility bg-fade-to-t {
+  @apply bg-linear-[to_top,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
+}
+@utility bg-fade-to-r {
+  @apply bg-linear-[to_right,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
+}
+@utility bg-fade-to-b {
+  @apply bg-linear-[to_bottom,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
+}
+@utility bg-fade-to-l {
+  @apply bg-linear-[to_left,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
+}
+@utility grid-template {
+  @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
+    [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
+    grid
+    grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
+    gap-(--spacing-fluid-md)
+    min-w-[var(--pds-internal-grid-width-min,320px)]
+    max-w-[var(--pds-internal-grid-width-max,2560px)]
+    box-content
+    mx-(--pds-internal-grid-margin,0)
+    px-[calc(50%-var(--pds-internal-grid-margin,0px)-2560px/2)]
+    sm:[--pds-internal-grid-safe-zone:calc(5vw-16px)]
+    sm:grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start]_minmax(0,1fr)_[extended-start]_minmax(0,1fr)_[basic-start]_repeat(2,minmax(0,1fr))_[narrow-start]_repeat(8,minmax(0,1fr))_[narrow-end]_repeat(2,minmax(0,1fr))_[basic-end]_minmax(0,1fr)_[extended-end]_minmax(0,1fr)_[wide-end]_var(--_pds-grid-col)[full-end]]
+    2xl:[--pds-internal-grid-safe-zone:min(50vw-880px,400px)];
+}
+@utility col-narrow {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-[narrow];
+}
+@utility col-start-narrow {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-start-[narrow-start];
+}
+@utility col-end-narrow {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-end-[narrow-end];
+}
+@utility col-basic {
+  @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-[basic];
+}
+@utility col-start-basic {
+  @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-start-[basic-start];
+}
+@utility col-end-basic {
+  @apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-end-[basic-end];
+}
+@utility col-extended {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-[extended];
+}
+@utility col-start-extended {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-start-[extended-start];
+}
+@utility col-end-extended {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-end-[extended-end];
+}
+@utility col-wide {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-[wide];
+}
+@utility col-start-wide {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-start-[wide-start];
+}
+@utility col-end-wide {
+  @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-end-[wide-end];
+}
+@utility col-full {
+  @apply col-[full];
+}
+@utility col-start-full {
+  @apply col-start-[full-start];
+}
+@utility col-end-full {
+  @apply col-end-[full-end];
+}
+@utility col-span-one-half {
+  @apply col-span-(--_pds-grid-one-half,1);
+}
+@utility col-span-one-third {
+  @apply col-span-(--_pds-grid-one-third,1);
+}
+@utility col-span-two-thirds {
+  @apply col-span-(--_pds-grid-two-thirds,1);
+}
+@utility skeleton {
+  @apply animate-skeleton;
+  @apply block rounded-sm;
+  @apply bg-surface bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
+}
+@utility skeleton-light {
+  @apply animate-skeleton;
+  @apply block rounded-sm;
+  @apply bg-surface-light bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-light)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
+}
+@utility skeleton-dark {
+  @apply animate-skeleton;
+  @apply block rounded-sm;
+  @apply bg-surface-dark bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-dark)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
+}
+@utility prose-text-2xs {
+  @apply font-porsche-next not-italic font-normal text-2xs text-primary;
+}
+@utility prose-text-xs {
+  @apply font-porsche-next not-italic font-normal text-xs text-primary;
+}
+@utility prose-text-sm {
+  @apply font-porsche-next not-italic font-normal text-sm text-primary;
+}
+@utility prose-text-md {
+  @apply font-porsche-next not-italic font-normal text-md text-primary;
+}
+@utility prose-text-lg {
+  @apply font-porsche-next not-italic font-normal text-lg text-primary;
+}
+@utility prose-text-xl {
+  @apply font-porsche-next not-italic font-normal text-xl text-primary;
+}
+@utility prose-heading-sm {
+  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
+}
+@utility prose-heading-md {
+  @apply font-porsche-next not-italic font-semibold text-md text-primary;
+}
+@utility prose-heading-lg {
+  @apply font-porsche-next not-italic font-semibold text-lg text-primary;
+}
+@utility prose-heading-xl {
+  @apply font-porsche-next not-italic font-semibold text-xl text-primary;
+}
+@utility prose-heading-2xl {
+  @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
+}
+@utility prose-display-sm {
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
+  font-size: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+}
+@utility prose-display-md {
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
+  font-size: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+}
+@utility prose-display-lg {
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary;
+  font-size: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
+}