@porsche-design-system/components-react 3.6.1 → 3.7.0-rc.0

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

@@ -3957,6 +3957,161 @@ const isThemeDark = (theme) => {
 const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
 const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
 
+const getThemedFormStateColors = (theme, state) => {
+    const themedColors = getThemedColors(theme);
+    return {
+        formStateColor: themedColors[`${state}Color`],
+        formStateHoverColor: themedColors[`${state}ColorDarken`],
+    };
+};
+
+const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    return {
+        [`::slotted(${child})`]: {
+            display: 'block',
+            width: '100%',
+            height: child !== 'textarea'
+                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
+                : 'auto',
+            margin: 0,
+            outline: 0,
+            WebkitAppearance: 'none',
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+            textIndent: 0,
+            color: primaryColor,
+            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+            ...additionalDefaultJssStyle,
+        },
+        ...hoverMediaQuery({
+            // with the media query the selector has higher priority and overrides disabled styles
+            [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
+                borderColor: formStateHoverColor || primaryColor,
+            },
+        }),
+        [`::slotted(${child}:focus)`]: {
+            borderColor: primaryColor,
+        },
+        [`::slotted(${child}:disabled)`]: {
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
+        },
+        ...(child !== 'select' && {
+            [`::slotted(${child}[readonly])`]: {
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+            },
+        }),
+    };
+};
+const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles, additionalLabelJssStyle) => {
+    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
+    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
+    return {
+        label: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacingStaticXSmall,
+            position: 'relative',
+            '&__text': {
+                display: 'block',
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' })),
+                ...textSmallStyle,
+                color: isDisabled ? disabledColor : primaryColor,
+                transition: getTransition('color'),
+                '&+&': {
+                    marginTop: `-${spacingStaticXSmall}`,
+                    fontSize: fontSizeTextXSmall,
+                    ...(!isDisabled && {
+                        color: contrastHighColor,
+                    }),
+                },
+                ...hoverMediaQuery({
+                    '&:hover': {
+                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
+                            (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
+                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
+                        },
+                    },
+                }),
+            },
+            ...additionalLabelJssStyle,
+        },
+        ...(counterOrUnitOrIconStyles && {
+            [counterOrUnitOrIconStylesKey]: {
+                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
+                pointerEvents: 'none',
+                ...(isDisabled && {
+                    color: disabledColor,
+                    cursor: 'not-allowed',
+                }),
+            },
+        }),
+    };
+};
+
+const OPTION_HEIGHT = 40; // optgroups are higher and ignored
+const MULTI_SELECT_OPTION_HEIGHT = 44;
+const getSelectOptionStyles = (theme, additionalOptionJssStyle) => {
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        option: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '12px',
+            padding: `${spacingStaticSmall} 12px`,
+            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
+            color: contrastHighColor,
+            cursor: 'pointer',
+            textAlign: 'left',
+            wordBreak: 'break-word',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusSmall,
+            transition: ['background-color', 'color'].map(getTransition).join(),
+            ...getNoResultsOptionJssStyle(),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: contrastLowColor,
+                },
+            }),
+            '&--selected': {
+                background: backgroundSurfaceColor,
+            },
+            '&--highlighted': {
+                background: contrastLowColor,
+            },
+            '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+            },
+            '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+            },
+            '&--hidden': {
+                display: 'none',
+            },
+            ...additionalOptionJssStyle,
+        },
+    };
+};
+const getNoResultsOptionJssStyle = () => ({
+    '&[role=status]': {
+        cursor: 'not-allowed',
+    },
+    '&__sr': getHiddenTextJssStyle(),
+});
+
 const hasDocument = typeof document !== 'undefined';
 
 const formatObjectOutput = (value) => {
@@ -3971,7 +4126,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$Z = (size, compact, open, theme) => {
+const getComponentCss$$ = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -4098,7 +4253,7 @@ const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}m
 const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
 const topBottomFallback = '56px';
-const getComponentCss$Y = (isOpen) => {
+const getComponentCss$_ = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4160,7 +4315,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$X = (direction) => {
+const getComponentCss$Z = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4296,7 +4451,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$W = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$Y = (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: {
@@ -4467,7 +4622,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$V = (isDisabledOrLoading, ...args) => {
+const getComponentCss$X = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4588,7 +4743,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$W = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4647,7 +4802,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$V = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
@@ -4842,14 +4997,6 @@ const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHead
     });
 };
 
-const getThemedFormStateColors = (theme, state) => {
-    const themedColors = getThemedColors(theme);
-    return {
-        formStateColor: themedColors[`${state}Color`],
-        formStateHoverColor: themedColors[`${state}ColorDarken`],
-    };
-};
-
 const getFunctionalComponentRequiredStyles = () => {
     return {
         required: {
@@ -4962,7 +5109,7 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$S = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$U = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5012,7 +5159,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$R = (width) => {
+const getComponentCss$T = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5051,7 +5198,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$Q = () => {
+const getComponentCss$S = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5135,7 +5282,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$P = (size, align, color, ellipsis, theme) => {
+const getComponentCss$R = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5152,7 +5299,7 @@ const getComponentCss$P = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$O = (color, orientation, theme) => {
+const getComponentCss$Q = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -5177,7 +5324,7 @@ const getComponentCss$O = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5207,7 +5354,7 @@ const getComponentCss$N = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$O = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5247,7 +5394,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$N = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5269,7 +5416,7 @@ const getComponentCss$L = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$K = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$M = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -5294,7 +5441,7 @@ const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
 const cssVariableMaxWidth = '--p-flyout-max-width';
 const maxWidthDefault = '1180px';
 const minWidthDefault = '320px';
-const getComponentCss$J = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$L = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
     const isPositionLeft = position === 'left';
@@ -5414,7 +5561,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$I = (size, offset) => {
+const getComponentCss$K = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5434,7 +5581,7 @@ const getComponentCss$I = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$H = (direction, wrap) => {
+const getComponentCss$J = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5457,7 +5604,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$G = (size, align, color, ellipsis, theme) => {
+const getComponentCss$I = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5516,7 +5663,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$F = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$H = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5599,7 +5746,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$E = (color, size, theme) => {
+const getComponentCss$G = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -5690,7 +5837,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$D = (state, hasAction, hasClose, theme) => {
+const getComponentCss$F = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5716,7 +5863,7 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$E = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
         root: {
@@ -5756,7 +5903,7 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { linkColor } = getHighContrastColors();
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), hasSlottedAnchor && {
@@ -5801,7 +5948,7 @@ const getComponentCss$B = (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$A = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$C = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -5848,7 +5995,7 @@ const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
     });
 };
 
-const getComponentCss$z = (...args) => {
+const getComponentCss$B = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
         'link-overlay': {
@@ -5869,7 +6016,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$y = (size) => {
+const getComponentCss$A = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5957,7 +6104,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
         },
     };
 };
-const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader, hasFooter) => {
+const getComponentCss$z = (isOpen, isFullscreen, hasDismissButton, hasHeader, hasFooter) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
     const duration = isOpen ? '.6s' : '.2s';
     const contentPadding = '32px';
@@ -6092,7 +6239,7 @@ const colorToFilterMap = {
         'contrast-high': filterDarkContrastHigh,
     },
 };
-const getComponentCss$w = (size, color, theme) => {
+const getComponentCss$y = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -6132,6 +6279,191 @@ const getComponentCss$w = (size, color, theme) => {
     });
 };
 
+const getComponentCss$x = (theme) => {
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                scrollMarginTop: spacingStaticSmall,
+                ...hostHiddenStyles,
+            }),
+        },
+        ...getSelectOptionStyles(theme),
+        checkbox: {
+            pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
+        },
+    });
+};
+
+/**
+ * Generates placeholder styles for an input element.
+ *
+ * @param {JssStyle} styles - The styles to apply to the placeholder.
+ * @returns {JssStyle} - The generated placeholder styles.
+ */
+const getPlaceholderJssStyle = (styles) => ({
+    '&::placeholder': styles,
+    '&::-webkit-input-placeholder': styles /* Chrome/Opera/Safari */,
+    '&::-moz-placeholder': styles /* Firefox 19+ */,
+    '&:-moz-placeholder': styles /* Firefox 18- */,
+});
+
+const inputYPadding = '13px';
+const selectorNativeSelect = '::slotted([slot=select])';
+const INPUT_HEIGHT_CALC = `${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2`;
+const getComponentCss$w = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, hasLabel, theme) => {
+    const { primaryColor, contrastMediumColor, contrastHighColor, backgroundColor, disabledColor } = getThemedColors(theme);
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    return getCss({
+        '@global': {
+            ...addImportantToEachRule({
+                ':host': {
+                    display: 'block',
+                    position: 'relative',
+                    ...hostHiddenStyles,
+                },
+                ...(isWithinForm && {
+                    [selectorNativeSelect]: {
+                        position: 'absolute',
+                        opacity: 0,
+                        height: '0px',
+                    },
+                }),
+            }),
+            ...getInputStyles(isDisabled, theme),
+        },
+        root: {
+            position: 'relative',
+        },
+        ...getListStyles$1(isOpen, direction, theme),
+        'input-container': {
+            display: 'flex',
+            background: backgroundColor,
+            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+            cursor: 'text',
+            ...hoverMediaQuery({
+                '&:hover:not(.disabled)': {
+                    borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                },
+            }),
+            ...(!isDisabled && {
+                '&:focus-within': {
+                    borderColor: primaryColor,
+                },
+            }),
+            border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            ...(isOpen && {
+                [isDirectionDown ? 'paddingBottom' : 'paddingTop']: '1px',
+                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
+                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            }),
+            ...(isDisabled && {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                borderColor: disabledColor,
+                WebkitTextFillColor: disabledColor,
+            }),
+        },
+        ...buildResponsiveStyles(hideLabel, (isHidden) => isHidden
+            ? {
+                label: {
+                    display: 'none',
+                },
+            }
+            : hasLabel &&
+                getLabelStyles('select', isDisabled, hideLabel, state, theme, undefined, {
+                    marginBottom: spacingStaticXSmall,
+                })),
+        icon: {
+            padding: `${inputYPadding} 15px`,
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            ...(isDisabled && { pointerEvents: 'none' }),
+        },
+        'reset-icon': {
+            padding: '4px',
+            margin: 'auto',
+        },
+        'toggle-icon': {
+            transform: 'rotate3d(0,0,1,0.0001deg)',
+            transition: getTransition('transform'),
+            '&--open': {
+                transform: 'rotate3d(0,0,1,180deg)',
+            },
+        },
+        'no-results': {
+            padding: `${spacingStaticSmall} 12px`,
+            color: contrastHighColor,
+            boxSizing: 'border-box',
+            ...getNoResultsOptionJssStyle(),
+        },
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+        'sr-text': getHiddenTextJssStyle(),
+    });
+};
+const getInputStyles = (isDisabled, theme) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    return {
+        input: {
+            flex: 1,
+            minWidth: 0,
+            height: `calc(${INPUT_HEIGHT_CALC})`,
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+            color: primaryColor,
+            padding: `${inputYPadding} ${spacingStaticMedium}`,
+            boxSizing: 'border-box',
+            border: 0,
+            outline: 0,
+            appearance: 'none',
+            background: 'transparent',
+            ...textSmallStyle,
+            textOverflow: 'ellipsis',
+            '&:disabled': {
+                cursor: 'not-allowed',
+            },
+            '&:not(:focus)': getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
+            ...(isDisabled && getPlaceholderJssStyle({ color: disabledColor })),
+        },
+    };
+};
+const getListStyles$1 = (isOpen, direction, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    return {
+        listbox: {
+            position: 'absolute',
+            margin: '0',
+            display: isOpen ? 'flex' : 'none',
+            flexDirection: 'column',
+            gap: spacingStaticSmall,
+            padding: '6px',
+            background: backgroundColor,
+            ...textSmallStyle,
+            zIndex: 10,
+            left: 0,
+            right: 0,
+            [isDirectionDown ? 'top' : 'bottom']: isDirectionDown
+                ? '100%'
+                : `calc((${INPUT_HEIGHT_CALC}) + 2 * ${borderWidthBase})`,
+            boxSizing: 'border-box',
+            maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`,
+            overflowY: 'auto',
+            WebkitOverflowScrolling: 'touch',
+            border: `2px solid ${primaryColor}`,
+            [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
+            borderRadius: borderRadiusSmall,
+            [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
+            [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'auto',
+            transition: getTransition('border-color'),
+            transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
+        },
+    };
+};
+
 const mediaQueryMinS = getMediaQueryMin('s');
 // button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
 // and text scale 200% works (almost) on mobile viewports too
@@ -6682,136 +7014,6 @@ const getComponentCss$q = (maxWidth, columns) => {
     });
 };
 
-const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
-    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    return {
-        [`::slotted(${child})`]: {
-            display: 'block',
-            width: '100%',
-            height: child !== 'textarea'
-                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
-                : 'auto',
-            margin: 0,
-            outline: 0,
-            WebkitAppearance: 'none',
-            appearance: 'none',
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            background: 'transparent',
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-            textIndent: 0,
-            color: primaryColor,
-            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
-            ...additionalDefaultJssStyle,
-        },
-        ...hoverMediaQuery({
-            // with the media query the selector has higher priority and overrides disabled styles
-            [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
-                borderColor: formStateHoverColor || primaryColor,
-            },
-        }),
-        [`::slotted(${child}:focus)`]: {
-            borderColor: primaryColor,
-        },
-        [`::slotted(${child}:disabled)`]: {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-            WebkitTextFillColor: disabledColor,
-        },
-        ...(child !== 'select' && {
-            [`::slotted(${child}[readonly])`]: {
-                borderColor: contrastLowColor,
-                background: contrastLowColor,
-            },
-        }),
-    };
-};
-const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles) => {
-    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
-    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
-    return {
-        label: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: spacingStaticXSmall,
-            position: 'relative',
-            '&__text': {
-                display: 'block',
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' })),
-                ...textSmallStyle,
-                color: isDisabled ? disabledColor : primaryColor,
-                transition: getTransition('color'),
-                '&+&': {
-                    marginTop: `-${spacingStaticXSmall}`,
-                    fontSize: fontSizeTextXSmall,
-                    ...(!isDisabled && {
-                        color: contrastHighColor,
-                    }),
-                },
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
-                            (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
-                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
-                        },
-                    },
-                }),
-            },
-        },
-        ...(counterOrUnitOrIconStyles && {
-            [counterOrUnitOrIconStylesKey]: {
-                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
-                pointerEvents: 'none',
-                ...(isDisabled && {
-                    color: disabledColor,
-                    cursor: 'not-allowed',
-                }),
-            },
-        }),
-    };
-};
-
-const OPTION_HEIGHT = 40; // optgroups are higher and ignored
-const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
-    return getCss({
-        '@global': addImportantToEachRule({
-            ':host': {
-                display: 'block',
-                ...hostHiddenStyles,
-            },
-            ...getBaseChildStyles('select', state, theme, {
-                position: 'static',
-                zIndex: 0,
-                cursor: 'pointer',
-                padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}`,
-                ...(hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }),
-            }),
-        }),
-        root: {
-            display: 'block',
-            position: 'relative',
-        },
-        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
-            icon: {
-                position: 'absolute',
-                bottom: '13px',
-                right: '15px',
-                transform: 'rotate3d(0,0,1,0.0001deg)',
-                transition: getTransition('transform'),
-                '&--open': {
-                    transform: 'rotate3d(0,0,1,180deg)',
-                },
-            },
-        }),
-        ...getFunctionalComponentRequiredStyles(),
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-    });
-};
-
 const dropdownPositionVar = '--p-internal-dropdown-position';
 const getButtonStyles = (direction, isOpen, state, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
@@ -6924,8 +7126,7 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
 };
 const getListStyles = (direction, theme) => {
     const isDirectionDown = direction === 'down';
-    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, } = getThemedColors(theme);
-    const { highlightColor } = getHighContrastColors();
+    const { primaryColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     return {
         '@global': {
             ul: {
@@ -6957,45 +7158,12 @@ const getListStyles = (direction, theme) => {
                 transform: 'translate3d(0,0,0)', // fix iOS bug if less than 5 items are displayed
             },
         },
-        option: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            color: contrastHighColor,
-            cursor: 'pointer',
-            textAlign: 'left',
-            wordBreak: 'break-word',
-            boxSizing: 'border-box',
-            borderRadius: borderRadiusSmall,
-            transition: ['background-color', 'color'].map(getTransition).join(),
-            '&[role=status]': {
-                cursor: 'not-allowed',
-            },
-            '&__sr': getHiddenTextJssStyle(),
-            ...hoverMediaQuery({
-                '&:not([aria-disabled]):not([role=status]):hover': {
-                    color: isHighContrastMode ? highlightColor : primaryColor,
-                    background: backgroundSurfaceColor,
-                },
-            }),
-            '&--highlighted, &--selected': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-                background: backgroundSurfaceColor,
-            },
+        ...getSelectOptionStyles(theme, {
             '&--selected': {
                 cursor: 'default',
                 pointerEvents: 'none',
             },
-            '&--disabled': {
-                cursor: 'not-allowed',
-                color: disabledColor,
-            },
-            '&--hidden': {
-                display: 'none',
-            },
-        },
+        }),
         optgroup: {
             display: 'block',
             padding: '3px 14px',
@@ -7009,7 +7177,7 @@ const getListStyles = (direction, theme) => {
         },
     };
 };
-const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) => {
+const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
     return getCss(
@@ -7043,6 +7211,42 @@ const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) =>
         : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
 };
 
+const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                display: 'block',
+                ...hostHiddenStyles,
+            },
+            ...getBaseChildStyles('select', state, theme, {
+                position: 'static',
+                zIndex: 0,
+                cursor: 'pointer',
+                padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}`,
+                ...(hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }),
+            }),
+        }),
+        root: {
+            display: 'block',
+            position: 'relative',
+        },
+        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
+            icon: {
+                position: 'absolute',
+                bottom: '13px',
+                right: '15px',
+                transform: 'rotate3d(0,0,1,0.0001deg)',
+                transition: getTransition('transform'),
+                '&--open': {
+                    transform: 'rotate3d(0,0,1,180deg)',
+                },
+            },
+        }),
+        ...getFunctionalComponentRequiredStyles(),
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -8230,47 +8434,49 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$Z;
-exports.getBannerCss = getComponentCss$Y;
-exports.getButtonCss = getComponentCss$U;
-exports.getButtonGroupCss = getComponentCss$X;
-exports.getButtonPureCss = getComponentCss$W;
-exports.getButtonTileCss = getComponentCss$V;
-exports.getCarouselCss = getComponentCss$T;
-exports.getCheckboxWrapperCss = getComponentCss$S;
-exports.getContentWrapperCss = getComponentCss$R;
-exports.getCrestCss = getComponentCss$Q;
-exports.getDisplayCss = getComponentCss$P;
-exports.getDividerCss = getComponentCss$O;
-exports.getFieldsetCss = getComponentCss$M;
-exports.getFieldsetWrapperCss = getComponentCss$N;
-exports.getFlexCss = getComponentCss$K;
-exports.getFlexItemCss = getComponentCss$L;
-exports.getFlyoutCss = getComponentCss$J;
+exports.getAccordionCss = getComponentCss$$;
+exports.getBannerCss = getComponentCss$_;
+exports.getButtonCss = getComponentCss$W;
+exports.getButtonGroupCss = getComponentCss$Z;
+exports.getButtonPureCss = getComponentCss$Y;
+exports.getButtonTileCss = getComponentCss$X;
+exports.getCarouselCss = getComponentCss$V;
+exports.getCheckboxWrapperCss = getComponentCss$U;
+exports.getContentWrapperCss = getComponentCss$T;
+exports.getCrestCss = getComponentCss$S;
+exports.getDisplayCss = getComponentCss$R;
+exports.getDividerCss = getComponentCss$Q;
+exports.getFieldsetCss = getComponentCss$O;
+exports.getFieldsetWrapperCss = getComponentCss$P;
+exports.getFlexCss = getComponentCss$M;
+exports.getFlexItemCss = getComponentCss$N;
+exports.getFlyoutCss = getComponentCss$L;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$H;
-exports.getGridItemCss = getComponentCss$I;
-exports.getHeadingCss = getComponentCss$G;
-exports.getHeadlineCss = getComponentCss$F;
-exports.getIconCss = getComponentCss$E;
-exports.getInlineNotificationCss = getComponentCss$D;
-exports.getLinkCss = getComponentCss$B;
-exports.getLinkPureCss = getComponentCss$C;
-exports.getLinkSocialCss = getComponentCss$B;
-exports.getLinkTileCss = getComponentCss$z;
-exports.getLinkTileModelSignatureCss = getComponentCss$A;
-exports.getMarqueCss = getComponentCss$y;
-exports.getModalCss = getComponentCss$x;
-exports.getModelSignatureCss = getComponentCss$w;
+exports.getGridCss = getComponentCss$J;
+exports.getGridItemCss = getComponentCss$K;
+exports.getHeadingCss = getComponentCss$I;
+exports.getHeadlineCss = getComponentCss$H;
+exports.getIconCss = getComponentCss$G;
+exports.getInlineNotificationCss = getComponentCss$F;
+exports.getLinkCss = getComponentCss$D;
+exports.getLinkPureCss = getComponentCss$E;
+exports.getLinkSocialCss = getComponentCss$D;
+exports.getLinkTileCss = getComponentCss$B;
+exports.getLinkTileModelSignatureCss = getComponentCss$C;
+exports.getMarqueCss = getComponentCss$A;
+exports.getModalCss = getComponentCss$z;
+exports.getModelSignatureCss = getComponentCss$y;
+exports.getMultiSelectCss = getComponentCss$w;
+exports.getMultiSelectOptionCss = getComponentCss$x;
 exports.getPaginationCss = 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$p;
-exports.getSelectWrapperDropdownCss = getComponentCss$o;
+exports.getSelectWrapperCss = getComponentCss$o;
+exports.getSelectWrapperDropdownCss = getComponentCss$p;
 exports.getSpinnerCss = getComponentCss$n;
 exports.getStepperHorizontalCss = getComponentCss$l;
 exports.getStepperHorizontalItemCss = getComponentCss$m;