@porsche-design-system/components-react 3.27.0-rc.5 → 3.27.0

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

@@ -3879,16 +3879,6 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
 // index.ts
 var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
-const OPTION_HEIGHT = 40;
-const MULTI_SELECT_OPTION_HEIGHT = 44;
-const getNoResultsOptionJssStyle = () => ({
-    '&[role=status]': {
-        cursor: 'not-allowed',
-    },
-    // TODO: shouldn't be used here, instead use sr-only functional component and style
-    '&__sr': getHiddenTextJssStyle(),
-});
-
 /**
  * Applies a style only on Chromium based browsers by using a media query which is only supported there.
  * https://browserstack.com/guide/create-browser-specific-css
@@ -3914,6 +3904,22 @@ const supportsNativePopover = () => {
 // determine it once
 supportsNativePopover();
 
+/**
+ * Checks if the current environment supports the native CSS Anchor Positioning.
+ *
+ * @returns {boolean} `true` if native CSS Anchor Positioning is supported, `false` otherwise.
+ */
+const supportsNativeCSSAnchorPositioning = () => {
+    // SSR or older browsers
+    if (typeof CSS === 'undefined' || !CSS.supports)
+        return false;
+    return CSS.supports('(anchor-name: --test) and (position-anchor: --test) and (position-area: bottom) and (position-try-fallbacks: flip-block) and (width: anchor-size(width))');
+};
+// determine it once
+const hasNativeCSSAnchorPositioningSupport = supportsNativeCSSAnchorPositioning();
+// getter for easy mocking
+const getHasCSSAnchorPositioningSupport = () => hasNativeCSSAnchorPositioningSupport;
+
 const hasDocument = typeof document !== 'undefined';
 
 const isThemeAuto = (theme) => {
@@ -3938,6 +3944,8 @@ const formatObjectOutput = (value) => {
 };
 `value, ${formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '')}`;
 
+const OPTION_LIST_SAFE_ZONE = 6;
+
 const getComponentCss$1a = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
@@ -5091,7 +5099,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5121,13 +5129,14 @@ const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasContro
             ...(hasControlsSlot && {
                 'slot[name="controls"]': {
                     display: 'block',
-                    gridColumnStart: 1,
+                    gridColumn: '1/-1',
                     gridRowStart: 3,
                     alignSelf: 'center', // ensures vertical alignment to prev/next buttons
-                    ...(isHeaderAlignCenter &&
-                        !hasNavigation && {
-                        justifySelf: 'center',
-                    }),
+                    justifySelf: alignControls !== 'auto' ? alignControls : isHeaderAlignCenter ? 'center' : 'start',
+                    [mediaQueryS]: {
+                        gridColumn: alignControls !== 'center' && hasNavigation ? '1/2' : '1/-1',
+                        justifySelf: alignControls !== 'auto' ? alignControls : isHeaderAlignCenter && !hasNavigation ? 'center' : 'start',
+                    },
                 },
             }),
             ...addImportantToEachRule({
@@ -5214,9 +5223,6 @@ const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasContro
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
                     padding: `0 ${spacingMap[width].base}`,
-                    [getMediaQueryMax('xs')]: {
-                        paddingRight: `calc(${gridBasicOffsetBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
-                    },
                     [mediaQueryS]: {
                         padding: `0 ${spacingMap[width].s}`,
                     },
@@ -8084,111 +8090,6 @@ const getComponentCss$E = (model, safeZone, size, color, theme) => {
     });
 };
 
-const cssVariableMultiSelectPaddingInlineStart = '--p-internal-multi-select-option-padding-left';
-const getComponentCss$D = (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();
-    return getCss({
-        '@global': {
-            ':host': addImportantToEachRule({
-                scrollMarginTop: spacingStaticSmall, // Creates top margin when navigating with keyboard and list is scrolled automatically
-                ...hostHiddenStyles,
-            }),
-            ...preventFoucOfNestedElementsStyles,
-        },
-        option: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            paddingInlineStart: `var(${cssVariableMultiSelectPaddingInlineStart}, 12px)`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            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': {
-                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',
-            },
-        },
-        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- */,
-});
-
-// Used for elements that must overflow `overflow:hidden` containers, are positioned absolute and wrapped within a native `popover` element.
-const getPopoverResetJssStyle = () => {
-    return {
-        position: 'absolute',
-        border: 'none',
-        background: 'none',
-        pointerEvents: 'all',
-        padding: 0,
-        margin: 0,
-        overflow: 'initial',
-        '&:-internal-popover-in-top-layer::backdrop': {
-            display: 'none',
-        },
-    };
-};
-
 const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
@@ -8304,332 +8205,424 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
     };
 };
 
-const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
-    const { contrastHighColor } = getThemedColors(theme);
-    const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
-    return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    ...colorSchemeStyles,
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            // TODO: re-use select-wrapper-style
-            input: getInputStyles(isDisabled, direction, isOpen, state, theme),
-        },
-        root: {
-            display: 'grid',
-            gap: spacingStaticXSmall,
-            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
-            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
-        },
-        wrapper: {
-            position: 'relative',
-            display: 'grid',
-            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
-        },
-        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
-        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)',
-            },
-        },
-        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
-        button: {
-            gridArea: '1/2',
-            placeSelf: 'center',
-            padding: formButtonOrIconPadding,
-        },
-        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`,
-            boxSizing: 'border-box',
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
-            }),
-            ...getNoResultsOptionJssStyle(),
-        },
-        // TODO: maybe we should extract it as functional component too
-        'sr-only': getHiddenTextJssStyle(),
-        // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
-        // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-        ...(isNativePopoverCase && {
-            popover: {
-                ...getPopoverResetJssStyle(),
-            },
-        }),
-    });
-};
-// TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
-const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
-    const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
+const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, anchorName, cssVarScaling, theme) => {
+    const cssVarBackgroundColor = `--p-${componentName}-background-color`;
+    const cssVarTextColor = `--p-${componentName}-text-color`;
+    const cssVarBorderColor = `--p-${componentName}-border-color`;
+    const { backgroundColor, primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark, primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
     const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return {
-        gridArea: '1/1/1/-1',
-        flex: 1,
+        all: 'unset',
+        ...(getHasCSSAnchorPositioningSupport() && {
+            anchorName,
+        }),
+        display: 'grid',
+        gridTemplateColumns: `${hasSlottedImage ? 'auto ' : ''}minmax(0, 1fr) auto`,
+        alignItems: 'center',
+        gap: `max(4px, ${cssVarScaling} * 12px)`,
+        padding: `max(2px, ${cssVarScaling} * ${formElementPaddingVertical}) max(4px, ${cssVarScaling} * ${formElementPaddingHorizontal})`,
         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(2),
-        boxSizing: 'border-box',
-        outline: 0,
-        WebkitAppearance: 'none', // iOS safari
-        appearance: 'none',
-        ...textSmallStyle,
-        textOverflow: 'ellipsis',
-        '&:disabled': {
-            cursor: 'not-allowed',
-        },
+        height: `max(${fontLineHeight}, ${cssVarScaling} * (${fontLineHeight} + 10px))`,
+        boxSizing: 'content-box', // ensures height calculation is based on content, not including padding
+        font: textSmallStyle.font,
+        cursor: 'pointer',
         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 && {
-            // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
-            '&:focus': {
-                borderColor: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: primaryColorDark,
-                }),
-            },
-        }),
-        background: backgroundColor,
-        border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
+        color: `var(${cssVarTextColor}, ${primaryColor})`,
+        background: `var(${cssVarBackgroundColor}, ${backgroundColor})`,
+        border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateColor || contrastMediumColor})`,
         borderRadius: borderRadiusSmall,
-        ...(isOpen && {
-            ['paddingBottom' ]: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
-            ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
-            ['borderBottomLeftRadius' ]: 0,
-            ['borderBottomRightRadius' ]: 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 && {
-                ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
-            }),
+            color: `var(${cssVarTextColor}, ${primaryColorDark})`,
+            background: `var(${cssVarBackgroundColor}, ${backgroundColorDark})`,
+            border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark})`,
             ...(isDisabled && {
-                ...getPlaceholderJssStyle({ color: disabledColorDark }),
                 color: disabledColorDark,
                 borderColor: disabledColorDark,
-                WebkitTextFillColor: disabledColorDark,
             }),
         }),
