@porsche-design-system/components-react 3.28.0 → 3.29.0-rc.1

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

@@ -3934,7 +3934,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1d = (size, compact, open, theme, sticky) => {
+const getComponentCss$1f = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4106,7 +4106,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$1c = (isOpen) => {
+const getComponentCss$1e = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4178,7 +4178,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1b = (direction) => {
+const getComponentCss$1d = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4331,7 +4331,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1a = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1c = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4369,7 +4369,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$19 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1b = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4639,7 +4639,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$18 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1a = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4715,7 +4715,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$17 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$19 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5094,7 +5094,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$16 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$18 = (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();
@@ -5552,7 +5552,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$15 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$17 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5754,7 +5754,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$16 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -6055,7 +6055,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
-const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
+const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
     const scalingVar = getScalingVar(compact);
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
@@ -6097,6 +6097,14 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
                 }),
                 width: '100%',
                 minWidth: '2rem',
+                ...(disabled && {
+                    color: disabledColor,
+                    WebkitTextFillColor: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                        WebkitTextFillColor: disabledColorDark,
+                    }),
+                }),
                 ...additionalInputJssStyle,
             },
         },
@@ -6115,12 +6123,14 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 borderColor: formStateColorDark || contrastMediumColorDark,
             }),
-            '&:has(input:focus:not([readonly]))': {
-                borderColor: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: primaryColorDark,
-                }),
-            },
+            ...(!disabled && {
+                '&:has(input:focus)': {
+                    borderColor: primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: primaryColorDark,
+                    }),
+                },
+            }),
             ...(!disabled &&
                 !readOnly &&
                 hoverMediaQuery({
@@ -6128,13 +6138,9 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
                 })),
             ...(disabled && {
                 cursor: 'not-allowed',
-                color: disabledColor,
                 borderColor: disabledColor,
-                WebkitTextFillColor: disabledColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabledColorDark,
                     borderColor: disabledColorDark,
-                    WebkitTextFillColor: disabledColorDark,
                 }),
             }),
             ...(readOnly && {
@@ -6147,6 +6153,13 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
                 }),
             }),
         },
+        ...(loading && {
+            spinner: {
+                font: textSmallStyle.font,
+                width: fontLineHeight,
+                height: fontLineHeight,
+            },
+        }),
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
             !readOnly &&
@@ -6155,6 +6168,8 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
             })),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     };
 };
 
@@ -6163,7 +6178,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$13 = (width) => {
+const getComponentCss$15 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6205,7 +6220,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$12 = () => {
+const getComponentCss$14 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6304,7 +6319,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$11 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6322,7 +6337,7 @@ const getComponentCss$11 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$10 = (color, orientation, theme) => {
+const getComponentCss$12 = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6383,7 +6398,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$$ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6630,7 +6645,7 @@ const getComponentCss$$ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
     });
 };
 
