@porsche-design-system/components-react 3.27.1 → 3.27.2

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [v3.27.2] - 2025-03-20
+
+### [3.27.2-rc.0] - 2025-03-18
+
+#### Changed
+
+- `Table`: add border-bottom styles to `Table Head` to support both, empty and missing `Table Body`
+  ([#3788](https://github.com/porsche-design-system/porsche-design-system/pull/3788))
+
+#### Fixed
+
+- `Styles`: change `Gradient` color values from `rgba` to `hsla` to fix Chrome rendering bug
+  ([#3793](https://github.com/porsche-design-system/porsche-design-system/pull/3793))
+
 ### [3.27.1] - 2025-03-05
 
 ### [3.27.1-rc.0] - 2025-03-05

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.27.1",
+  "version": "v3.27.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,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.27.1"
+    "@porsche-design-system/components-js": "v3.27.2"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",

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

@@ -3278,20 +3278,22 @@ const frostedGlassStyle = {
     backdropFilter,
 };
 
-const _gradient = 'rgba(31,31,31,0.9) 0%,' +
-    'rgba(31,31,31,0.9) 20%,' +
-    'rgba(31,31,31,0.852589) 26.67%,' +
-    'rgba(32,32,32,0.768225) 33.33%,' +
-    'rgba(33,33,33,0.668116) 40%,' +
-    'rgba(34,34,34,0.557309) 46.67%,' +
-    'rgba(35,35,35,0.442691) 53.33%,' +
-    'rgba(36,36,36,0.331884) 60%,' +
-    'rgba(37,37,37,0.231775) 66.67%,' +
-    'rgba(38,38,38,0.147411) 73.33%,' +
-    'rgba(39,39,39,0.0816599) 80%,' +
-    'rgba(39,39,39,0.03551) 86.67%,' +
-    'rgba(39,39,39,0.0086472) 93.33%,' +
-    'rgba(39,39,39,0)';
+const _gradient = 'hsla(0, 0%, 0%, 0.80) 0%,' +
+    'hsla(0, 0%, 0%, 0.80) 8.1%,' +
+    'hsla(0, 0%, 0%, 0.80) 15.5%,' +
+    'hsla(0, 0%, 0%, 0.80) 22.5%,' +
+    'hsla(0, 0%, 0%, 0.78) 29%,' +
+    'hsla(0, 0%, 0%, 0.73) 35.3%,' +
+    'hsla(0, 0%, 0%, 0.67) 41.2%,' +
+    'hsla(0, 0%, 0%, 0.60) 47.1%,' +
+    'hsla(0, 0%, 0%, 0.52) 52.9%,' +
+    'hsla(0, 0%, 0%, 0.44) 58.8%,' +
+    'hsla(0, 0%, 0%, 0.33) 64.7%,' +
+    'hsla(0, 0%, 0%, 0.22) 71%,' +
+    'hsla(0, 0%, 0%, 0.12) 77.5%,' +
+    'hsla(0, 0%, 0%, 0.05) 84.5%,' +
+    'hsla(0, 0%, 0%, 0.011) 91.9%,' +
+    'hsla(0, 0%, 0%, 0)';
 
 const gradientToBottomStyle = {
     background: `linear-gradient(to bottom, ${_gradient} 100%);`,
@@ -9025,7 +9027,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -9034,7 +9036,7 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
         width: prevNextWrapperWidth,
         padding: '4px 0',
         display: 'flex',
-        alignItems: scrollIndicatorPosition === 'center' ? 'center' : 'flex-start',
+        alignItems: alignScrollIndicator === 'center' ? 'center' : 'flex-start',
     };
     return getCss({
         '@global': {
@@ -10192,6 +10194,7 @@ const getComponentCss$f = () => {
                     fontSize: fontSizeTextXSmall,
                     lineHeight: fontLineHeight,
                     fontWeight: fontWeightSemiBold,
+                    borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
                     ...hostHiddenStyles,
                 }),
             },
@@ -10209,7 +10212,6 @@ const getComponentCss$e = () => {
             ':host': {
                 display: 'table-row',
                 ...addImportantToEachRule({
-                    borderTop: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
                     borderBottom: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
                     transition: getTransition('background'),
                     ...hostHiddenStyles,

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

@@ -3276,20 +3276,22 @@ const frostedGlassStyle = {
     backdropFilter,
 };
 
-const _gradient = 'rgba(31,31,31,0.9) 0%,' +
-    'rgba(31,31,31,0.9) 20%,' +
-    'rgba(31,31,31,0.852589) 26.67%,' +
-    'rgba(32,32,32,0.768225) 33.33%,' +
-    'rgba(33,33,33,0.668116) 40%,' +
-    'rgba(34,34,34,0.557309) 46.67%,' +
-    'rgba(35,35,35,0.442691) 53.33%,' +
-    'rgba(36,36,36,0.331884) 60%,' +
-    'rgba(37,37,37,0.231775) 66.67%,' +
-    'rgba(38,38,38,0.147411) 73.33%,' +
-    'rgba(39,39,39,0.0816599) 80%,' +
-    'rgba(39,39,39,0.03551) 86.67%,' +
-    'rgba(39,39,39,0.0086472) 93.33%,' +
-    'rgba(39,39,39,0)';
+const _gradient = 'hsla(0, 0%, 0%, 0.80) 0%,' +
+    'hsla(0, 0%, 0%, 0.80) 8.1%,' +
+    'hsla(0, 0%, 0%, 0.80) 15.5%,' +
+    'hsla(0, 0%, 0%, 0.80) 22.5%,' +
+    'hsla(0, 0%, 0%, 0.78) 29%,' +
+    'hsla(0, 0%, 0%, 0.73) 35.3%,' +
+    'hsla(0, 0%, 0%, 0.67) 41.2%,' +
+    'hsla(0, 0%, 0%, 0.60) 47.1%,' +
+    'hsla(0, 0%, 0%, 0.52) 52.9%,' +
+    'hsla(0, 0%, 0%, 0.44) 58.8%,' +
+    'hsla(0, 0%, 0%, 0.33) 64.7%,' +
+    'hsla(0, 0%, 0%, 0.22) 71%,' +
+    'hsla(0, 0%, 0%, 0.12) 77.5%,' +
+    'hsla(0, 0%, 0%, 0.05) 84.5%,' +
+    'hsla(0, 0%, 0%, 0.011) 91.9%,' +
+    'hsla(0, 0%, 0%, 0)';
 
 const gradientToBottomStyle = {
     background: `linear-gradient(to bottom, ${_gradient} 100%);`,
@@ -9023,7 +9025,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -9032,7 +9034,7 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
         width: prevNextWrapperWidth,
         padding: '4px 0',
         display: 'flex',
-        alignItems: scrollIndicatorPosition === 'center' ? 'center' : 'flex-start',
+        alignItems: alignScrollIndicator === 'center' ? 'center' : 'flex-start',
     };
     return getCss({
         '@global': {
@@ -10190,6 +10192,7 @@ const getComponentCss$f = () => {
                     fontSize: fontSizeTextXSmall,
                     lineHeight: fontLineHeight,
                     fontWeight: fontWeightSemiBold,
+                    borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
                     ...hostHiddenStyles,
                 }),
             },
@@ -10207,7 +10210,6 @@ const getComponentCss$e = () => {
             ':host': {
                 display: 'table-row',
                 ...addImportantToEachRule({
-                    borderTop: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
                     borderBottom: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
                     transition: getTransition('background'),
                     ...hostHiddenStyles,