+        ...(!isDisabled && {
+            ...hoverMediaQuery({
+                '&:hover,label:hover~&': {
+                    borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark})`,
+                    }),
+                },
+            }),
+            ...getFocusJssStyle(theme),
+        }),
     };
 };
-const getListStyles$2 = (isOpen, direction, theme) => {
-    const { primaryColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
+
+const getButtonImageJssStyle = {
+    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct calculations based on ex-unit
+    width: 'auto',
+    height: fontLineHeight,
+    borderRadius: borderRadiusSmall,
+};
+
+const getButtonLabelJssStyle = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+
+const getIconJssStyle = (componentName, isOpen) => {
+    const cssVarIconFilter = `--p-${componentName}-icon-filter`;
     return {
-        position: 'absolute',
-        margin: 0,
-        display: isOpen ? 'flex' : 'none',
-        flexDirection: 'column',
-        gap: spacingStaticSmall,
-        padding: '6px',
-        ...textSmallStyle,
-        zIndex: 10,
-        left: 0,
-        right: 0,
-        ['top' ]: '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}`,
-        ['borderTop' ]: 'none',
-        borderRadius: borderRadiusSmall,
-        ['borderTopLeftRadius' ]: 0,
-        ['borderTopRightRadius' ]: 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,
+        marginInlineEnd: '-3px', // to temporarily align with multi-select and select-wrapper
+        pointerEvents: 'none',
+        transform: `rotate3d(0,0,1,${isOpen ? '180' : '0.0001'}deg)`, // needs to be a little more than 0 for correct direction in safari
+        transition: getTransition('transform'),
+        ...(!isHighContrastMode && {
+            filter: `var(${cssVarIconFilter})`,
         }),
     };
 };
 
-const cssVariableSelectPaddingInlineStart = '--p-internal-select-option-padding-left';
-const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
-const scalingVar$1 = `var(${cssVarInternalSelectOptionScaling}, 1)`;
-// TODO: Enforce order of slotted text, img
-const getComponentCss$B = (theme) => {
-    return getCss({
-        '@global': {
-            ...addImportantToEachRule({
-                ':host': {
-                    // TODO: display is missing
-                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
-                    ...hostHiddenStyles,
-                },
-                '::slotted(img)': {
-                    height: fontLineHeight,
-                    borderRadius: borderRadiusSmall,
-                    width: 'auto',
-                },
-            }),
-            ...preventFoucOfNestedElementsStyles,
-        },
-        ...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 getNoResultsOptionJssStyle = () => ({
+    '&[role=status]': {
+        cursor: 'not-allowed',
+    },
+    // TODO: shouldn't be used here, instead use sr-only functional component and style
+    '&__sr': getHiddenTextJssStyle(),
+});
+
+const getOptionJssStyle = (componentName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+theme) => {
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, hoverColor, contrastLowColor, contrastHighColor, disabledColor } = getThemedColors(theme);
     const { highlightColor } = getHighContrastColors();
-    const gap = `max(4px, ${scalingVar$1} * 12px)`;
-    const paddingBlock = `max(2px, ${scalingVar$1} * ${spacingStaticSmall})`;
-    const paddingInline = `max(4px, ${scalingVar$1} * var(${cssVariableSelectPaddingInlineStart}, 12px)) max(4px, ${scalingVar$1} * 12px)`;
+    const gap = `max(4px, ${cssVarScaling} * 12px)`;
+    const paddingBlock = `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`;
+    const paddingInline = `max(4px, ${cssVarScaling} * var(--p-internal-${componentName}-padding-left, 12px)) max(4px, ${cssVarScaling} * 12px)`;
     return {
-        option: {
-            fontWeight: fontWeightRegular,
-            display: 'flex',
-            gap,
-            paddingBlock,
-            paddingInline,
-            minHeight: fontLineHeight, // preserves height for empty option
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
-            }),
-            cursor: 'pointer',
-            textAlign: 'start',
-            wordBreak: 'break-word',
-            boxSizing: 'content-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,
+        display: 'flex',
+        gap,
+        paddingBlock,
+        paddingInline,
+        minHeight: fontLineHeight, // preserves height for empty option
+        ...textSmallStyle,
+        color: contrastHighColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: contrastHighColorDark,
+        }),
+        cursor: 'pointer',
+        textAlign: 'start',
+        wordBreak: 'break-word',
+        boxSizing: 'content-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: hoverColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundSurfaceColorDark,
+                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+                    background: hoverColorDark,
                 }),
             },
-            '&--highlighted': {
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: contrastLowColorDark,
+        }),
+        '&--selected': {
+            ...(componentName === 'select-option' && {
+                cursor: 'default',
+                pointerEvents: 'none',
+            }),
+            background: hoverColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: hoverColorDark,
+            }),
+        },
+        '&--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 keyframesName = 'fade-in';
+const getPopoverKeyframesStyles = {
+    [`@keyframes ${keyframesName}`]: {
+        from: {
+            opacity: 0,
+        },
+        to: {
+            opacity: 1,
+        },
+    },
+};
+const getPopoverJssStyle = (isOpen, direction, anchorName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+optionHeight, theme) => {
+    const { contrastLowColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { contrastLowColor: contrastLowColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+    const minHeightOptionList = `calc(${4.5 * (optionHeight + 8) + 6 + 2}px)`; // 4.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
+    return {
+        all: 'unset',
+        position: 'absolute',
+        zIndex: 99, // needed for backwards compatibility, to enable browsers not supporting #top-layer
+        padding: `max(2px, ${cssVarScaling} * 6px)`,
+        display: isOpen ? 'flex' : 'none', // needed for backwards compatibility, otherwise 'flex' would be enough
+        flexDirection: 'column',
+        gap: `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`,
+        maxHeight: `max(${minHeightOptionList}, calc(50vh - 54px / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
+        boxSizing: 'border-box',
+        overflow: 'hidden auto',
+        scrollbarWidth: 'thin', // firefox
+        scrollbarColor: 'auto', // firefox
+        animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) ${keyframesName} ${motionEasingBase} forwards`,
+        filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.15))',
+        background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+        border: `1px solid ${contrastLowColor}`,
+        borderRadius: borderRadiusMedium,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundSurfaceColorDark,
+            borderColor: contrastLowColorDark,
+        }),
+        ...(getHasCSSAnchorPositioningSupport() && {
+            positionAnchor: anchorName,
+            positionVisibility: 'always',
+            positionTryOrder: 'normal',
+            positionArea: direction === 'up' ? 'top' : 'bottom',
+            positionTryFallbacks: 'flip-block',
+            width: 'anchor-size(width)',
+            maxHeight: `max(${minHeightOptionList}, calc(50vh - anchor-size(height) / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
+            margin: `${OPTION_LIST_SAFE_ZONE}px 0`,
+        }),
+        '&:not(:popover-open)': {
+            display: 'none',
+        },
+    };
+};
+
+const getComponentCss$D = (theme) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                    ...hostHiddenStyles,
                 }),
             },
-            '&--highlighted, &--selected': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+            ...preventFoucOfNestedElementsStyles,
+        },
+        option: getOptionJssStyle('multi-select-option', 1, 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 anchorName$2 = '--anchor-multi-select';
+const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, hasNativeCSSAnchorPositioningSupport, theme) => {
+    const { primaryColor, disabledColor, contrastHighColor, contrastMediumColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return getCss({
+        '@global': {
+            // @keyframes fade-in
+            ...getPopoverKeyframesStyles,
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
                 }),
             },
-            '&--disabled': {
-                cursor: 'not-allowed',
-                color: disabledColor,
+            ...preventFoucOfNestedElementsStyles,
+            input: {
+                gridArea: '1/1/1/-1',
+                flex: 1,
+                minWidth: 0,
+                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(2),
+                boxSizing: 'border-box',
+                outline: 0,
+                WebkitAppearance: 'none', // iOS safari
+                appearance: 'none',
+                ...textSmallStyle,
+                textOverflow: 'ellipsis',
+                '&: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,
+                ...(isDisabled && {
+                    ...getPlaceholderJssStyle({ color: disabledColor }),
+                    cursor: 'not-allowed',
+                    color: disabledColor,
+                    borderColor: disabledColor,
+                    WebkitTextFillColor: disabledColor,
+                }),
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabledColorDark,
+                    color: primaryColorDark,
+                    background: backgroundColorDark,
+                    border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
+                    ...(isDisabled && {
+                        ...getPlaceholderJssStyle({ color: disabledColorDark }),
+                        color: disabledColorDark,
+                        borderColor: disabledColorDark,
+                        WebkitTextFillColor: disabledColorDark,
+                    }),
+                }),
+                ...(hasNativeCSSAnchorPositioningSupport && {
+                    anchorName: anchorName$2,
                 }),
             },
-            '&--hidden': {
-                display: 'none',
+            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$2, 1, 44, theme),
+        },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
+        },
+        wrapper: {
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
+        },
+        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
+        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)',
             },
         },
-    };
+        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
+        button: {
+            gridArea: '1/2',
+            placeSelf: 'center',
+            padding: formButtonOrIconPadding,
+        },
+        // TODO: extract (maybe even as functional component) and re-use in multi-select and select-wrapper
+        'no-results': {
+            padding: `${spacingStaticSmall} 12px`,
+            boxSizing: 'border-box',
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            ...getNoResultsOptionJssStyle(),
+        },
+        // TODO: maybe we should extract it as functional component too
+        'sr-only': getHiddenTextJssStyle(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
 };
 
 const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
 const scalingVar = `var(${cssVarInternalOptgroupScaling}, 1)`;
-const getComponentCss$A = (isDisabled, theme) => getCss({
-    '@global': {
-        ':host': addImportantToEachRule({
-            ...colorSchemeStyles,
-            ...hostHiddenStyles,
-        }),
-        '::slotted(*)': {
-            [cssVariableSelectPaddingInlineStart]: '28px',
-            [cssVariableMultiSelectPaddingInlineStart]: '28px',
-        },
-    },
-    ...getOptgroupStyles(isDisabled, theme),
-});
-const getOptgroupStyles = (isDisabled, theme) => {
+const getComponentCss$B = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
-    const gap = `max(2px, ${scalingVar} * ${spacingStaticSmall})`;
     const padding = `max(2px, ${scalingVar} * ${spacingStaticSmall}) max(4px, ${scalingVar} * 12px)`;
-    return {
-        optgroup: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap,
-        },
-        label: {
-            color: primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
+    const gap = `max(2px, ${scalingVar} * ${spacingStaticSmall})`;
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                ...colorSchemeStyles,
+                ...hostHiddenStyles,
             }),
-            ...(isDisabled && {
-                color: disabledColor,
+            '::slotted(*)': {
+                '--p-internal-select-option-padding-left': '28px',
+                '--p-internal-multi-select-option-padding-left': '28px',
+            },
+            '[role="group"]': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap,
+            },
+            '[role="presentation"]': {
+                padding,
+                font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
+                color: primaryColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabledColorDark,
+                    color: primaryColorDark,
                 }),
-            }),
-            display: 'block',
-            padding,
-            fontSize: fontSizeTextXSmall,
-            fontWeight: fontWeightSemiBold,
+                ...(isDisabled && {
+                    color: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                    }),
+                }),
+            },
         },
-    };
+    });
 };
 
 const mediaQueryMinS = getMediaQueryMin('s');
@@ -8642,7 +8635,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$z = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$A = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -8778,7 +8771,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$y = (hideLabel, state, isDisabled, isLoading, length, theme) => {
+const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, 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()
@@ -8858,12 +8851,20 @@ const getComponentCss$y = (hideLabel, state, isDisabled, isLoading, length, them
 const POPOVER_SAFE_ZONE = 8;
 
 const { canvasTextColor } = getHighContrastColors();
-const getComponentCss$x = (theme) => {
+const getComponentCss$y = (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)';
     return getCss({
         '@global': {
+            '@keyframes fade-in': {
+                from: {
+                    opacity: 0,
+                },
+                to: {
+                    opacity: 1,
+                },
+            },
             ':host': {
                 position: 'relative', // ensures correct reference for floating ui fallback positioning in older browsers
                 display: 'inline-block',
@@ -8898,25 +8899,21 @@ const getComponentCss$x = (theme) => {
                 }),
                 ...getFocusJssStyle(theme, { offset: 0 }),
             },
+            '[popover]': {
+                all: 'unset',
+                position: 'absolute',
+                pointerEvents: 'none',
+                filter: `drop-shadow(0 0 16px ${shadowColor})`,
+                animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) fade-in ${motionEasingBase} forwards`,
+                '&:not(:popover-open)': {
+                    display: 'none', // ensures popover is not flickering when closed in some situations
+                },
+            },
         },
         label: getHiddenTextJssStyle(),
         icon: {
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
-        popover: {
-            all: 'unset',
-            position: 'absolute',
-            pointerEvents: 'none',
-            filter: `drop-shadow(0 0 16px ${shadowColor})`,
-            animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
-                ,
-            '&:not(:popover-open)': {
-                display: 'none', // ensures popover is not flickering when closed in some situations
-            },
-            '&:-internal-popover-in-top-layer::backdrop': {
-                display: 'none',
-            },
-        },
         arrow: {
             position: 'absolute',
             width: '24px',
@@ -8947,17 +8944,9 @@ const getComponentCss$x = (theme) => {
             background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
             color: primaryColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundSurfaceColorDark,
-                color: primaryColorDark,
-            }),
-        },
-        '@keyframes fadeIn': {
-            from: {
-                opacity: 0,
-            },
-            to: {
-                opacity: 1,
-            },
+                background: backgroundSurfaceColorDark,
+                color: primaryColorDark,
+            }),
         },
     });
 };
@@ -8965,7 +8954,7 @@ const getComponentCss$x = (theme) => {
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
@@ -9067,7 +9056,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$v = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -9200,7 +9189,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     };
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$u = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getComponentCss$v = (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({
@@ -9271,7 +9260,7 @@ const getComponentCss$u = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-const getComponentCss$t = (maxWidth, columns) => {
+const getComponentCss$u = (maxWidth, columns) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9292,17 +9281,19 @@ const getComponentCss$t = (maxWidth, columns) => {
     });
 };
 
-const dropdownPositionVar = '--p-internal-dropdown-position';
-const getButtonStyles$1 = (direction, isOpen, state, theme) => {
+const anchorName$1 = '--anchor-select-wrapper';
+const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
     const { formStateHoverColor: formStateHoverColorDark, formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
-    const isDirectionDown = direction === 'down';
     return {
         '@global': {
             // TODO: extract generic default button/anchor reset style
             button: {
+                ...(hasNativeCSSAnchorPositioningSupport && {
+                    anchorName: anchorName$1,
+                }),
                 position: 'absolute',
                 inset: 0,
                 width: '100%', // fixes Firefox positioning issue
@@ -9318,42 +9309,31 @@ const getButtonStyles$1 = (direction, isOpen, state, theme) => {
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     borderColor: isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark,
                 }),
-                // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
-                '&:focus, &:focus ~ ul': {
-                    borderColor: primaryColor,
+                '&:disabled': {
+                    cursor: 'not-allowed',
+                    borderColor: disabledColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: primaryColorDark,
+                        borderColor: disabledColorDark,
                     }),
                 },
                 ...hoverMediaQuery({
-                    '&:not(:disabled):not(:focus):hover': {
+                    '&:not(:disabled):hover': {
                         borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
                         }),
                     },
                 }),
-                '&:disabled': {
-                    cursor: 'not-allowed',
-                    borderColor: disabledColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: disabledColorDark,
-                    }),
-                },
-                ...(isOpen && {
-                    [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
-                    [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
-                }),
+                ...getFocusJssStyle(theme),
             },
         },
     };
 };
-const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
+const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme) => {
     const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
     const { formStateHoverColor: formStateHoverColorDark, formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
-    const isDirectionDown = direction === 'down';
     const placeHolderJssStyle = {
         opacity: 1,
         color: disabled ? disabledColor : primaryColor,
@@ -9393,6 +9373,9 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                     color: primaryColorDark,
                     background: backgroundColorDark,
                 }),
+                ...(hasNativeCSSAnchorPositioningSupport && {
+                    anchorName: anchorName$1,
+                }),
                 '&::placeholder': {
                     ...placeHolderJssStyle,
                     ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
@@ -9445,115 +9428,29 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                         borderColor: isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark,
                     }),
                     borderRadius: borderRadiusSmall,
-                    ...(isOpen && {
-                        [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
-                        [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
-                    }),
                 },
             },
         },
     };
 };
-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);
-    const { highlightColor } = getHighContrastColors();
+const getListStyles = (direction, isOpen, theme) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     return {
         '@global': {
-            '[role="listbox"]': {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: spacingStaticSmall,
-                position: `var(${dropdownPositionVar}, absolute)`, // for vrt tests
-                padding: '6px',
-                margin: 0,
-                background: backgroundColor,
-                ...textSmallStyle,
-                color: contrastHighColor,
-                zIndex: 10,
-                left: 0,
-                right: 0,
-                [isDirectionDown ? 'top' : 'bottom']: 'calc(100% - 2px)', // 2px border + 2px safety for rounded corners
-                boxSizing: 'border-box',
-                maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, // 8px = gap, 6px = padding, 2px = border
-                overflowY: 'auto',
-                WebkitOverflowScrolling: 'touch',
-                scrollBehavior: 'smooth',
-                border: `2px solid ${primaryColor}`,
-                [isDirectionDown ? 'borderTop' : 'borderBottom']: addImportantToRule(`1px solid ${contrastMediumColor}`),
-                ...(isDirectionDown
-                    ? ['borderBottomLeftRadius', 'borderBottomRightRadius']
-                    : ['borderTopLeftRadius', 'borderTopRightRadius']).reduce((result, curr) => ({ ...result, [curr]: borderRadiusSmall }), {}),
-                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, {
-                    color: contrastHighColorDark,
-                    background: backgroundColorDark,
-                    borderColor: primaryColorDark,
-                    [isDirectionDown ? 'borderTopColor' : 'borderBottomColor']: addImportantToRule(contrastMediumColorDark),
-                }),
-            },
+            // @keyframes fade-in
+            ...getPopoverKeyframesStyles,
+            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$1, 1, 40, theme),
         },
         option: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            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,
-                    }),
-                },
-            }),
-            '&--highlighted': {
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: contrastLowColorDark,
-                }),
-            },
-            '&--selected': {
-                cursor: 'default',
-                pointerEvents: 'none',
-                background: backgroundSurfaceColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundSurfaceColorDark,
-                }),
-            },
-            '&--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',
-            },
+            ...getOptionJssStyle('select-wrapper', 1, theme),
             '&--indent': {
                 paddingLeft: '28px',
             },
         },
+        icon: {
+            marginInlineStart: 'auto',
+        },
         optgroup: {
             '&--hidden': {
                 display: 'none',
@@ -9575,7 +9472,7 @@ const getListStyles$1 = (direction, theme) => {
         },
     };
 };
-const getComponentCss$s = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
+const getComponentCss$t = (direction, isOpen, state, disabled, filter, hasNativeCSSAnchorPositioningSupport, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -9589,17 +9486,12 @@ const getComponentCss$s = (direction, isOpen, state, disabled, filter, isNativeP
         'sr-text': {
             display: 'none',
         },
-        ...(isNativePopoverCase && {
-            popover: {
-                ...getPopoverResetJssStyle(),
-            },
-        }),
     }, filter
-        ? getFilterStyles(direction, isOpen, state, disabled, theme)
-        : getButtonStyles$1(direction, isOpen, state, theme), isOpen && getListStyles$1(direction, theme)));
+        ? getFilterStyles(isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme)
+        : getButtonStyles(isOpen, state, hasNativeCSSAnchorPositioningSupport, theme), getListStyles(direction, isOpen, theme)));
 };
 
-const getComponentCss$r = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+const getComponentCss$s = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9657,21 +9549,37 @@ const getComponentCss$r = (isDisabled, hasCustomDropdown, hideLabel, state, them
     });
 };
 
-const cssVarBackgroundColor = '--p-select-background-color';
-const cssVarTextColor = '--p-select-text-color';
-const cssVarBorderColor = '--p-select-border-color';
-const cssVarIconFilter = '--p-select-icon-filter';
-const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
-const cssVarBorderColorFocus = '--p-select-focus-border-color';
+const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
+const getComponentCss$r = (theme) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+            },
+            ...addImportantToEachRule({
+                ':host': {
+                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                    ...hostHiddenStyles,
+                },
+                '::slotted(img)': getButtonImageJssStyle,
+            }),
+            ...preventFoucOfNestedElementsStyles,
+        },
+        option: getOptionJssStyle('select-option', `var(${cssVarInternalSelectOptionScaling}, 1)`, theme),
+        icon: {
+            marginInlineStart: 'auto',
+        },
+    });
+};
+
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
-const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, compact, theme, hasSlottedImage) => {
-    // Determines the scaling factor for the select size. In "compact" mode, it uses 0.5 to achieve a 36px select (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalSelectScaling`.
+const anchorName = '--anchor-select';
+const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
-    const gap = `max(2px, ${scalingVar} * ${spacingStaticXSmall})`;
-    const gridTemplateColumns = `minmax(0, 1fr) auto auto calc(max(2px, ${scalingVar} * ${formElementLayeredGap}) + ${borderWidthBase})`;
     return getCss({
         '@global': {
+            // @keyframes fade-in
+            ...getPopoverKeyframesStyles,
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
@@ -9684,201 +9592,27 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, isNa
                 '--p-internal-optgroup-scaling': scalingVar,
             }),
             ...preventFoucOfNestedElementsStyles,
-            button: getButtonStyles(isDisabled, direction, isOpen, state, compact, theme, hasSlottedImage),
+            button: {
+                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, anchorName, scalingVar, theme),
+                '& img': getButtonImageJssStyle,
+                '& span': getButtonLabelJssStyle,
+            },
+            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName, scalingVar, 40, theme),
         },
         root: {
             display: 'grid',
-            gap,
+            gap: `max(2px, ${scalingVar} * ${spacingStaticXSmall})`,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
-        wrapper: {
-            position: 'relative',
-            display: 'grid',
-            gridTemplateColumns,
-        },
-        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'),
-            ...(!isHighContrastMode && {
-                filter: `var(${cssVarIconFilter})`,
-            }),
-            '&--rotate': {
-                transform: 'rotate3d(0,0,1,180deg)',
-            },
-        },
-        listbox: getListStyles(isOpen, direction, compact, theme),
+        icon: getIconJssStyle('select', isOpen),
         'sr-only': getHiddenTextJssStyle(),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
