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

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

@@ -3830,6 +3830,11 @@ const getFocusJssStyle = (theme, opts) => {
         [`&${slotted ? '(' : ''}${slottedSelector}:focus${slotted ? ')' : ''}`]: {
             outline: 0, // reset ua-style (for older browsers)
         },
+        ...(pseudo && {
+            [`&${slotted ? '(' : ''}${slottedSelector}:focus-visible${slotted ? ')' : ''}`]: {
+                outline: 0, // reset ua-style (for modern browsers)
+            },
+        }),
         [`&${slotted ? '(' : ''}${slottedSelector}:focus-visible${slotted ? ')' : ''}${pseudo ? '::before' : ''}`]: {
             outline: `${borderWidthBase} solid ${focusColor}`,
             outlineOffset: offset,
@@ -3885,9 +3890,10 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
  * @param {number} zIndex - The z-index to be used.
  * @param {Theme} theme - The theme to be used.
  * @param {string} duration - The duration of the transition animation.
+ * @param {'blur' | 'shading'} backdrop - The backdrop variant.
  * @returns {JssStyle} - The JSS styles for the frosted glass backdrop.
  */
-const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
+const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long', backdrop = 'blur') => {
     return {
         position: 'fixed',
         inset: 0,
@@ -3901,14 +3907,17 @@ const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
             ? {
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                ...frostedGlassStyle,
+                ...(backdrop === 'blur' && frostedGlassStyle),
                 opacity: 1,
             }
             : {
                 visibility: 'hidden', // element shall not be tabbable after fade out transition has finished
                 pointerEvents: 'none',
-                WebkitBackdropFilter: 'blur(0px)',
-                backdropFilter: 'blur(0px)',
+                ...(backdrop === 'blur' && {
+                    // TODO: is `blur(0px)` necessary at all?
+                    WebkitBackdropFilter: 'blur(0px)',
+                    backdropFilter: 'blur(0px)',
+                }),
                 opacity: 0,
             }),
         transition: `${getTransition('opacity', duration)}, ${getTransition('backdrop-filter', duration)}, ${getTransition('-webkit-backdrop-filter', duration)}, visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]})`,
@@ -4014,7 +4023,7 @@ const getNoResultsOptionJssStyle = () => ({
 
 /**
  * Applies a style only on Chromium based browsers by using a media query which is only supported there.
- * https://www.browserstack.com/guide/create-browser-specific-css
+ * https://browserstack.com/guide/create-browser-specific-css
  *
  * @param {JssStyle} style - The style to be applied when the Chromium media query is supported.
  * @returns {JssStyle} - The Chromium media query containing the style.
@@ -4062,7 +4071,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$13 = (size, compact, open, theme) => {
+const getComponentCss$15 = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -4180,6 +4189,9 @@ const getComponentCss$13 = (size, compact, open, theme) => {
                 // Necessary to make focus outlines fully visible
                 padding: '4px',
                 margin: '-4px',
+                // Fix scrollbar issues when slotted content includes .sr-only styles (see issue #3042)
+                transform: 'translate3d(0,0,0)',
+                zIndex: 1,
             },
         },
         '@keyframes overflow': {
@@ -4199,7 +4211,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$12 = (isOpen) => {
+const getComponentCss$14 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4262,7 +4274,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$11 = (direction) => {
+const getComponentCss$13 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4413,7 +4425,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
@@ -4591,7 +4603,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$$ = (isDisabledOrLoading, ...args) => {
+const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4715,7 +4727,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4798,7 +4810,7 @@ const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -4890,11 +4902,10 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
             padding: spacingStaticSmall,
         },
         'skip-link': {
-            opacity: 0,
-            pointerEvents: 'none',
-            '&:focus-visible': {
-                opacity: 1,
-                pointerEvents: 'all',
+            // :focus must be used in this case, because :focus-visible is just matched on the focusable element itself, not on the host element.
+            '&:not(:focus)': {
+                opacity: 0,
+                pointerEvents: 'none',
             },
         },
         splide: {
@@ -5215,7 +5226,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$_ = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5310,7 +5321,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$X = (width) => {
+const getComponentCss$Z = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5352,7 +5363,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$W = () => {
+const getComponentCss$Y = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5447,7 +5458,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$V = (size, align, color, ellipsis, theme) => {
+const getComponentCss$X = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5467,7 +5478,7 @@ const getComponentCss$V = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$U = (color, orientation, theme) => {
+const getComponentCss$W = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5510,7 +5521,7 @@ const getComponentCss$U = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$T = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5546,7 +5557,7 @@ const getComponentCss$T = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$U = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5592,7 +5603,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$R = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$T = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5614,7 +5625,7 @@ const getComponentCss$R = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$Q = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$S = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5635,6 +5646,19 @@ const getComponentCss$Q = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
+const getFlyoutDialogResetJssStyle = () => {
+    return {
+        position: 'fixed',
+        height: '100vh',
+        maxHeight: '100vh',
+        margin: '0',
+        padding: '0',
+        border: '0',
+        visibility: 'inherit',
+        outline: '0',
+    };
+};
+
 const cssVariableVisibility = '--p-internal-flyout-navigation-visibility';
 const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-navigation-visibility-transition-duration';
 const frostedGlassHeaderHeight = '4rem';
@@ -5642,7 +5666,7 @@ const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
 const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
 const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$R = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5663,20 +5687,13 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
                 }),
             },
             dialog: {
-                position: 'fixed',
-                inset: 0,
-                display: 'grid', // ua-style reset
-                width: 'auto', // ua-style reset and to ensure transition duration works correctly
-                height: '100vh', // ua-style reset
-                maxWidth: '100vw', // ua-style reset
-                maxHeight: '100vh', // ua-style reset
-                margin: 0, // ua-style reset
-                padding: 0, // ua-style reset
-                border: 0, // ua-style reset
-                visibility: 'inherit', // ua-style reset
-                background: 'none', // ua-style reset
-                overflow: 'hidden', // ua-style reset, dialog shall never become scrollable, it's handled by custom scroll areas
-                outline: 0, // ua-style reset
+                ...getFlyoutDialogResetJssStyle(),
+                inset: '0',
+                display: 'grid',
+                overflow: 'hidden',
+                width: 'auto',
+                maxWidth: '100vw',
+                background: 'none',
                 ...(isPrimaryScrollerVisible
                     ? {
                         transform: 'translate3d(0, 0, 0)',
@@ -5788,7 +5805,7 @@ const getContentJssStyle = () => {
 
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
+const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5963,7 +5980,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
 
 const headerShadowClass = 'header--shadow';
 const footerShadowClass$1 = 'footer--shadow';
-const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$P = (isOpen, position, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const isPositionStart = position === 'start';
@@ -5975,49 +5992,63 @@ const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) =>
     return getCss({
         '@global': {
             ':host': {
-                display: 'flex',
+                display: 'block',
                 ...addImportantToEachRule({
                     // needed for correct alignment of the Porsche Grid within the Flyout
                     '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
                     '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
-                    justifyContent: isPositionStart ? 'flex-start' : 'flex-end',
                     ...getBackdropJssStyle(isOpen, FLYOUT_Z_INDEX, theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            dialog: {
+                ...getFlyoutDialogResetJssStyle(),
+                insetInline: isPositionStart ? '0 0' : 'auto 0',
+                insetBlock: '0 0',
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+                width: 'var(--p-flyout-width, fit-content)',
+                minWidth: '320px',
+                maxWidth: 'var(--p-flyout-max-width, 1180px)',
+                color: primaryColor, // enables color inheritance for slotted content
+                background: backgroundColor,
+                ...(isOpen
+                    ? {
+                        opacity: 1,
+                        transform: 'initial',
+                        transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
+                    }
+                    : {
+                        opacity: 0,
+                        transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
+                        transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
+                    }),
+                boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                    background: backgroundColorDark,
+                }),
+                '&:focus-visible': {
+                    outline: 'none', // ua-style reset
+                },
+                '&::backdrop': {
+                    // to improve browser backwards compatibility we visually style the backdrop on the :host,
+                    // although it's not on the #top-layer like it would be for modern browsers supporting ::backdrop
+                    opacity: 0, // to support backdrop click for modern browsers supporting ::backdrop
+                },
+            },
         },
-        root: {
-            position: 'relative',
-            display: 'flex',
+        wrapper: {
+            display: 'flex', // ua-style reset
+            flexGrow: 1,
+            height: 0,
             flexDirection: 'column',
-            boxSizing: 'border-box',
             ...(hasSubFooter && {
                 overflowY: 'auto',
                 overscrollBehaviorY: 'none',
             }),
-            width: 'var(--p-flyout-width, auto)',
-            height: '100%',
-            minWidth: '320px',
-            maxWidth: 'var(--p-flyout-max-width, 1180px)',
-            color: primaryColor, // enables color inheritance for slotted content
-            background: backgroundColor,
-            ...(isOpen
-                ? {
-                    opacity: 1,
-                    transform: 'initial',
-                    transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
-                }
-                : {
-                    opacity: 0,
-                    transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
-                    transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
-                }),
-            boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
-                background: backgroundColorDark,
-            }),
         },
         header: {
             position: 'sticky',
@@ -6045,6 +6076,7 @@ const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) =>
         },
         content: {
             padding: contentPadding,
+            maxWidth: `calc(100vw - calc(${spacingFluidLarge} * 2))`,
             position: 'relative',
             zIndex: 0,
             backgroundColor, // to ensure scrollbar coloring is optimal for light theme
@@ -6097,7 +6129,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$M = (size, offset) => {
+const getComponentCss$O = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6117,7 +6149,7 @@ const getComponentCss$M = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$L = (direction, wrap) => {
+const getComponentCss$N = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6143,7 +6175,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$K = (size, align, color, ellipsis, theme) => {
+const getComponentCss$M = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6205,7 +6237,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$J = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$L = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6313,7 +6345,7 @@ const isFlippableIcon = (name, source) => {
             name === 'logout' ||
             name === 'send'));
 };
-const getComponentCss$I = (name, source, color, size, theme) => {
+const getComponentCss$K = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -6419,7 +6451,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS$1 = getMediaQueryMax('s');
-const getComponentCss$H = (state, hasAction, hasClose, theme) => {
+const getComponentCss$J = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6452,7 +6484,7 @@ const getComponentCss$H = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$I = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
         root: {
             textDecoration: underline ? 'underline' : 'none',
@@ -6484,7 +6516,7 @@ const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$H = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
@@ -6530,7 +6562,7 @@ const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 // because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$G = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -6596,9 +6628,9 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6636,6 +6668,14 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                     },
                 },
             }),
+            ...(hasPriceOriginal && {
+                s: {
+                    color: contrastMediumColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: contrastMediumColorDark,
+                    }),
+                },
+            }),
         },
         root: {
             display: 'flex',
@@ -6694,29 +6734,39 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
             textAlign: 'center',
         },
         heading: {
+            margin: '0 0 2px', // ua-style reset
             ...headingSmallStyle,
             ...fontHyphenationStyle,
             ...getMultilineEllipsis(3),
-            margin: '0 0 2px',
         },
         price: {
-            ...textXSmallStyle,
-            ...getMultilineEllipsis(2),
-            margin: 0, // ua-style reset
-        },
-        description: {
-            ...textXXSmallStyle,
-            ...getMultilineEllipsis(2),
             margin: 0, // ua-style reset
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
+            ...textXSmallStyle,
+            ...(hasPriceOriginal && {
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                columnGap: spacingFluidXSmall,
             }),
         },
+        ...(hasDescription && {
+            description: {
+                margin: 0, // ua-style reset
+                ...textXXSmallStyle,
+                ...getMultilineEllipsis(2),
+                color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
+            },
+        }),
+        ...(hasPriceOriginal && {
+            'sr-only': getHiddenTextJssStyle(),
+        }),
     });
 };
 
-const getComponentCss$C = (...args) => {
+const getComponentCss$E = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
         'link-overlay': {
@@ -6737,7 +6787,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$B = (size) => {
+const getComponentCss$D = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6781,10 +6831,13 @@ const getComponentCss$B = (size) => {
     });
 };
 
+const cssVariableSpacingTop = '--p-modal-spacing-top';
+const cssVariableSpacingBottom = '--p-modal-spacing-bottom';
 const mediaQueryXl = getMediaQueryMin('xl');
 const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
-const marginTopBottom = 'clamp(16px, 7vh, 192px)';
+const marginTopBottomFallback = 'clamp(16px, 7vh, 192px)';
+const marginTopBottomXlandXxlFallback = 'min(192px, 10vh)';
 const footerShadowClass = 'footer--shadow';
 const getFullscreenJssStyles = (fullscreen) => {
     return fullscreen
@@ -6799,7 +6852,7 @@ const getFullscreenJssStyles = (fullscreen) => {
             minWidth: '276px', // on viewport 320px: calc(${gridColumnWidthBase} * 6 + ${gridGap} * 5)
             maxWidth: '1535.5px', // on viewport 1920px: `calc(${gridColumnWidthXXL} * 14 + ${gridGap} * 13)`
             minHeight: 'auto',
-            margin: `${marginTopBottom} ${gridExtendedOffsetBase}`,
+            margin: `var(${cssVariableSpacingTop},${marginTopBottomFallback}) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},${marginTopBottomFallback})`,
             borderRadius: borderRadiusMedium,
         };
 };
@@ -6832,7 +6885,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
         },
     };
 };
-const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$C = (isOpen, backdrop, isFullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
@@ -6846,7 +6899,7 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...getBackdropJssStyle(isOpen, MODAL_Z_INDEX, theme, duration),
+                    ...getBackdropJssStyle(isOpen, MODAL_Z_INDEX, theme, duration, backdrop),
                 }),
             },
             '::slotted': addImportantToEachRule(mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
@@ -6909,7 +6962,9 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                 border: 0,
             },
             [mediaQueryXl]: {
-                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
+                margin: isFullscreenForXlAndXxl
+                    ? 0
+                    : `var(${cssVariableSpacingTop},${marginTopBottomXlandXxlFallback}) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},${marginTopBottomXlandXxlFallback})`,
             },
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: primaryColorDark,
@@ -6997,7 +7052,7 @@ const colorToFilterMap = {
     light: colorToFilterLight,
     dark: colorToFilterDark,
 };
-const getComponentCss$z = (size, color, theme) => {
+const getComponentCss$B = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -7041,7 +7096,7 @@ const getComponentCss$z = (size, color, theme) => {
     });
 };
 
-const getComponentCss$y = (theme) => {
+const getComponentCss$A = (theme) => {
     const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { highlightColor } = getHighContrastColors();
@@ -7236,7 +7291,9 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
     };
 };
 
-const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
+
+const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -7250,10 +7307,11 @@ const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWi
             },
             ...(isWithinForm &&
                 addImportantToEachRule({
-                    '::slotted([slot=internal-select])': {
+                    [`::slotted([slot=${INTERNAL_MULTI_SELECT_SLOT}])`]: {
                         position: 'absolute',
                         opacity: 0,
                         height: '0px',
+                        bottom: 0,
                     },
                 })),
             // TODO: re-use select-wrapper-style
@@ -7262,6 +7320,9 @@ const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWi
         root: {
             display: 'grid',
             gap: spacingStaticXSmall,
+            ...(isWithinForm && {
+                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
+            }),
         },
         wrapper: {
             position: 'relative',
@@ -7286,7 +7347,7 @@ const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWi
             placeSelf: 'center',
             padding: formButtonOrIconPadding,
         },
-        listbox: getListStyles$1(isOpen, direction, theme),
+        listbox: getListStyles$2(isOpen, direction, theme),
         // TODO: extract (maybe even as functional component) and re-use in multi-select and select-wrapper
         'no-results': {
             padding: `${spacingStaticSmall} 12px`,
@@ -7386,7 +7447,7 @@ const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
         }),
     };
 };
-const getListStyles$1 = (isOpen, direction, theme) => {
+const getListStyles$2 = (isOpen, direction, theme) => {
     const isDirectionDown = direction === 'down';
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
@@ -7433,7 +7494,7 @@ const disabledCursorStyle = {
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
 const hiddenStyle = { display: 'none' };
-const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$y = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -7568,7 +7629,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -7749,7 +7810,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$u = (direction, isNative, theme) => {
+const getComponentCss$w = (direction, isNative, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -7863,7 +7924,7 @@ const getComponentCss$u = (direction, isNative, theme) => {
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$t = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = isHighContrastMode
         ? getHighContrastColors().canvasColor
         : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
@@ -7961,7 +8022,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$u = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const backgroundColorLight = {
@@ -8128,7 +8189,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     };
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
@@ -8201,7 +8262,7 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$q = (maxWidth, columns) => {
+const getComponentCss$s = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
@@ -8222,7 +8283,7 @@ const getComponentCss$q = (maxWidth, columns) => {
 };
 
 const dropdownPositionVar = '--p-internal-dropdown-position';
-const getButtonStyles = (direction, isOpen, state, theme) => {
+const getButtonStyles$1 = (direction, isOpen, state, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
@@ -8383,7 +8444,7 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
         },
     };
 };
-const getListStyles = (direction, theme) => {
+const getListStyles$1 = (direction, theme) => {
     const isDirectionDown = direction === 'down';
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor, } = getThemedColors(theme);
@@ -8497,7 +8558,7 @@ const getListStyles = (direction, theme) => {
         },
     };
 };
-const getComponentCss$p = (direction, isOpen, state, disabled, filter, isNativePopover, theme) => {
+const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopover, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8529,10 +8590,10 @@ const getComponentCss$p = (direction, isOpen, state, disabled, filter, isNativeP
         }),
     }, filter
         ? getFilterStyles(direction, isOpen, state, disabled, theme)
-        : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
+        : getButtonStyles$1(direction, isOpen, state, theme), isOpen && getListStyles$1(direction, theme)));
 };
 
-const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8587,6 +8648,270 @@ const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, them
     });
 };
 
+// TODO: Enforce order of slotted text, img
+const getComponentCss$p = (theme) => {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                ...hostHiddenStyles,
+            },
+            '::slotted(img)': {
+                height: fontLineHeight,
+                borderRadius: borderRadiusSmall,
+            },
+        }),
+        ...getOptionStyles(theme),
+        icon: {
+            marginInlineStart: 'auto',
+        },
+    });
+};
+// TODO: Copied from multi-select and select-wrapper-dropdown, extract and reuse
+const getOptionStyles = (theme) => {
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        option: {
+            display: 'flex',
+            // justifyContent: 'space-between', // TODO: Commenented out
+            gap: '12px',
+            padding: `${spacingStaticSmall} 12px`,
+            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
+            minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            cursor: 'pointer',
+            textAlign: 'start',
+            wordBreak: 'break-word',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusSmall,
+            transition: `${getTransition('background-color')}, ${getTransition('color')}`,
+            ...getNoResultsOptionJssStyle(),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: contrastLowColorDark,
+                    }),
+                },
+            }),
+            '&--selected': {
+                cursor: 'default',
+                pointerEvents: 'none',
+                background: backgroundSurfaceColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundSurfaceColorDark,
+                }),
+            },
+            '&--highlighted': {
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: contrastLowColorDark,
+                }),
+            },
+            '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+                }),
+            },
+            '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            },
+            '&--hidden': {
+                display: 'none',
+            },
+        },
+    };
+};
+
+const INTERNAL_SELECT_SLOT = 'internal-select';
+
+const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                ...colorSchemeStyles,
+                ...hostHiddenStyles,
+            }),
+            ...(isWithinForm &&
+                addImportantToEachRule({
+                    [`::slotted([slot=${INTERNAL_SELECT_SLOT}])`]: {
+                        position: 'absolute',
+                        opacity: 0,
+                        height: '0px',
+                        bottom: 0,
+                    },
+                })),
+            // TODO: re-use select-wrapper-style
+            button: getButtonStyles(isDisabled, direction, isOpen, state, theme),
+        },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+            ...(isWithinForm && {
+                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
+            }),
+        },
+        wrapper: {
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
+        },
+        icon: {
+            gridArea: '1/3',
+            placeSelf: 'center',
+            padding: formButtonOrIconPadding,
+            pointerEvents: 'none',
+            transform: 'rotate3d(0,0,1,0.0001deg)', // needs to be a little more than 0 for correct direction in safari
+            transition: getTransition('transform'),
+            '&--rotate': {
+                transform: 'rotate3d(0,0,1,180deg)',
+            },
+        },
+        listbox: getListStyles(isOpen, direction, theme),
+        'sr-only': getHiddenTextJssStyle(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+// TODO: Rename to JSSStyles
+// TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
+const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return {
+        textAlign: 'start', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
+        overflowX: 'hidden', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
+        whiteSpace: 'nowrap', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
+        gridArea: '1/1/1/-1',
+        flex: 1,
+        minWidth: 0,
+        // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
+        height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, // we need 10px additionally so input height becomes 54px, // we need 6px additionally so input height becomes 50px
+        font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is alig
+        margin: 0, // necessary reset for iOS Safari 15 (and maybe other browsers)
+        padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+        paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(1),
+        boxSizing: 'border-box',
+        outline: 0,
+        WebkitAppearance: 'none', // iOS safari
+        appearance: 'none',
+        ...textSmallStyle,
+        textOverflow: 'ellipsis',
+        cursor: 'pointer',
+        '&:disabled': {
+            cursor: 'not-allowed',
+        },
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
+        color: primaryColor,
+        '&:not(:focus)': {
+            ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
+            ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
+        }, // Opacity fixes placeholder being shown lighter in firefox
+        ...hoverMediaQuery({
+            '&:hover:not(:disabled):not(:focus),label:hover~.wrapper &:not(:disabled):not(:focus)': {
+                borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                }),
+            },
+        }),
+        ...(!isDisabled && {
+            '&:focus': {
+                borderColor: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: primaryColorDark,
+                }),
+            },
+        }),
+        background: backgroundColor,
+        border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
+        borderRadius: borderRadiusSmall,
+        ...(isOpen && {
+            [isDirectionDown ? 'paddingBottom' : 'paddingTop']: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
+            [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
+            [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+            [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+        }),
+        ...(isDisabled && {
+            ...getPlaceholderJssStyle({ color: disabledColor }),
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
+        }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: primaryColorDark,
+            background: backgroundColorDark,
+            border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
+            ...(isOpen && {
+                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
+            }),
+            ...(isDisabled && {
+                ...getPlaceholderJssStyle({ color: disabledColorDark }),
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+                WebkitTextFillColor: disabledColorDark,
+            }),
+        }),
+    };
+};
+// TODO: Rename to JSSStyles
+// TODO: Copied from multi-select, extract and use in select and multi-select
+const getListStyles = (isOpen, direction, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
+    return {
+        position: 'absolute',
+        margin: 0,
+        display: isOpen ? 'flex' : 'none',
+        flexDirection: 'column',
+        gap: spacingStaticSmall,
+        padding: '6px',
+        ...textSmallStyle,
+        zIndex: 10,
+        // TODO: Inset inline 0
+        left: 0,
+        right: 0,
+        [isDirectionDown ? 'top' : 'bottom']: '100%',
+        boxSizing: 'border-box',
+        maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`, // 8.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
+        overflowY: 'auto',
+        WebkitOverflowScrolling: 'touch',
+        background: backgroundColor,
+        border: `2px solid ${primaryColor}`,
+        [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
+        borderRadius: borderRadiusSmall,
+        [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
+        [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+        scrollbarWidth: 'thin', // firefox
+        scrollbarColor: 'auto', // firefox
+        transition: getTransition('border-color'),
+        transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundColorDark,
+            borderColor: primaryColorDark,
+        }),
+    };
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -9557,6 +9882,16 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     ...(isNumber && {
                         MozAppearance: 'textfield', // hides up/down spin button for Firefox
                     }),
+                    ...((isCalendar || isTime) && {
+                        // for native placeholder color in safari, background has to be a special value, `transparent` or `rgba(0,0,0,0)` won't work
+                        // this works nice for `theme="light"`, but for `theme="dark"` placeholder appears blue which is still better
+                        // than having invisible dots or colons for data/time or not seeing the value at all after selection
+                        // found on https://browserstrangeness.bitbucket.io/css_hacks.html#safari
+                        '@supports (-webkit-hyphens: none)': {
+                            background: 'rgba(0,0,1,0)',
+                            color: isThemeDark(theme) ? getThemedColors(theme).primaryColor : 'initial',
+                        },
+                    }),
                 }),
                 // TODO: move into getSlottedTextFieldTextareaSelectStyles()
                 '::slotted': {
@@ -9894,4 +10229,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$13 as getAccordionCss, getComponentCss$12 as getBannerCss, getComponentCss$_ as getButtonCss, getComponentCss$11 as getButtonGroupCss, getComponentCss$10 as getButtonPureCss, getComponentCss$$ as getButtonTileCss, getComponentCss$Z as getCarouselCss, getComponentCss$Y as getCheckboxWrapperCss, getComponentCss$X as getContentWrapperCss, getComponentCss$W as getCrestCss, getComponentCss$V as getDisplayCss, getComponentCss$U as getDividerCss, getComponentCss$S as getFieldsetCss, getComponentCss$T as getFieldsetWrapperCss, getComponentCss$Q as getFlexCss, getComponentCss$R as getFlexItemCss, getComponentCss$N as getFlyoutCss, getComponentCss$P as getFlyoutNavigationCss, getComponentCss$O as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$L as getGridCss, getComponentCss$M as getGridItemCss, getComponentCss$K as getHeadingCss, getComponentCss$J as getHeadlineCss, getComponentCss$I as getIconCss, getComponentCss$H as getInlineNotificationCss, getComponentCss$F as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$F as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$E as getLinkTileModelSignatureCss, getComponentCss$D as getLinkTileProductCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$15 as getAccordionCss, getComponentCss$14 as getBannerCss, getComponentCss$10 as getButtonCss, getComponentCss$13 as getButtonGroupCss, getComponentCss$12 as getButtonPureCss, getComponentCss$11 as getButtonTileCss, getComponentCss$$ as getCarouselCss, getComponentCss$_ as getCheckboxWrapperCss, getComponentCss$Z as getContentWrapperCss, getComponentCss$Y as getCrestCss, getComponentCss$X as getDisplayCss, getComponentCss$W as getDividerCss, getComponentCss$U as getFieldsetCss, getComponentCss$V as getFieldsetWrapperCss, getComponentCss$S as getFlexCss, getComponentCss$T as getFlexItemCss, getComponentCss$P as getFlyoutCss, getComponentCss$R as getFlyoutNavigationCss, getComponentCss$Q as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$N as getGridCss, getComponentCss$O as getGridItemCss, getComponentCss$M as getHeadingCss, getComponentCss$L as getHeadlineCss, getComponentCss$K as getIconCss, getComponentCss$J as getInlineNotificationCss, getComponentCss$H as getLinkCss, getComponentCss$I as getLinkPureCss, getComponentCss$H as getLinkSocialCss, getComponentCss$E as getLinkTileCss, getComponentCss$G as getLinkTileModelSignatureCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$D as getMarqueCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$z as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };