@porsche-design-system/components-react 4.2.0 → 4.3.0

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

@@ -1,29 +1,26 @@
-const palette = {
-    dark: {
-        grey: {
-            '950': 'hsl(225 100% 99%)',
-            '100a': 'hsl(240 3.7% 26.5% / 0.154)',
-            '200a': 'hsl(240 2% 43% / 0.228)'},
-    },
-};
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const blurFrosted = '--p-blur-frosted';
 
-/** Holds the **frosted** color (dark), typically used as a background in combination with a blur effect. */
-const colorFrostedDark = palette.dark.grey['200a'];
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radius2Xl = '--p-radius-2xl';
 
-/** Holds the **frosted-soft** color (dark), typically used as a background `:hover`. */
-const colorFrostedSoftDark = palette.dark.grey['100a'];
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radius3Xl = '--p-radius-3xl';
 
-/** Holds the **primary** color (dark), typically used for text. */
-const colorPrimaryDark = palette.dark.grey["950"];
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radiusFull = '--p-radius-full';
 
-/** Holds the **small static** spacing. */
-const spacingStaticSm$1 = '8px';
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radiusLg = '--p-radius-lg';
 
-/** Holds the **x-small static** spacing. */
-const spacingStaticXs$1 = '4px';
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radiusMd = '--p-radius-md';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const blurFrosted = '--p-blur-frosted';
+const radiusSm = '--p-radius-sm';
+
+// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
+const radiusXl = '--p-radius-xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
 const colorFocus = '--p-color-focus';
@@ -116,118 +113,97 @@ const colorWarningFrostedSoft = '--p-color-warning-frosted-soft';
 const colorWarningMedium = '--p-color-warning-medium';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const durationLg = '--p-duration-lg';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const durationMd$1 = '--p-duration-md';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const durationSm = '--p-duration-sm';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const durationXl = '--p-duration-xl';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const easeIn$1 = '--p-ease-in';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const easeInOut = '--p-ease-in-out';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const easeOut$1 = '--p-ease-out';
-
-// AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radius2Xl = '--p-radius-2xl';
+const fontPorscheNext$1 = '--p-font-porsche-next';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radius3Xl = '--p-radius-3xl';
+const leadingNormal$1 = '--p-leading-normal';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radiusFull = '--p-radius-full';
+const typescale2Xl = '--p-typescale-2xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radiusLg = '--p-radius-lg';
+const typescale2Xs = '--p-typescale-2xs';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radiusMd = '--p-radius-md';
+const typescale3Xl = '--p-typescale-3xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radiusSm = '--p-radius-sm';
+const typescale4Xl = '--p-typescale-4xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const radiusXl = '--p-radius-xl';
+const typescale5Xl = '--p-typescale-5xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const shadowLg = '--p-shadow-lg';
+const typescaleLg = '--p-typescale-lg';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingFluidLg = '--p-spacing-fluid-lg';
+const typescaleMd = '--p-typescale-md';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingFluidMd$1 = '--p-spacing-fluid-md';
+const typescaleSm$1 = '--p-typescale-sm';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingFluidSm = '--p-spacing-fluid-sm';
+const typescaleXl = '--p-typescale-xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingFluidXs = '--p-spacing-fluid-xs';
+const typescaleXs$1 = '--p-typescale-xs';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingStatic2Xs = '--p-spacing-static-2xs';
+const fontWeightBold = '--p-font-weight-bold';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingStaticMd = '--p-spacing-static-md';
+const fontWeightNormal$1 = '--p-font-weight-normal';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingStaticSm = '--p-spacing-static-sm';
+const fontWeightSemibold = '--p-font-weight-semibold';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const spacingStaticXs = '--p-spacing-static-xs';
+const durationLg = '--p-duration-lg';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const fontPorscheNext$1 = '--p-font-porsche-next';
+const durationMd$1 = '--p-duration-md';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const leadingNormal$1 = '--p-leading-normal';
+const durationSm = '--p-duration-sm';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescale2Xl = '--p-typescale-2xl';
+const durationXl = '--p-duration-xl';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescale2Xs = '--p-typescale-2xs';
+const easeIn$1 = '--p-ease-in';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescale3Xl = '--p-typescale-3xl';
+const easeInOut = '--p-ease-in-out';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescale4Xl = '--p-typescale-4xl';
+const easeOut$1 = '--p-ease-out';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescale5Xl = '--p-typescale-5xl';
+const shadowLg = '--p-shadow-lg';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescaleLg = '--p-typescale-lg';
+const spacingFluidLg = '--p-spacing-fluid-lg';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescaleMd = '--p-typescale-md';
+const spacingFluidMd$1 = '--p-spacing-fluid-md';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescaleSm$1 = '--p-typescale-sm';
+const spacingFluidSm = '--p-spacing-fluid-sm';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescaleXl = '--p-typescale-xl';
+const spacingFluidXs = '--p-spacing-fluid-xs';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const typescaleXs$1 = '--p-typescale-xs';
+const spacingStatic2Xs = '--p-spacing-static-2xs';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const fontWeightBold = '--p-font-weight-bold';
+const spacingStaticMd = '--p-spacing-static-md';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const fontWeightNormal$1 = '--p-font-weight-normal';
+const spacingStaticSm$1 = '--p-spacing-static-sm';
 
 // AUTO-GENERATED by scripts/buildCssVariableConstants.ts — do not edit by hand.