-        ...(isNativePopoverCase && {
-            popover: {
-                ...getPopoverResetJssStyle(),
-            },
-        }),
     });
 };
-// 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, compact, theme, hasSlottedImage) => {
-    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);
-    const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
-    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
-    const paddingBlock = `max(2px, ${scalingVar} * ${formElementPaddingVertical})`;
-    const paddingInline = `max(4px, ${scalingVar} * ${formElementPaddingHorizontal}) ${getCalculatedFormElementPaddingHorizontal(1)}`;
-    const gap = `max(4px, ${scalingVar} * 12px)`;
-    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',
-        minWidth: 0,
-        // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
-        height,
-        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)
-        paddingBlock,
-        paddingInline,
-        boxSizing: 'content-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: `var(${cssVarTextColor}, ${primaryColor})`,
-        background: `var(${cssVarBackgroundColor}, ${backgroundColor})`,
-        border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateColor || contrastMediumColor})`,
-        borderRadius: borderRadiusSmall,
-        '&:not(:focus-visible)': {
-            ...getPlaceholderJssStyle({
-                color: `var(${cssVarTextColor}, ${primaryColor})`,
-                opacity: 1,
-            }),
-            ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({
-                color: `var(${cssVarTextColor}, ${primaryColorDark})`,
-                opacity: 1, // Opacity fixes placeholder being shown lighter in firefox
-            })),
-        },
-        ...(hasSlottedImage && {
-            '& > span': {
-                display: 'flex',
-                gap,
-                alignItems: 'center',
-            },
-            '& > span > span': {
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-            },
-            '& img': {
-                height: fontLineHeight,
-                borderRadius: borderRadiusSmall,
-                width: 'auto',
-            },
-        }),
-        ...hoverMediaQuery({
-            '&:hover:not(:disabled):not(:focus-visible),label:hover~.wrapper &:not(:disabled):not(:focus-visible)': {
-                borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark})`,
-                }),
-            },
-        }),
-        ...(!isDisabled && {
-            '&:focus-visible': {
-                borderColor: `var(${cssVarBorderColorFocus}, ${primaryColor})`,
-                background: `var(${cssVarBackgroundColorFocus}, ${backgroundColor})`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: `var(${cssVarBorderColorFocus}, ${primaryColorDark})`,
-                    background: `var(${cssVarBackgroundColorFocus}, ${backgroundColorDark})`,
-                }),
-            },
-        }),
-        ...(isOpen && {
-            ['paddingBottom' ]: `calc(${paddingBlock} + 1px)`, // Add padding to keep same height when border changes
-            ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
-            ['borderBottomLeftRadius' ]: 0,
-            ['borderBottomRightRadius' ]: 0,
-        }),
-        ...(isDisabled && {
-            ...getPlaceholderJssStyle({
-                color: disabledColor,
-            }),
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-            WebkitTextFillColor: disabledColor,
-        }),
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: `var(${cssVarTextColor}, ${primaryColorDark})`,
-            background: `var(${cssVarBackgroundColor}, ${backgroundColorDark})`,
-            border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark})`,
-            ...(isOpen && {
-                ['borderBottom' ]: 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, compact, theme) => {
-    const { primaryColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
-    const gap = `max(2px, ${scalingVar} * ${spacingStaticSmall})`;
-    const padding = `max(2px, ${scalingVar} * 6px)`;
-    return {
-        position: 'absolute',
-        margin: 0,
-        display: isOpen ? 'flex' : 'none',
-        flexDirection: 'column',
-        gap,
-        padding,
-        ...textSmallStyle,
-        zIndex: 10,
-        // TODO: Inset inline 0
-        left: 0,
-        right: 0,
-        ['top' ]: '100%',
-        boxSizing: 'border-box',
-        maxHeight: `${8.5 * (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 var(${cssVarBorderColor}, ${primaryColor})`,
-        ['borderTop' ]: 'none',
-        borderRadius: borderRadiusSmall,
-        ['borderTopLeftRadius' ]: 0,
-        ['borderTopRightRadius' ]: 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: `var(${cssVarBorderColor}, ${primaryColorDark})`,
-        }),
-    };
-};
 
 const getComponentCss$p = (isOpen, hasDismissButton, theme) => {
     return getCss({
@@ -10316,33 +10050,12 @@ const getComponentCss$k = () => {
     });
 };
 
-const getComponentCss$j = (multiline) => {
-    return getCss({
-        '@global': {
-            ':host': {
-                display: 'table-cell',
-                verticalAlign: 'middle',
-                ...addImportantToEachRule({
-                    padding: spacingFluidSmall,
-                    margin: 0,
-                    whiteSpace: multiline ? 'normal' : 'nowrap',
-                    ...hostHiddenStyles,
-                }),
-            },
-        },
-    });
-};
-
-const isDirectionAsc = (dir) => dir === 'asc';
-const isSortable = (active, direction) => {
-    return active !== undefined && direction !== undefined;
-};
-
+const cssVariableTablePadding = '--p-internal-table-padding';
 const cssVariableTableHoverColor = '--p-internal-table-hover-color';
 const cssVariableTableBorderColor = '--p-internal-table-border-color';
 const cssVariableTableBorderWidth = '--p-internal-table-border-width';
 const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
-const getComponentCss$i = (theme) => {
+const getComponentCss$j = (compact, layout, theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = doGetThemedColors('dark');
     return getCss({
@@ -10362,6 +10075,7 @@ const getComponentCss$i = (theme) => {
             },
             ...preventFoucOfNestedElementsStyles,
             '::slotted(*)': addImportantToEachRule({
+                ...(compact && { [cssVariableTablePadding]: spacingStaticSmall }),
                 [cssVariableTableHoverColor]: hoverColor,
                 [cssVariableTableBorderColor]: contrastLowColor,
                 [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
@@ -10384,12 +10098,41 @@ const getComponentCss$i = (theme) => {
         table: {
             display: 'table',
             borderCollapse: 'collapse',
-            width: '100%',
+            // with table-layout: fixed, width: 100% crops border-bottom of p-table-row when scrollable
+            // also relative width units (%, vw) don't work as expected when scrollable or combined with auto columns
+            ...(layout === 'fixed'
+                ? {
+                    tableLayout: 'fixed',
+                    minWidth: '100%',
+                }
+                : { width: '100%' }),
             whiteSpace: 'nowrap', // shouldn't be inherited for caption, that's why it's defined here
         },
     });
 };
 
+const getComponentCss$i = (multiline) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'table-cell',
+                verticalAlign: 'middle',
+                ...addImportantToEachRule({
+                    padding: `var(${cssVariableTablePadding}, ${spacingFluidSmall})`,
+                    margin: 0,
+                    whiteSpace: multiline ? 'normal' : 'nowrap',
+                    ...hostHiddenStyles,
+                }),
+            },
+        },
+    });
+};
+
+const isDirectionAsc = (dir) => dir === 'asc';
+const isSortable = (active, direction) => {
+    return active !== undefined && direction !== undefined;
+};
+
 const { hoverColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
 const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
@@ -10400,7 +10143,7 @@ const getComponentCss$h = (active, direction, hideLabel, multiline) => {
             ':host': {
                 display: 'table-cell',
                 ...addImportantToEachRule({
-                    padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
+                    padding: `2px var(${cssVariableTablePadding}, ${spacingFluidSmall}) var(${cssVariableTablePadding}, ${spacingFluidSmall})`,
                     verticalAlign: 'bottom',
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
@@ -11409,4 +11152,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$1a as getAccordionCss, getComponentCss$19 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$18 as getButtonGroupCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$11 as getCheckboxCss, getComponentCss$12 as getCheckboxWrapperCss, getComponentCss$10 as getContentWrapperCss, getComponentCss$$ as getCrestCss, getComponentCss$_ as getDisplayCss, getComponentCss$Z as getDividerCss, getComponentCss$X as getFieldsetCss, getComponentCss$Y as getFieldsetWrapperCss, getComponentCss$V as getFlexCss, getComponentCss$W as getFlexItemCss, getComponentCss$S as getFlyoutCss, getComponentCss$U as getFlyoutMultilevelCss, getComponentCss$T as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Q as getGridCss, getComponentCss$R as getGridItemCss, getComponentCss$P as getHeadingCss, getComponentCss$O as getHeadlineCss, getComponentCss$N as getIconCss, getComponentCss$M as getInlineNotificationCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$C as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$A as getOptgroupCss, getComponentCss$z as getPaginationCss, getComponentCss$y as getPinCodeCss, getComponentCss$x as getPopoverCss, getComponentCss$w as getRadioButtonWrapperCss, getComponentCss$v as getScrollerCss, getComponentCss$t as getSegmentedControlCss, getComponentCss$u as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$B as getSelectOptionCss, getComponentCss$r as getSelectWrapperCss, getComponentCss$s as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$j as getTableCellCss, getComponentCss$i as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$1a as getAccordionCss, getComponentCss$19 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$18 as getButtonGroupCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$11 as getCheckboxCss, getComponentCss$12 as getCheckboxWrapperCss, getComponentCss$10 as getContentWrapperCss, getComponentCss$$ as getCrestCss, getComponentCss$_ as getDisplayCss, getComponentCss$Z as getDividerCss, getComponentCss$X as getFieldsetCss, getComponentCss$Y as getFieldsetWrapperCss, getComponentCss$V as getFlexCss, getComponentCss$W as getFlexItemCss, getComponentCss$S as getFlyoutCss, getComponentCss$U as getFlyoutMultilevelCss, getComponentCss$T as getFlyoutMultilevelItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Q as getGridCss, getComponentCss$R as getGridItemCss, getComponentCss$P as getHeadingCss, getComponentCss$O as getHeadlineCss, getComponentCss$N as getIconCss, getComponentCss$M as getInlineNotificationCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$C as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$B as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };