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

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

@@ -3832,6 +3832,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,
@@ -3887,9 +3892,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,
@@ -3903,14 +3909,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]})`,
@@ -4016,7 +4025,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.
@@ -4064,7 +4073,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({
@@ -4182,6 +4191,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': {
@@ -4201,7 +4213,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({
@@ -4264,7 +4276,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$11 = (direction) => {
+const getComponentCss$13 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4415,7 +4427,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: {
@@ -4593,7 +4605,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$$ = (isDisabledOrLoading, ...args) => {
+const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4717,7 +4729,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');
@@ -4800,7 +4812,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();
@@ -4892,11 +4904,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: {
@@ -5217,7 +5228,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
@@ -5312,7 +5323,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$X = (width) => {
+const getComponentCss$Z = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5354,7 +5365,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$W = () => {
+const getComponentCss$Y = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5449,7 +5460,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': {
@@ -5469,7 +5480,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 = {
@@ -5512,7 +5523,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': {
@@ -5548,7 +5559,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': {
@@ -5594,7 +5605,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({
@@ -5616,7 +5627,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': {
@@ -5637,6 +5648,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';
@@ -5644,7 +5668,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)
@@ -5665,20 +5689,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)',
@@ -5790,7 +5807,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)
@@ -5965,7 +5982,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';
@@ -5977,49 +5994,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',
@@ -6047,6 +6078,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
@@ -6099,7 +6131,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({
@@ -6119,7 +6151,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': {
@@ -6145,7 +6177,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': {
@@ -6207,7 +6239,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': {
@@ -6315,7 +6347,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);
@@ -6421,7 +6453,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': {
@@ -6454,7 +6486,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',
@@ -6486,7 +6518,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), {
@@ -6532,7 +6564,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,
@@ -6598,7 +6630,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+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({
@@ -6736,7 +6768,7 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$C = (...args) => {
+const getComponentCss$E = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
         'link-overlay': {
@@ -6757,7 +6789,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$B = (size) => {
+const getComponentCss$D = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6801,10 +6833,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
@@ -6819,7 +6854,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,
         };
 };
@@ -6852,7 +6887,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);
@@ -6866,7 +6901,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) => ({
@@ -6929,7 +6964,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,
@@ -7017,7 +7054,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({
@@ -7061,7 +7098,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();
@@ -7256,7 +7293,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({
@@ -7270,10 +7309,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
@@ -7282,6 +7322,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',
@@ -7306,7 +7349,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`,
@@ -7406,7 +7449,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');
@@ -7453,7 +7496,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({
@@ -7588,7 +7631,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()
@@ -7769,7 +7812,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)';
@@ -7883,7 +7926,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);
@@ -7981,7 +8024,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 = {
@@ -8148,7 +8191,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({
@@ -8221,7 +8264,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': {
@@ -8242,7 +8285,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);
@@ -8403,7 +8446,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);
@@ -8517,7 +8560,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({
@@ -8549,10 +8592,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': {
@@ -8607,6 +8650,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';
@@ -9577,6 +9884,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': {
@@ -9914,55 +10231,57 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$13;
-exports.getBannerCss = getComponentCss$12;
-exports.getButtonCss = getComponentCss$_;
-exports.getButtonGroupCss = getComponentCss$11;
-exports.getButtonPureCss = getComponentCss$10;
-exports.getButtonTileCss = getComponentCss$$;
-exports.getCarouselCss = getComponentCss$Z;
-exports.getCheckboxWrapperCss = getComponentCss$Y;
-exports.getContentWrapperCss = getComponentCss$X;
-exports.getCrestCss = getComponentCss$W;
-exports.getDisplayCss = getComponentCss$V;
-exports.getDividerCss = getComponentCss$U;
-exports.getFieldsetCss = getComponentCss$S;
-exports.getFieldsetWrapperCss = getComponentCss$T;
-exports.getFlexCss = getComponentCss$Q;
-exports.getFlexItemCss = getComponentCss$R;
-exports.getFlyoutCss = getComponentCss$N;
-exports.getFlyoutNavigationCss = getComponentCss$P;
-exports.getFlyoutNavigationItemCss = getComponentCss$O;
+exports.getAccordionCss = getComponentCss$15;
+exports.getBannerCss = getComponentCss$14;
+exports.getButtonCss = getComponentCss$10;
+exports.getButtonGroupCss = getComponentCss$13;
+exports.getButtonPureCss = getComponentCss$12;
+exports.getButtonTileCss = getComponentCss$11;
+exports.getCarouselCss = getComponentCss$$;
+exports.getCheckboxWrapperCss = getComponentCss$_;
+exports.getContentWrapperCss = getComponentCss$Z;
+exports.getCrestCss = getComponentCss$Y;
+exports.getDisplayCss = getComponentCss$X;
+exports.getDividerCss = getComponentCss$W;
+exports.getFieldsetCss = getComponentCss$U;
+exports.getFieldsetWrapperCss = getComponentCss$V;
+exports.getFlexCss = getComponentCss$S;
+exports.getFlexItemCss = getComponentCss$T;
+exports.getFlyoutCss = getComponentCss$P;
+exports.getFlyoutNavigationCss = getComponentCss$R;
+exports.getFlyoutNavigationItemCss = getComponentCss$Q;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$L;
-exports.getGridItemCss = getComponentCss$M;
-exports.getHeadingCss = getComponentCss$K;
-exports.getHeadlineCss = getComponentCss$J;
-exports.getIconCss = getComponentCss$I;
-exports.getInlineNotificationCss = getComponentCss$H;
-exports.getLinkCss = getComponentCss$F;
-exports.getLinkPureCss = getComponentCss$G;
-exports.getLinkSocialCss = getComponentCss$F;
-exports.getLinkTileCss = getComponentCss$C;
-exports.getLinkTileModelSignatureCss = getComponentCss$E;
-exports.getLinkTileProductCss = getComponentCss$D;
-exports.getMarqueCss = getComponentCss$B;
-exports.getModalCss = getComponentCss$A;
-exports.getModelSignatureCss = getComponentCss$z;
-exports.getMultiSelectCss = getComponentCss$x;
-exports.getMultiSelectOptionCss = getComponentCss$y;
-exports.getPaginationCss = getComponentCss$w;
-exports.getPinCodeCss = getComponentCss$v;
-exports.getPopoverCss = getComponentCss$u;
-exports.getRadioButtonWrapperCss = getComponentCss$t;
-exports.getScrollerCss = getComponentCss$s;
-exports.getSegmentedControlCss = getComponentCss$q;
-exports.getSegmentedControlItemCss = getComponentCss$r;
-exports.getSelectWrapperCss = getComponentCss$o;
-exports.getSelectWrapperDropdownCss = getComponentCss$p;
+exports.getGridCss = getComponentCss$N;
+exports.getGridItemCss = getComponentCss$O;
+exports.getHeadingCss = getComponentCss$M;
+exports.getHeadlineCss = getComponentCss$L;
+exports.getIconCss = getComponentCss$K;
+exports.getInlineNotificationCss = getComponentCss$J;
+exports.getLinkCss = getComponentCss$H;
+exports.getLinkPureCss = getComponentCss$I;
+exports.getLinkSocialCss = getComponentCss$H;
+exports.getLinkTileCss = getComponentCss$E;
+exports.getLinkTileModelSignatureCss = getComponentCss$G;
+exports.getLinkTileProductCss = getComponentCss$F;
+exports.getMarqueCss = getComponentCss$D;
+exports.getModalCss = getComponentCss$C;
+exports.getModelSignatureCss = getComponentCss$B;
+exports.getMultiSelectCss = getComponentCss$z;
+exports.getMultiSelectOptionCss = getComponentCss$A;
+exports.getPaginationCss = getComponentCss$y;
+exports.getPinCodeCss = getComponentCss$x;
+exports.getPopoverCss = getComponentCss$w;
+exports.getRadioButtonWrapperCss = getComponentCss$v;
+exports.getScrollerCss = getComponentCss$u;
+exports.getSegmentedControlCss = getComponentCss$s;
+exports.getSegmentedControlItemCss = getComponentCss$t;
+exports.getSelectCss = getComponentCss$o;
+exports.getSelectOptionCss = getComponentCss$p;
+exports.getSelectWrapperCss = getComponentCss$q;
+exports.getSelectWrapperDropdownCss = getComponentCss$r;
 exports.getSpinnerCss = getComponentCss$n;
 exports.getStepperHorizontalCss = getComponentCss$l;
 exports.getStepperHorizontalItemCss = getComponentCss$m;