@porsche-design-system/components-react 3.0.0-rc.1 → 3.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-rc.1"
+    "@porsche-design-system/components-js": "3.0.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

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

@@ -3228,6 +3228,10 @@ function jssNested() {
   };
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function getAugmentedNamespace(n) {
   if (n.__esModule) return n;
   var f = n.default;
@@ -3289,7 +3293,7 @@ var _tslib$1 = {};
 				return t;
 			};
 		return exports.__assign.apply(this, arguments);
-	};
+	}; 
 } (_tslib$1));
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
@@ -3649,6 +3653,8 @@ function jssCombineAndSortMQ(options) {
 
 var dist = jssCombineAndSortMQ;
 
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3792,36 +3798,20 @@ const focusPseudoJssStyle = {
         outline: 0,
     },
 };
-const getTextHiddenJssStyle = (isHidden) => isHidden
-    ? getScreenReaderOnlyJssStyle()
-    : {
-        position: 'static',
-        width: 'auto',
-        height: 'auto',
-        margin: 0,
-        overflow: 'visible',
-        clip: 'auto',
-        clipPath: 'none',
-        whiteSpace: 'normal',
-    };
-const getFormTextHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'fit-content' }));
-const getFormCheckboxRadioHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'auto', padding: `2px 0 0 ${spacingStaticSmall}` }));
 /**
- * Screen reader only styles to hide (text-)contents visually in the browser but grant access for screen readers
+ * Returns a JSS style object that can be used to visually hide text in the browser, while still allowing it to be accessed by screen readers.
+ * @param {boolean} isHidden - A boolean value indicating whether the text should be hidden or not. Defaults to true.
+ * @param {JssStyle} isShownJssStyle - Additional styles applied when isHidden = false
+ * @returns {JssStyle} - A JSS style object containing styles depending on the value of isHidden and isShownJssStyle.
  */
-const getScreenReaderOnlyJssStyle = () => {
-    return {
+const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => isHidden
+    ? {
         position: 'absolute',
+        width: 0,
         height: '1px',
-        width: '1px',
-        border: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(1px,1px,1px,1px)',
-        clipPath: 'inset(50%)',
-        whiteSpace: 'nowrap',
-    };
-};
+        textIndent: '-999999px',
+    }
+    : Object.assign({ position: 'static', width: 'auto', height: 'auto', textIndent: 0 }, isShownJssStyle);
 const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
@@ -3856,7 +3846,7 @@ const jss = createJss({
         jssGlobal(),
         jssNested(),
         camelCase(),
-        dist({ combineMediaQueries: true }),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
 const getCss = (jssStyles) => jss
@@ -4083,7 +4073,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             fontSize: getFontSizeText(sizeValue),
         })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'absolute', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                left: hideLabelValue ? offsetVertical : offsetHorizontal,
             }))), { borderRadius: borderRadiusSmall, transition: getTransition('background-color') }), (active && Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }))) }), (!isDisabledOrLoading &&
             hoverMediaQuery({
                 '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
@@ -4102,6 +4092,12 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             flexShrink: '0',
             width: fontLineHeight,
             height: fontLineHeight,
+            // workaround for Safari to optimize vertical alignment of icons
+            // TODO: check if this is still needed after optimized icons are included
+            '@supports (width: round(down, 1px, 1px))': {
+                width: `round(down, ${fontLineHeight}, 1px)`,
+                height: `round(down, ${fontLineHeight}, 1px)`,
+            },
         },
         label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
@@ -4279,17 +4275,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
         })), (!isDisabledOrLoading &&
             hoverMediaQuery({
                 '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: isHighContrastMode ? focusColor : borderColorHover }, (!isPrimary && frostedGlassStyle)),
-            }))), label: Object.assign({}, buildResponsiveStyles(hideLabel, (hideLabelValue) => hideLabelValue
-            ? {
-                width: 0,
-                height: '1px',
-                textIndent: '-999999px',
-            }
-            : {
-                width: 'auto',
-                height: 'auto',
-                textIndent: 0,
-            })) }, (hasIcon && {
+            }))), label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle) }, (hasIcon && {
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
@@ -4366,22 +4352,18 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 [mediaQueryS]: isHeaderAlignCenter
                     ? {
                         gridColumn: 2,
-                        textAlign: 'center', // relevant when text becomes multiline
                     }
                     : {
                         gridColumn: '1 / 3',
                     },
             }),
-        }, header: {
-            display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
-            [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
+        }, header: Object.assign(Object.assign({ display: 'grid', padding: `0 ${spacingMap[width].base}` }, (isHeaderAlignCenter && {
+            textAlign: 'center',
+        })), { [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
                 justifyItems: 'center', // relevant when max-width of heading or description is reached
-            })), { padding: `0 ${spacingMap[width].s}` }),
-            [mediaQueryXXL]: {
+            })), { padding: `0 ${spacingMap[width].s}` }), [mediaQueryXXL]: {
                 padding: `0 ${spacingMap[width].xxl}`,
-            },
-        }, nav: {
+            } }), nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4412,7 +4394,7 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 } }),
             '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
             '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
-            '&__sr': getScreenReaderOnlyJssStyle(), // appears in the DOM when sliding
+            '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         } }, (hasPagination && {
         pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
             display: hasPaginationValue ? 'flex' : 'none',
@@ -4511,7 +4493,7 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
                 display: 'flex',
                 alignItems: 'flex-start',
             },
-        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: disabledOrLoading ? 'default' : 'pointer' }, textSmallStyle), { color: disabledOrLoading ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, getFormCheckboxRadioHiddenJssStyle)) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
+        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: disabledOrLoading ? 'default' : 'pointer' }, textSmallStyle), { color: disabledOrLoading ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { padding: `2px 0 0 ${spacingStaticSmall}` }))) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
 };
 
 const getInlineSVGBackgroundImage = (path) => {
@@ -4929,7 +4911,7 @@ const getComponentCss$E = (color, size, theme) => {
                     filter: filter.light[color],
                 }, {
                     filter: filter.dark[color],
-                }))), { WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight} 1ms` }))), (isSizeInherit
+                }))), { WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms` }))), (isSizeInherit
                 ? {
                     width: size,
                     height: size,
@@ -4939,7 +4921,7 @@ const getComponentCss$E = (color, size, theme) => {
                     height: fontLineHeight,
                     font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
-            [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+            [`@keyframes ${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`}`]: forceRerenderAnimationStyle,
         })),
     });
 };
@@ -5002,7 +4984,6 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
 
 const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
-    const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -5012,7 +4993,7 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
                 // (https://bugs.webkit.org/show_bug.cgi?id=178237)
                 '&(a)::before': Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical, borderRadius: borderRadiusSmall }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                    left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                    left: hideLabelValue ? offsetVertical : offsetHorizontal,
                 }))),
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
@@ -5055,6 +5036,7 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         }) })))));
 };
 
+// array is redefined instead of using the one from in model-signature
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
@@ -5106,7 +5088,7 @@ const getComponentCss$y = (size) => {
 
 const mediaQueryXl = getMediaQueryMin('xl');
 const { backgroundColor, primaryColor: lightThemePrimaryColor } = getThemedColors('light');
-const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
+const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
 const transitionTimingFunction = 'cubic-bezier(.16,1,.3,1)';
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
 const getFullscreenJssStyles = (fullscreen) => {
@@ -5204,8 +5186,8 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
     })), (hasDismissButton && {
         dismiss: Object.assign({ position: 'absolute', top: '8px', right: '8px', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
             '&:hover': {
-                background: 'transparent',
-                borderColor: 'transparent',
+                background: darkThemeContrastHighColor,
+                borderColor: darkThemeContrastHighColor,
             },
         })),
     })));
@@ -5383,7 +5365,7 @@ const getComponentCss$u = (direction, theme) => {
                     borderColor: 'transparent',
                 } }),
         },
-        label: getTextHiddenJssStyle(true),
+        label: getHiddenTextJssStyle(),
         icon: {
             display: 'inline-block',
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
@@ -5588,6 +5570,7 @@ const getComponentCss$q = (maxWidth) => {
         },
     });
 };
+
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5621,7 +5604,7 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
             flexDirection: 'column',
             gap: spacingStaticXSmall,
             position: 'relative',
-            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, getFormTextHiddenJssStyle)), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
+            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' }))), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
                     color: contrastHighColor,
                 })) }), hoverMediaQuery({
                 '&:hover': {
@@ -5638,14 +5621,10 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
         })),
     }));
 };
-const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
-const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
-    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, {
-            position: 'static',
-            zIndex: 0,
-            cursor: 'pointer',
-            padding: `8px ${ICON_SPACE} 8px ${spacingStaticMedium}`,
-        }))), root: {
+
+const OPTION_HEIGHT = 40; // optgroups are higher and ignored
+const getComponentCss$p = (isDisabled, native, hideLabel, state, theme) => {
+    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, Object.assign({ position: 'static', zIndex: 0, cursor: 'pointer', padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}` }, (!native && !isDisabled && { borderColor: 'transparent' }))))), root: {
             display: 'block',
             position: 'relative',
         } }, getLabelStyles('select', isDisabled, hideLabel, state, theme, {
@@ -5662,6 +5641,129 @@ const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)));
 };
 
+const dropdownPositionVar = '--p-internal-dropdown-position';
+const getButtonStyles = (direction, isOpen, state, theme) => {
+    const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    return {
+        '@global': {
+            button: Object.assign(Object.assign(Object.assign({ position: 'absolute', top: 0, height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, width: '100%', font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: 0, background: 'transparent', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall, outline: '0', cursor: 'pointer', transition: getTransition('border-color'), '&:focus, &:focus ~ ul': {
+                    borderColor: primaryColor,
+                } }, hoverMediaQuery({
+                '&:not(:disabled):not(:focus):hover': {
+                    borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                },
+            })), { '&:disabled': {
+                    cursor: 'not-allowed',
+                    borderColor: disabledColor,
+                } }), (isOpen && {
+                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            })),
+        },
+    };
+};
+const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
+    const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    const placeHolderJssStyle = {
+        opacity: 1,
+        color: disabled ? disabledColor : primaryColor,
+    };
+    return {
+        '@global': {
+            input: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'absolute', zIndex: 1, bottom: '2px', left: '2px', width: `calc(100% - (${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, height: `calc(${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: `13px ${spacingStaticMedium}`, outline: '0', appearance: 'none', boxSizing: 'border-box', border: '0', borderRadius: borderRadiusSmall, opacity: 0 }, textSmallStyle), { textIndent: 0, cursor: disabled ? 'not-allowed' : 'text', color: primaryColor, background: backgroundColor, '&::placeholder': placeHolderJssStyle, '&::-webkit-input-placeholder': placeHolderJssStyle, '&::-moz-placeholder': placeHolderJssStyle, '&:not(:disabled):focus': {
+                    opacity: 1,
+                    '&+span, &~ ul': {
+                        borderColor: primaryColor,
+                    },
+                } }), hoverMediaQuery({
+                '&:not(:disabled)': {
+                    '&+span:hover': {
+                        borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                    },
+                    '&:hover': {
+                        '&+span, &~ul': {
+                            borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                        },
+                    },
+                },
+            })), { '&+span': Object.assign(Object.assign(Object.assign({ 
+                    // for focus outline and clicking arrow since input ends left of the icon
+                    position: 'absolute' }, getInsetJssStyle()), { transition: getTransition('border-color'), pointerEvents: 'all', cursor: disabled ? 'not-allowed' : 'pointer', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall }), (isOpen && {
+                    [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                    [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+                })) }),
+        },
+    };
+};
+const getListStyles = (direction, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        '@global': {
+            ul: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', gap: spacingStaticSmall, position: `var(${dropdownPositionVar})`, padding: '6px', margin: 0, background: backgroundColor }, textSmallStyle), { zIndex: 10, left: 0, right: 0, [isDirectionDown ? 'top' : 'bottom']: 'calc(100% - 2px)', boxSizing: 'border-box', maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, overflowY: 'auto', WebkitOverflowScrolling: 'touch', scrollBehavior: 'smooth', border: `2px solid ${primaryColor}`, [isDirectionDown ? 'borderTop' : 'borderBottom']: addImportantToRule(`1px solid ${contrastMediumColor}`) }), (isDirectionDown
+                ? ['borderBottomLeftRadius', 'borderBottomRightRadius']
+                : ['borderTopLeftRadius', 'borderTopRightRadius']).reduce((result, curr) => (Object.assign(Object.assign({}, result), { [curr]: borderRadiusSmall })), {})), { scrollbarWidth: 'thin', scrollbarColor: 'auto', transition: getTransition('border-color'), transform: 'translate3d(0,0,0)' }),
+        },
+        option: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', gap: '12px', padding: `${spacingStaticSmall} 12px`, flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, color: contrastHighColor, cursor: 'pointer', textAlign: 'left', wordBreak: 'break-word', boxSizing: 'border-box', borderRadius: borderRadiusSmall, transition: ['background-color', 'color'].map(getTransition).join(), '&[role=status]': {
+                cursor: 'not-allowed',
+            }, '&__sr': getHiddenTextJssStyle() }, hoverMediaQuery({
+            '&:not([aria-disabled]):not([role=status]):hover': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            },
+        })), { '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            }, '&--selected': {
+                cursor: 'default',
+                pointerEvents: 'none',
+            }, '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+            }, '&--hidden': {
+                display: 'none',
+            } }),
+        optgroup: {
+            display: 'block',
+            padding: '3px 14px',
+            fontWeight: fontWeightSemiBold,
+            '&:not(:first-child)': {
+                marginTop: spacingStaticSmall,
+            },
+            '&~$option': {
+                paddingLeft: '24px',
+            },
+        },
+    };
+};
+const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) => {
+    const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    return getCss(
+    // merge because of global styles
+    mergeDeep({
+        '@global': {
+            ':host': Object.assign({ [dropdownPositionVar]: 'absolute', display: 'block', position: `var(${dropdownPositionVar})`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), marginTop: `calc(-1 * (${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, paddingTop: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, left: 0, right: 0, color: disabled ? disabledColor : formStateColor || contrastMediumColor }, (!disabled &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    '&(:hover)': {
+                        color: formStateHoverColor || primaryColor,
+                    },
+                }))),
+        },
+        'sr-text': {
+            display: 'none',
+        },
+    }, filter
+        ? getFilterStyles(direction, isOpen, state, disabled, theme)
+        : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -5724,7 +5826,7 @@ const getComponentCss$n = (size, theme) => {
             },
         },
         root: Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(size, (s) => sizeMap$1[s])), { margin: 0, padding: 0, boxSizing: 'border-box', strokeWidth: 1.5 }),
-        'sr-only': getScreenReaderOnlyJssStyle(),
+        'sr-only': getHiddenTextJssStyle(),
     });
 };
 
@@ -5787,7 +5889,7 @@ const getComponentCss$m = (state, disabled, theme) => {
             height: fontLineHeight,
             width: fontLineHeight,
         },
-    })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
+    })), { 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getComponentCss$l = (size) => {
@@ -5877,7 +5979,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
         },
     })), { label: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { paddingTop: '2px', minWidth: 0, minHeight: 0, color: textColor }), mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
-        })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
+        })), buildResponsiveStyles(hideLabel, getHiddenTextJssStyle))) }));
 };
 
 const getComponentCss$j = () => {
@@ -5959,7 +6061,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                     } }),
             }
             : hideLabel && {
-                span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
+                span: Object.assign(Object.assign({}, getHiddenTextJssStyle()), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
             transition: getTransition('opacity'),
@@ -6029,9 +6131,9 @@ const getComponentCss$c = (size, weight, theme) => {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: isHighContrastMode ? '4px' : weight === 'semi-bold' ? '2px' : '1.5px',
+            height: '2px',
             left: 0,
-            bottom: isHighContrastMode ? '-1px' : '-4px',
+            bottom: isHighContrastMode ? '0' : '-2px',
             background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
             '&--enable-transition': {
                 willChange: 'width',
@@ -6110,7 +6212,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
             marginRight: '10px',
             transition: getTransition('background-color'),
             borderRadius: borderRadiusSmall,
-        }, 'sr-only': getScreenReaderOnlyJssStyle() }));
+        }, 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
@@ -6238,7 +6340,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), { 
         // TODO: could be made conditional if we had hasUnit
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }) }));
 };
 
 /** @deprecated */
@@ -6335,7 +6437,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
             color: contrastMediumColor,
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }),
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }),
     })));
 };
 
@@ -6443,6 +6545,7 @@ exports.getScrollerCss = getComponentCss$s;
 exports.getSegmentedControlCss = getComponentCss$q;
 exports.getSegmentedControlItemCss = getComponentCss$r;
 exports.getSelectWrapperCss = getComponentCss$p;
+exports.getSelectWrapperDropdownCss = getComponentCss$o;
 exports.getSpinnerCss = getComponentCss$n;
 exports.getStepperHorizontalCss = getComponentCss$l;
 exports.getStepperHorizontalItemCss = getComponentCss$m;

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

@@ -168,6 +168,13 @@ hasWindow &&
             .forEach((node) => childrenMutationMap.get(node)());
     });
 
+const isTouchDevice = () => {
+    if (!hasWindow) {
+        return;
+    }
+    return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+};
+
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
 /**
@@ -3074,6 +3081,10 @@ function jssNested() {
   };
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function getAugmentedNamespace(n) {
   if (n.__esModule) return n;
   var f = n.default;
@@ -3135,7 +3146,7 @@ var _tslib$1 = {};
 				return t;
 			};
 		return exports.__assign.apply(this, arguments);
-	};
+	}; 
 } (_tslib$1));
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
@@ -3495,6 +3506,8 @@ function jssCombineAndSortMQ(options) {
 
 var dist = jssCombineAndSortMQ;
 
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3617,7 +3630,7 @@ createJss({
         jssGlobal(),
         jssNested(),
         camelCase$1(),
-        dist({ combineMediaQueries: true }),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
 const supportsConstructableStylesheets = () => {
@@ -3643,10 +3656,6 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
 const hasDocument = typeof document !== 'undefined';
 
 hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
 
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
@@ -3797,7 +3806,7 @@ Object.entries(innerManifest[size])
     .join();
 
 const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/model-signatures';
-const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.64611f93dc2fc9e234e25b88cca12593.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
+const MODEL_SIGNATURES_MANIFEST = { "718": "718.min.d92dc0fe91e67bd51120d91c5cd1eb2f.svg", "911": "911.min.5c462658f9d472e90a139173414e8fdd.svg", "boxster": "boxster.min.5e7b22a1fa25004a4f97807d57f32b21.svg", "cayenne": "cayenne.min.4026ba6b335cc98e10592f900cf731e1.svg", "cayman": "cayman.min.c634f6f3de1d67610b2e4230e60337fb.svg", "macan": "macan.min.e38fbf34ed4f00066620901babd99af0.svg", "panamera": "panamera.min.d35913b252657f7c5cfcae74cfd61b26.svg", "taycan": "taycan.min.ba4e7c3cb86a78d626d4463b81be0f23.svg", "turbo-s": "turbo-s.min.8201d60c1b5e00daf9e23784fd199111.svg", "turbo": "turbo.min.cfde5de85fdc84be597dfad4402c5f6f.svg" };
 const getSvgUrl = (model) => {
     const cdnBaseUrl = CDN_BASE_URL
         ;
@@ -4014,6 +4023,29 @@ if (tempIcon) {
     tempIcon.style.width = ICON_SIZE;
     tempIcon.style.marginRight = ICON_MARGIN;
 }
+const getSelectWrapperDropdownButtonAriaAttributes = (isOpen, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return Object.assign({ 'aria-labelledby': labelId, 'aria-describedby': descriptionId || null, 'aria-haspopup': 'listbox', 'aria-expanded': isOpen ? 'true' : 'false', 'aria-controls': dropdownId }, (isOpen && {
+        'aria-activedescendant': `option-${activeDescendantId}`,
+    }));
+};
+const getFilterInputAriaAttributes = (isOpen, isRequired, labelId, descriptionId, dropdownId, activeDescendantId) => {
+    return Object.assign(Object.assign(Object.assign({}, getSelectWrapperDropdownButtonAriaAttributes(isOpen, labelId, descriptionId, dropdownId, activeDescendantId)), { 'aria-autocomplete': 'list' }), (isRequired && {
+        'aria-required': 'true',
+    }));
+};
+const getHighlightedOptionMapIndex = (arr) => arr.findIndex((item) => item.highlighted);
+const getSelectedOptionMap = (arr) => arr.find((item) => item.selected);
+const isCustomDropdown = (filter, native) => {
+    if (filter) {
+        return true;
+    }
+    else if (native) {
+        return false;
+    }
+    else {
+        return !isTouchDevice();
+    }
+};
 const isStateCompleteOrWarning = (state) => {
     return state === 'complete' || state === 'warning';
 };
@@ -4083,14 +4115,18 @@ exports.getContentAriaAttributes = getContentAriaAttributes;
 exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
 exports.getDisplayTagType = getDisplayTagType;
+exports.getFilterInputAriaAttributes = getFilterInputAriaAttributes;
 exports.getHTMLElement = getHTMLElement;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getHeadlineTagType = getHeadlineTagType;
+exports.getHighlightedOptionMapIndex = getHighlightedOptionMapIndex;
 exports.getIconColor = getIconColor;
 exports.getInlineNotificationIconName = getInlineNotificationIconName;
 exports.getInnerManifest = getInnerManifest;
 exports.getLinkButtonThemeForIcon = getLinkButtonThemeForIcon;
 exports.getRole = getRole;
+exports.getSelectWrapperDropdownButtonAriaAttributes = getSelectWrapperDropdownButtonAriaAttributes;
+exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
 exports.getSvgUrl = getSvgUrl;
 exports.getSwitchButtonAriaAttributes = getSwitchButtonAriaAttributes;
@@ -4102,6 +4138,7 @@ exports.hasLocateAction = hasLocateAction;
 exports.hasSpecificSlottedTag = hasSpecificSlottedTag;
 exports.hasVisibleIcon = hasVisibleIcon;
 exports.hasWindow = hasWindow;
+exports.isCustomDropdown = isCustomDropdown;
 exports.isDisabledOrLoading = isDisabledOrLoading;
 exports.isHighContrastMode = isHighContrastMode;
 exports.isListTypeOrdered = isListTypeOrdered;
@@ -4109,6 +4146,7 @@ exports.isScrollable = isScrollable;
 exports.isSortable = isSortable;
 exports.isStateCompleteOrWarning = isStateCompleteOrWarning;
 exports.isThemeDark = isThemeDark;
+exports.isTouchDevice = isTouchDevice;
 exports.isType = isType;
 exports.isUrl = isUrl;
 exports.isWithinForm = isWithinForm;

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/icon.wrapper.js

@@ -6,7 +6,7 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var icon = require('../dsr-components/icon.js');
 
-const PIcon = react.forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];