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

package/package.json

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

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

@@ -50,11 +50,11 @@ const borderWidthBase = '2px';
 const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
 
 const dropShadowLowStyle = {
-    filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 3px 8px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const dropShadowHighStyle = {
-    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+    boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
 const themeLightStateFocus = '#1A44EA';
@@ -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
@@ -3934,7 +3924,7 @@ const getComponentCss$Y = (size, compact, open, theme) => {
             })), hostHiddenStyles)),
             button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeightSemiBold }), buildResponsiveStyles(size, (s) => ({
                 fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '12px'} 0`,
+                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
             }))), mergeDeep({
                 '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
                     ? {
@@ -3960,11 +3950,16 @@ const getComponentCss$Y = (size, compact, open, theme) => {
         },
         heading: {
             margin: 0,
-            padding: '0 0 2px',
+        },
+        'icon-container': {
+            height: fontLineHeight,
+            display: 'flex',
+            alignItems: 'center',
         },
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
+            fontSize: fontSizeTextXXSmall,
             transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
         },
@@ -4003,24 +3998,25 @@ const ANIMATION_DURATION$1 = 600;
 const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
+const topBottomFallback = '56px';
 const getComponentCss$X = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), (isOpen
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed', bottom: `var(${cssVariableBottom},${topBottomFallback})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), { borderRadius: borderRadiusSmall }), (isOpen
                 ? {
                     opacity: 1,
                     visibility: 'inherit',
                     transform: 'translate3d(0,0,0)',
-                    transition: `opacity ${duration$1} ${easeInQuad$1}, transform ${duration$1} ${easeInQuad$1}`,
+                    transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
                 }
                 : {
                     opacity: 0,
                     visibility: 'hidden',
-                    transform: `translate3d(0,calc(var(${cssVariableBottom}) + 100%),0)`,
+                    transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
                     '&(.hydrated),&(.ssr)': {
-                        transition: `visibility 0s linear ${duration$1}, opacity ${duration$1} ${easeOutQuad$1}, transform ${duration$1} ${easeOutQuad$1}`,
+                        transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
                     },
-                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop})),0)` })), [getMediaQueryMin('xxl')]: {
+                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop},${topBottomFallback})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` })), [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
                 } }), hostHiddenStyles)),
@@ -4083,7 +4079,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 +4098,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 +4281,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 +4358,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 +4400,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 +4499,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) => {
@@ -4924,12 +4912,12 @@ const getComponentCss$E = (color, size, theme) => {
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
+        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0, pointerEvents: 'none' }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
                 getSchemedHighContrastMediaQuery({
                     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 +4927,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 +4990,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 +4999,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 +5042,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 +5094,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 +5192,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 +5371,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 +5576,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 +5610,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 +5627,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 +5647,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 +5832,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 +5895,7 @@ const getComponentCss$m = (state, disabled, theme) => {
             height: fontLineHeight,
             width: fontLineHeight,
         },
-    })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
+    })), { 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getComponentCss$l = (size) => {
@@ -5877,7 +5985,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 +6067,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 +6137,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 +6218,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 +6346,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 +6443,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 }),
     })));
 };
 
@@ -6389,7 +6497,13 @@ const getComponentCss$1 = () => {
 const getComponentCss = (size, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (size !== 'inherit' && {
+                height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)',
+                // workaround for Safari to optimize image rendering
+                '@supports (height: round(down, 1px, 1px))': {
+                    height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
+                },
+            })), hostHiddenStyles))),
             'a, svg': {
                 display: 'block',
                 maxWidth: '100%',
@@ -6443,6 +6557,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;