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

package/CHANGELOG.md

@@ -14,6 +14,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.12.0] - 2024-02-12
+
+### [3.12.0-rc.1] - 2024-02-08
+
+#### Fixed
+
+- `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when 
+  used in another Shadow DOM or changed programmatically ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028))
+
 ### [3.12.0-rc.0] - 2024-02-05
 
 #### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.12.0-rc.0",
+  "version": "3.12.0",
   "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.12.0-rc.0"
+    "@porsche-design-system/components-js": "3.12.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

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

@@ -5247,7 +5247,7 @@ const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
                         gridArea: '1/1',
                         borderRadius: borderRadiusSmall,
                     },
-                    // TODO: is it somehow useful possible to make following styles configurable by paramter?
+                    // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
                             backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
@@ -6319,6 +6319,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
+    const animationName = `${isDark ? keyFramesDark : keyFramesLight}-${color}`;
     return getCss({
         '@global': {
             ':host': {
@@ -6345,7 +6346,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
                         }, {
                             filter: filterMap.dark[color],
                         })),
-                    WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight}-${color} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
+                    WebkitAnimation: `${animationName} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically
                 }),
                 ...(isSizeInherit
                     ? {
@@ -6364,7 +6365,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
                 }),
             },
             ...(!isColorInherit && {
-                [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}-${color}`]: forceRerenderAnimationStyle,
+                [`@keyframes ${animationName}`]: forceRerenderAnimationStyle,
             }),
         },
     });

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

@@ -5245,7 +5245,7 @@ const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
                         gridArea: '1/1',
                         borderRadius: borderRadiusSmall,
                     },
-                    // TODO: is it somehow useful possible to make following styles configurable by paramter?
+                    // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
                             backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
@@ -6317,6 +6317,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
+    const animationName = `${isDark ? keyFramesDark : keyFramesLight}-${color}`;
     return getCss({
         '@global': {
             ':host': {
@@ -6343,7 +6344,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
                         }, {
                             filter: filterMap.dark[color],
                         })),
-                    WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight}-${color} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
+                    WebkitAnimation: `${animationName} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically
                 }),
                 ...(isSizeInherit
                     ? {
@@ -6362,7 +6363,7 @@ const getComponentCss$I = (name, source, color, size, theme) => {
                 }),
             },
             ...(!isColorInherit && {
-                [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}-${color}`]: forceRerenderAnimationStyle,
+                [`@keyframes ${animationName}`]: forceRerenderAnimationStyle,
             }),
         },
     });