-const getComponentCss$_ = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6861,7 +6876,7 @@ const getComponentCss$_ = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$Z = (hasSlottedAnchor, isActive) => {
+const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -6913,7 +6928,7 @@ const getComponentCss$Z = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6950,7 +6965,7 @@ const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6997,7 +7012,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$W = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7019,7 +7034,7 @@ const getComponentCss$W = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$V = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$X = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7136,10 +7151,9 @@ const getScrollerJssStyle = (position, theme) => {
 const dialogPaddingBlock = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const dialogGridJssStyle = {
     display: 'grid',
-    gridTemplate: `auto/${spacingFluidSmall} auto ${spacingFluidSmall}`,
+    gridTemplate: `auto/${spacingFluidSmall} minmax(0,1fr) ${spacingFluidSmall}`,
+    gap: `${spacingFluidMedium} calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
     paddingBlock: dialogPaddingBlock,
-    rowGap: spacingFluidMedium,
-    columnGap: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
     alignContent: 'flex-start',
 };
 const getDialogColorJssStyle = (theme) => {
@@ -7207,9 +7221,17 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
  * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
  */
 const cssVariableWidth$2 = '--p-flyout-width';
+/**
+ * @css-variable {"name": "--ref-p-flyout-pt", "description": "Exposes the internally used padding-top of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Flyout."}
+ */
+const cssVarRefPaddingTop = '--ref-p-flyout-pt';
+/**
+ * @css-variable {"name": "--ref-p-flyout-px", "description": "Exposes the internally used padding-inline of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Flyout."}
+ */
+const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$U = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$W = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7220,6 +7242,8 @@ const getComponentCss$U = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     ...dialogHostJssStyle,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
+                    [`${cssVarRefPaddingTop}`]: dialogPaddingBlock,
+                    [`${cssVarRefPaddingInline}`]: spacingFluidLarge,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
@@ -7319,7 +7343,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$T = (size, offset) => {
+const getComponentCss$V = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7339,7 +7363,7 @@ const getComponentCss$T = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$S = (direction, wrap) => {
+const getComponentCss$U = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7365,7 +7389,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$R = (size, align, color, ellipsis, theme) => {
+const getComponentCss$T = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7425,7 +7449,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$Q = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$S = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7536,7 +7560,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$P = (name, source, color, size, theme) => {
+const getComponentCss$R = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7655,7 +7679,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$O = (state, hasAction, hasClose, theme) => {
+const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7702,9 +7726,9 @@ const getComponentCss$O = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$N = (disabled, hideLabel, state, compact, readOnly, theme, controls) => {
+const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
     return getCss({
-        ...getFunctionalComponentInputBaseStyles(disabled, hideLabel, state, compact, readOnly, theme, {
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
             MozAppearance: 'textfield',
             '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
@@ -7727,9 +7751,9 @@ const getComponentCss$N = (disabled, hideLabel, state, compact, readOnly, theme,
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly, theme) => {
+const getComponentCss$O = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
-        ...getFunctionalComponentInputBaseStyles(disabled, hideLabel, state, compact, readOnly, theme, {
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             '&[type="text"]': {
                 textOverflow: 'ellipsis',
             },
@@ -7743,6 +7767,56 @@ const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly
     });
 };
 
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            '&[type="search"]::-webkit-search-cancel-button': {
+                display: 'none',
+            },
+        }),
+        ...(clear && {
+            button: {
+                padding: `var(${cssVarButtonPurePadding})`,
+                margin: `var(${cssVarButtonPureMargin})`,
+            },
+        }),
+    });
+};
+
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        ...(counter && {
+            counter: {
+                ...getUnitCounterJssStyle(disabled, readOnly, theme),
+                cursor: 'text',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -9158,6 +9232,7 @@ const getComponentCss$y = (theme) => {
                 position: 'absolute',
                 pointerEvents: 'none',
                 filter: `drop-shadow(0 0 16px ${shadowColor})`,
+                backdropFilter: 'drop-shadow(0 0 transparent)', // workaround for Firefox bug not rendering PDS frosted glass correctly when nested inside CSS filter: https://bugzilla.mozilla.org/show_bug.cgi?id=1797051
                 animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) fade-in ${motionEasingBase} forwards`,
                 '&:not(:popover-open)': {
                     display: 'none', // ensures popover is not flickering when closed in some situations
@@ -9803,7 +9878,8 @@ const getComponentCss$r = (theme) => {
             },
             ...addImportantToEachRule({
                 ':host': {
-                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                    scrollMarginBlockStart: `calc(max(2px, var(${cssVarInternalSelectOptionScaling}, 1) * 6px) + 36px)`, // 36px input height + 6px padding
+                    scrollMarginBlockEnd: `max(2px, var(${cssVarInternalSelectOptionScaling}, 1) * 6px)`, // Aligns option when list is scrolled by navigating with keyboard
                     ...hostHiddenStyles,
                 },
                 '::slotted(img)': getButtonImageJssStyle,
@@ -9820,6 +9896,8 @@ const getComponentCss$r = (theme) => {
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
 const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
+    const { contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+    const { contrastMediumColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     return getCss({
         '@global': {
             // @keyframes fade-in
@@ -9849,6 +9927,29 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme,
             // 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)})`,
         },
+        filter: {
+            position: 'sticky',
+            top: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
+            padding: `max(2px, ${scalingVar} * 6px)`,
+            margin: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
+            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundSurfaceColorDark,
+            }),
+            zIndex: 1,
+        },
+        options: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: `max(2px, ${scalingVar} * ${spacingStaticSmall})`,
+        },
+        'no-results': {
+            ...getOptionJssStyle('select-option', scalingVar, theme),
+            color: contrastMediumColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastMediumColorDark,
+            }),
+        },
         icon: getIconJssStyle('select', isOpen),
         'sr-only': getHiddenTextJssStyle(),
         // .label / .required
@@ -11185,7 +11286,7 @@ const getComponentCss$4 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
-const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter, resize, theme) => {
+const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, resize, theme) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -11224,7 +11325,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
                 }),
                 gridArea: '1/1',
                 font: textSmallStyle.font, // to override line-height
-                padding: hasCounter
+                padding: counter
                     ? `12px ${formElementPaddingHorizontal} ${spacingStaticLarge}`
                     : `12px ${formElementPaddingHorizontal}`,
                 // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
@@ -11271,7 +11372,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
         wrapper: {
             display: 'grid',
         },
-        ...(hasCounter && {
+        ...(counter && {
             counter: {
                 ...getUnitCounterJssStyle(isDisabled, isReadonly, theme),
                 gridArea: '1/1',
@@ -11402,41 +11503,43 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1d;
-exports.getBannerCss = getComponentCss$1c;
-exports.getButtonCss = getComponentCss$18;
-exports.getButtonGroupCss = getComponentCss$1b;
-exports.getButtonPureCss = getComponentCss$1a;
-exports.getButtonTileCss = getComponentCss$19;
-exports.getCanvasCss = getComponentCss$17;
-exports.getCarouselCss = getComponentCss$16;
-exports.getCheckboxCss = getComponentCss$14;
-exports.getCheckboxWrapperCss = getComponentCss$15;
-exports.getContentWrapperCss = getComponentCss$13;
-exports.getCrestCss = getComponentCss$12;
-exports.getDisplayCss = getComponentCss$11;
-exports.getDividerCss = getComponentCss$10;
-exports.getDrilldownCss = getComponentCss$$;
-exports.getDrilldownItemCss = getComponentCss$_;
-exports.getDrilldownLinkCss = getComponentCss$Z;
-exports.getFieldsetCss = getComponentCss$X;
-exports.getFieldsetWrapperCss = getComponentCss$Y;
-exports.getFlexCss = getComponentCss$V;
-exports.getFlexItemCss = getComponentCss$W;
-exports.getFlyoutCss = getComponentCss$U;
+exports.getAccordionCss = getComponentCss$1f;
+exports.getBannerCss = getComponentCss$1e;
+exports.getButtonCss = getComponentCss$1a;
+exports.getButtonGroupCss = getComponentCss$1d;
+exports.getButtonPureCss = getComponentCss$1c;
+exports.getButtonTileCss = getComponentCss$1b;
+exports.getCanvasCss = getComponentCss$19;
+exports.getCarouselCss = getComponentCss$18;
+exports.getCheckboxCss = getComponentCss$16;
+exports.getCheckboxWrapperCss = getComponentCss$17;
+exports.getContentWrapperCss = getComponentCss$15;
+exports.getCrestCss = getComponentCss$14;
+exports.getDisplayCss = getComponentCss$13;
+exports.getDividerCss = getComponentCss$12;
+exports.getDrilldownCss = getComponentCss$11;
+exports.getDrilldownItemCss = getComponentCss$10;
+exports.getDrilldownLinkCss = getComponentCss$$;
+exports.getFieldsetCss = getComponentCss$Z;
+exports.getFieldsetWrapperCss = getComponentCss$_;
+exports.getFlexCss = getComponentCss$X;
+exports.getFlexItemCss = getComponentCss$Y;
+exports.getFlyoutCss = getComponentCss$W;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$S;
-exports.getGridItemCss = getComponentCss$T;
-exports.getHeadingCss = getComponentCss$R;
-exports.getHeadlineCss = getComponentCss$Q;
-exports.getIconCss = getComponentCss$P;
-exports.getInlineNotificationCss = getComponentCss$O;
-exports.getInputNumberCss = getComponentCss$N;
-exports.getInputPasswordCss = getComponentCss$M;
+exports.getGridCss = getComponentCss$U;
+exports.getGridItemCss = getComponentCss$V;
+exports.getHeadingCss = getComponentCss$T;
+exports.getHeadlineCss = getComponentCss$S;
+exports.getIconCss = getComponentCss$R;
+exports.getInlineNotificationCss = getComponentCss$Q;
+exports.getInputNumberCss = getComponentCss$P;
+exports.getInputPasswordCss = getComponentCss$O;
+exports.getInputSearchCss = getComponentCss$N;
+exports.getInputTextCss = getComponentCss$M;
 exports.getLinkCss = getComponentCss$K;
 exports.getLinkPureCss = getComponentCss$L;
 exports.getLinkSocialCss = getComponentCss$K;