-const fontWeightSemibold = '--p-font-weight-semibold';
+const spacingStaticXs$1 = '--p-spacing-static-xs';
 
 // Wraps a bare CSS custom property name
 // (e.g. `--p-color-canvas`, exported as a plain literal const) into a CSS
@@ -3871,7 +3847,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.2.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.3.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4217,8 +4193,8 @@ const getComponentCss$19 = () => {
                 display: 'flex',
                 alignItems: 'center',
                 gap: '2px',
-                padding: `0 ${ref(spacingStaticSm)} 0 ${ref(spacingStaticXs)}`,
-                borderRadius: `calc(${ref(spacingStaticXs)} + (${ref(leadingNormal$1)} / 2))`, // ensures pill shape has a maximum border radius to support multiline.
+                padding: `0 ${ref(spacingStaticSm$1)} 0 ${ref(spacingStaticXs$1)}`,
+                borderRadius: `calc(${ref(spacingStaticXs$1)} + (${ref(leadingNormal$1)} / 2))`, // ensures pill shape has a maximum border radius to support multiline.
                 fontSize: ref(typescale2Xs),
                 color: ref(colorContrastHigh),
                 background: ref(colorFrostedStrong),
@@ -4325,7 +4301,7 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
             'slot:not([name]),slot[name="description"],p': {
                 all: 'unset',
                 gridArea: hasHeadingOrHeadingSlot ? '2/2' : '1/2',
-                marginTop: hasHeadingOrHeadingSlot ? ref(spacingStaticXs) : '0px',
+                marginTop: hasHeadingOrHeadingSlot ? ref(spacingStaticXs$1) : '0px',
                 font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
                 color: ref(colorPrimary),
             },
@@ -4333,7 +4309,7 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
         notification: {
             display: 'grid',
             gridTemplate: `repeat(3, auto) / auto minmax(0, 1fr) repeat(2, auto)`,
-            padding: `calc(${ref(spacingStaticSm)} + ${ref(spacingFluidSm)})`,
+            padding: `calc(${ref(spacingStaticSm$1)} + ${ref(spacingFluidSm)})`,
             borderRadius: ref(radius2Xl),
             background: notificationBackgroundMap[state],
             WebkitBackdropFilter: ref(blurFrosted),
@@ -4349,7 +4325,7 @@ const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismi
                     content: '""',
                     width: '1.5rem',
                     height: '1.5rem',
-                    marginInlineEnd: ref(spacingStaticSm),
+                    marginInlineEnd: ref(spacingStaticSm$1),
                     background: notificationColorMap[state],
                     WebkitMask: `${notificationIconMap[state]} center/contain no-repeat`, // necessary for Sogou browser support :-)
                     mask: `${notificationIconMap[state]} center/contain no-repeat`,
@@ -4509,7 +4485,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             textDecoration: underline ? 'underline' : 'none',
             font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)}/${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
             ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
-                gap: hidelabelValue ? 0 : ref(spacingStaticXs),
+                gap: hidelabelValue ? 0 : ref(spacingStaticXs$1),
             })), buildResponsiveStyles(stretch, (stretchValue) => ({
                 justifyContent: stretchValue ? 'space-between' : 'flex-start',
                 alignItems: stretchValue ? 'center' : 'flex-start',
@@ -4892,6 +4868,30 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
     }));
 };
 
+const palette = {
+    dark: {
+        grey: {
+            '950': 'hsl(225 100% 99%)',
+            '100a': 'hsl(240 3.7% 26.5% / 0.154)',
+            '200a': 'hsl(240 2% 43% / 0.228)'},
+    },
+};
+
+/** Holds the **frosted** color (dark), typically used as a background in combination with a blur effect. */
+const colorFrostedDark = palette.dark.grey['200a'];
+
+/** Holds the **frosted-soft** color (dark), typically used as a background `:hover`. */
+const colorFrostedSoftDark = palette.dark.grey['100a'];
+
+/** Holds the **primary** color (dark), typically used for text. */
+const colorPrimaryDark = palette.dark.grey["950"];
+
+/** Holds the **small static** spacing. */
+const spacingStaticSm = '8px';
+
+/** Holds the **x-small static** spacing. */
+const spacingStaticXs = '4px';
+
 /**
  * @css-variable {"name": "--p-canvas-sidebar-start-width", "description": "Width of the sidebar start.", "defaultValue": "320px"}
  */
@@ -4970,7 +4970,7 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             },
             h2: {
                 all: 'unset',
-                padding: spacingStaticXs$1, // preserve enough spacing for focus state
+                padding: spacingStaticXs, // preserve enough spacing for focus state
                 font: `${ref(fontWeightNormal$1)} ${ref(typescaleXs$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
                 color: ref(colorPrimary),
                 textOverflow: 'ellipsis',
@@ -5018,13 +5018,13 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1fr)',
             gap: spacingBase,
             alignItems: 'center',
-            padding: `${ref(spacingStaticSm)} ${spacingBase}`,
+            padding: `${ref(spacingStaticSm$1)} ${spacingBase}`,
             '&:focus-visible': {
                 outline: 'none',
             },
             '&__area': {
                 display: 'flex',
-                gap: ref(spacingStaticSm),
+                gap: ref(spacingStaticSm$1),
                 alignItems: 'center',
                 '&--start': {
                     justifyContent: 'flex-start',
@@ -5170,12 +5170,12 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             '&__header': {
                 zIndex: 9999999,
                 display: 'flex',
-                gap: ref(spacingStaticSm),
+                gap: ref(spacingStaticSm$1),
                 alignItems: 'center',
                 position: 'sticky',
                 top: `calc(-1 * ${spacingBase})`,
                 margin: `calc(-1 * ${spacingBase}) calc(-1 * ${spacingBase}) ${spacingBase}`,
-                padding: `${ref(spacingStaticSm)} ${spacingBase}`,
+                padding: `${ref(spacingStaticSm$1)} ${spacingBase}`,
                 minHeight: '56px',
                 boxSizing: 'border-box',
                 '&--start': {
@@ -5343,13 +5343,13 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 gridRowStart: '3',
                 gridColumnEnd: '-1',
                 display: 'flex',
-                gap: ref(spacingStaticXs),
+                gap: ref(spacingStaticXs$1),
                 alignSelf: 'flex-start', // relevant in case slot="header" becomes higher than nav group
             },
             colorScheme: ref(cssVariablePrevNextColorScheme),
         },
         btn: {
-            padding: ref(spacingStaticSm),
+            padding: ref(spacingStaticSm$1),
         },
         'skip-link': {
             // :focus must be used in this case, because :focus-visible is just matched on the focusable element itself, not on the host element.
@@ -5659,7 +5659,7 @@ const getFunctionalComponentLabelAfterStyles = () => {
         verticalAlign: 'top',
         '&::slotted(*)': {
             ...addImportantToEachRule({
-                marginInlineStart: ref(spacingStaticXs),
+                marginInlineStart: ref(spacingStaticXs$1),
             }),
         },
     };
@@ -5701,8 +5701,8 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
                 cursor: 'unset',
                 fontSize: ref(typescaleXs$1),
                 color: ref(colorContrastHigh),
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${ref(spacingStaticXs)})` })),
-                marginTop: `calc(-1 * ${ref(spacingStaticXs)})`,
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${ref(spacingStaticXs$1)})` })),
+                marginTop: `calc(-1 * ${ref(spacingStaticXs$1)})`,
             },
             '& > slot[name="label"]::slotted(*)': {
                 ...addImportantToEachRule({
@@ -5720,7 +5720,7 @@ const getFunctionalComponentStateMessageStyles = (state, additionalDefaultJssSty
     return {
         message: {
             display: 'flex',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
             font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
             color: getThemedFormStateColors(state).formStateColor,
             transition: `${getTransition('color')}, ${getTransition('opacity')}`,
@@ -5764,7 +5764,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         },
         root: {
             display: 'grid',
-            rowGap: ref(spacingStaticXs),
+            rowGap: ref(spacingStaticXs$1),
         },
         wrapper: {
             position: 'relative',
@@ -6070,7 +6070,7 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
         },
         root: {
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
         },
         wrapper: {
             display: 'flex',
@@ -6676,7 +6676,7 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                 position: 'absolute',
                 insetInlineStart: `calc(100% + ${ref(spacingFluidSm)})`,
                 insetBlockStart: ref(spacingFluidSm),
-                padding: ref(spacingStaticSm),
+                padding: ref(spacingStaticSm$1),
             },
         },
         back: {
@@ -7454,11 +7454,11 @@ const getComponentCss$L = (disabled, loading, hideLabel, state, compact, readOnl
 
 const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
 // TODO: basic button/icon padding can already be set within style function instead of on component style level
-const formButtonOrIconPadding = ref(spacingStaticXs);
+const formButtonOrIconPadding = ref(spacingStaticXs$1);
 // TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
 //  unfortunately line-height alignment breaks for a select element for some reasons then
 // TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingVertical = ref(spacingStaticSm);
+const formElementPaddingVertical = ref(spacingStaticSm$1);
 // TODO: basic form element padding can already be set within style function instead of on component style level
 const formElementPaddingHorizontal = ref(spacingStaticMd);
 const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
@@ -8128,7 +8128,7 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         },
         root: {
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + 1px * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
         },
@@ -8168,11 +8168,11 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
             },
             ul: {
                 display: 'flex',
-                gap: ref(spacingStaticXs),
+                gap: ref(spacingStaticXs$1),
                 margin: 0,
                 padding: 0,
                 [mediaQueryMinS]: {
-                    gap: ref(spacingStaticSm),
+                    gap: ref(spacingStaticSm$1),
                 },
             },
             li: {
@@ -8318,7 +8318,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
         root: {
             all: 'unset',
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
         },
         wrapper: {
             position: 'relative',
@@ -8424,7 +8424,7 @@ const getComponentCss$v = () => {
             maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
             width: 'max-content', // ensures in older browsers correct width
             boxSizing: 'border-box',
-            padding: `${ref(spacingStaticSm)} ${ref(spacingStaticMd)}`,
+            padding: `${ref(spacingStaticSm$1)} ${ref(spacingStaticMd)}`,
             pointerEvents: 'auto',
             borderRadius: ref(radiusXl),
             background: ref(colorCanvas),
@@ -8512,7 +8512,7 @@ const getComponentCss$u = (disabled, loading, state) => {
         root: {
             display: 'grid',
             gridTemplateColumns: 'auto minmax(0, 1fr)',
-            rowGap: ref(spacingStaticXs),
+            rowGap: ref(spacingStaticXs$1),
         },
         wrapper: {
             position: 'relative',
@@ -8580,7 +8580,7 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
             all: 'unset',
             display: 'grid',
             justifySelf: 'flex-start',
-            rowGap: ref(spacingStaticXs),
+            rowGap: ref(spacingStaticXs$1),
         },
         wrapper: {
             alignItems: 'start',
@@ -8685,12 +8685,12 @@ const getScrollIndicatorStyles = (direction, isVisible, isSticky, hasScrollbar,
         width: '1.5rem',
         height: '1.5rem',
         ...(!isCompact && {
-            padding: ref(spacingStaticXs),
+            padding: ref(spacingStaticXs$1),
         }),
         cursor: 'pointer',
         opacity: isVisible ? 1 : 0,
         visibility: isVisible ? 'inherit' : 'hidden',
-        transform: `translate3d(${isVisible ? '0' : `${isPrev ? `calc(-1 * ${ref(spacingStaticSm)})` : ref(spacingStaticSm)}`},0,0)`,
+        transform: `translate3d(${isVisible ? '0' : `${isPrev ? `calc(-1 * ${ref(spacingStaticSm$1)})` : ref(spacingStaticSm$1)}`},0,0)`,
         transition: `${getTransition('transform')},${getTransition('opacity')},visibility 0s linear ${isVisible ? '0s' : ref(cssVariableTransitionDuration, ref(durationSm))}`,
         '&:dir(rtl)': {
             gridArea: isPrev ? '1/3' : '1/1',
@@ -8698,7 +8698,7 @@ const getScrollIndicatorStyles = (direction, isVisible, isSticky, hasScrollbar,
         ...hoverMediaQuery({
             '&:hover::after': {
                 // do the transform on the pseudo-element to prevent the click area from moving when hovered
-                transform: `translate3d(${isPrev ? `calc(-1 * ${ref(spacingStaticXs)})` : ref(spacingStaticXs)},0,0)`,
+                transform: `translate3d(${isPrev ? `calc(-1 * ${ref(spacingStaticXs$1)})` : ref(spacingStaticXs$1)},0,0)`,
             },
         }),
         '&::after': {
@@ -8738,7 +8738,7 @@ isSticky, hasScrollbar, isCompact) => {
                 gridArea: '1/2',
                 position: 'relative', // necessary for tabs bar animation
                 display: 'inline-flex',
-                gap: ref(cssVarGap, isCompact ? ref(spacingStaticXs) : ref(spacingStaticSm)),
+                gap: ref(cssVarGap, isCompact ? ref(spacingStaticXs$1) : ref(spacingStaticSm$1)),
             },
         },
         root: {
@@ -8905,7 +8905,7 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         root: {
             all: 'unset',
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
         },
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, false, hideLabel, {
@@ -8915,7 +8915,7 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         ...getFunctionalComponentStateMessageStyles(state),
         ...(noWrap && {
             scroller: {
-                margin: `-${ref(spacingStaticXs)} 0`,
+                margin: `-${ref(spacingStaticXs$1)} 0`,
             },
         }),
     });
@@ -8974,7 +8974,7 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         },
         root: {
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + 1px * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
@@ -9163,9 +9163,9 @@ const getComponentCss$l = (state, disabled) => {
                 all: 'unset',
                 display: 'grid',
                 gridTemplateColumns: 'auto minmax(0,1fr)',
-                gap: spacingStaticXs$1,
+                gap: spacingStaticXs,
                 color: ref(colorPrimary),
-                paddingInline: `${spacingStaticSm$1} 12px`,
+                paddingInline: `${spacingStaticSm} 12px`,
                 paddingBlock: '6px',
                 width: 'max-content',
                 cursor: isDisabled ? 'not-allowed' : 'pointer',
@@ -9401,7 +9401,7 @@ const getComponentCss$h = (isCompact, layout) => {
                     '--p-scroller-indicator-bottom': ref(cssVarScrollIndicatorBottom, '0px'),
                     [cssVariableTableHoverColor]: ref(colorFrosted),
                     [cssVariableTableBorderColor]: ref(colorContrastLow),
-                    [cssVariableTablePadding]: isCompact ? ref(spacingStaticSm) : ref(spacingFluidSm),
+                    [cssVariableTablePadding]: isCompact ? ref(spacingStaticSm$1) : ref(spacingFluidSm),
                     [cssVariableTableBorderWidth]: '1px',
                     ...hostHiddenStyles,
                     font: `${ref(fontWeightNormal$1)} ${ref(typescaleSm$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
@@ -9473,7 +9473,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                     button: {
                         position: 'relative',
                         display: 'flex',
-                        gap: ref(spacingStaticXs),
+                        gap: ref(spacingStaticXs$1),
                         width: 'auto',
                         margin: 0, // Removes default button margin on safari 15
                         padding: 0,
@@ -9616,8 +9616,8 @@ const getComponentCss$b = (background, size, isCompact, activeTabIndex) => {
                         // padding by the same amount so the overall hit area / visual height stays stable.
                         padding: hasBackground
                             ? isCompact
-                                ? `calc(7 * ${ref(spacingStatic2Xs)} - ${ref(spacingStaticXs)}) calc(${ref(spacingStaticMd)} - ${ref(spacingStaticXs)})`
-                                : `calc(${ref(spacingStaticMd)} - ${ref(spacingStaticXs)}) calc(28 * ${ref(spacingStatic2Xs)} - ${ref(spacingStaticXs)})`
+                                ? `calc(7 * ${ref(spacingStatic2Xs)} - ${ref(spacingStaticXs$1)}) calc(${ref(spacingStaticMd)} - ${ref(spacingStaticXs$1)})`
+                                : `calc(${ref(spacingStaticMd)} - ${ref(spacingStaticXs$1)}) calc(28 * ${ref(spacingStatic2Xs)} - ${ref(spacingStaticXs$1)})`
                             : isCompact
                                 ? `calc(6 * ${ref(spacingStatic2Xs)}) ${ref(spacingStaticMd)}`
                                 : `${ref(spacingStaticMd)} calc(28 * ${ref(spacingStatic2Xs)})`,
@@ -9675,7 +9675,7 @@ const getComponentCss$b = (background, size, isCompact, activeTabIndex) => {
             placeSelf: 'flex-start', // ensures scroller doesn't get stretched in x- or y-axis in case the tabs-bar is taller than the scroller (e.g. when placed in flex or grid context)
             ...(hasBackground && {
                 background: backgroundMap[background],
-                padding: isCompact ? `calc(3 * ${ref(spacingStatic2Xs)})` : ref(spacingStaticXs),
+                padding: isCompact ? `calc(3 * ${ref(spacingStatic2Xs)})` : ref(spacingStaticXs$1),
                 borderRadius: isCompact ? ref(radiusLg) : ref(radiusXl), // radius for rail
                 ...forcedColorsMediaQuery({
                     forcedColorAdjust: 'none',
@@ -9731,7 +9731,7 @@ const getComponentCss$9 = () => {
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
-            marginBottom: ref(spacingStaticSm),
+            marginBottom: ref(spacingStaticSm$1),
         },
     });
 };
@@ -9860,9 +9860,9 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 display: 'flex',
                 gap: '2px',
                 padding: compact
-                    ? `${ref(spacingStatic2Xs)} ${ref(spacingStaticSm)}`
-                    : `${spacingStaticXs$1} calc(12 * ${ref(spacingStatic2Xs)})`,
-                borderRadius: `calc(${compact ? '1px' : spacingStaticXs$1} + (${ref(leadingNormal$1)} / 2))`, // ensures pill shape has a maximum border radius to support multiline.
+                    ? `${ref(spacingStatic2Xs)} ${ref(spacingStaticSm$1)}`
+                    : `${spacingStaticXs} calc(12 * ${ref(spacingStatic2Xs)})`,
+                borderRadius: `calc(${compact ? '1px' : spacingStaticXs} + (${ref(leadingNormal$1)} / 2))`, // ensures pill shape has a maximum border radius to support multiline.
                 font: `${ref(fontWeightNormal$1)} ${ref(typescaleXs$1)} / ${ref(leadingNormal$1)} ${ref(fontPorscheNext$1)}`,
                 ...((variant === 'secondary' ||
                     variant === 'info-frosted' ||
@@ -9951,7 +9951,7 @@ const getComponentCss$6 = (type) => {
             },
             // css selector for text-list-item
             '::slotted(*)': addImportantToEachRule({
-                [cssVariablePaddingTop]: ref(spacingStaticXs), // padding top for nested list
+                [cssVariablePaddingTop]: ref(spacingStaticXs$1), // padding top for nested list
                 [cssVariablePaddingBottom]: ref(spacingStaticMd), // padding bottom for nested list, TODO: in case it's last root list item with a nested list it would result in outer spacing which is not desired
                 [cssVariablePseudoSpace]: isOrderedList
                     ? ref(cssVariableOrderedGridColumn, '1.5rem')
@@ -10107,7 +10107,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         root: {
             display: 'grid',
-            gap: ref(spacingStaticXs),
+            gap: ref(spacingStaticXs$1),
         },
         wrapper: {
             display: 'grid',

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

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-bar.wrapper.mjs

@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, aria, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabsBar, { activeTabIndex, background, compact, size, weight, children })),
+                children: (jsx(DSRTabsBar, { activeTabIndex, aria, background, compact, size, weight, children })),
             }
             : {
                 children,