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

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

@@ -3932,7 +3932,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';
@@ -4104,7 +4104,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': {
@@ -4176,7 +4176,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1b = (direction) => {
+const getComponentCss$1d = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4329,7 +4329,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: {
@@ -4367,7 +4367,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': {
@@ -4637,7 +4637,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');
@@ -4713,7 +4713,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({
@@ -5092,7 +5092,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();
@@ -5550,7 +5550,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);
@@ -5752,7 +5752,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);
@@ -6053,7 +6053,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})`;
@@ -6095,6 +6095,14 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
                 }),
                 width: '100%',
                 minWidth: '2rem',
+                ...(disabled && {
+                    color: disabledColor,
+                    WebkitTextFillColor: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                        WebkitTextFillColor: disabledColorDark,
+                    }),
+                }),
                 ...additionalInputJssStyle,
             },
         },
@@ -6113,12 +6121,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({
@@ -6126,13 +6136,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 && {
@@ -6145,6 +6151,13 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
                 }),
             }),
         },
+        ...(loading && {
+            spinner: {
+                font: textSmallStyle.font,
+                width: fontLineHeight,
+                height: fontLineHeight,
+            },
+        }),
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
             !readOnly &&
@@ -6153,6 +6166,8 @@ const getFunctionalComponentInputBaseStyles = (disabled, hideLabel, state, compa
             })),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     };
 };
 
@@ -6161,7 +6176,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$13 = (width) => {
+const getComponentCss$15 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6203,7 +6218,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$12 = () => {
+const getComponentCss$14 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6302,7 +6317,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': {
@@ -6320,7 +6335,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 = {
@@ -6381,7 +6396,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({
@@ -6628,7 +6643,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': {
@@ -6859,7 +6874,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
@@ -6911,7 +6926,7 @@ const getComponentCss$Z = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6948,7 +6963,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': {
@@ -6995,7 +7010,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({
@@ -7017,7 +7032,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': {
@@ -7134,10 +7149,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) => {
@@ -7205,9 +7219,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({
@@ -7218,6 +7240,8 @@ const getComponentCss$U = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     ...dialogHostJssStyle,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
+                    [`${cssVarRefPaddingTop}`]: dialogPaddingBlock,
+                    [`${cssVarRefPaddingInline}`]: spacingFluidLarge,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
@@ -7317,7 +7341,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({
@@ -7337,7 +7361,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': {
@@ -7363,7 +7387,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': {
@@ -7423,7 +7447,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': {
@@ -7534,7 +7558,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);
@@ -7653,7 +7677,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': {
@@ -7700,9 +7724,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': {
@@ -7725,9 +7749,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',
             },
@@ -7741,6 +7765,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({
@@ -9801,7 +9875,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,
@@ -9818,6 +9893,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
@@ -9847,6 +9924,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
@@ -11397,4 +11497,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1d as getAccordionCss, getComponentCss$1c as getBannerCss, getComponentCss$18 as getButtonCss, getComponentCss$1b as getButtonGroupCss, getComponentCss$1a as getButtonPureCss, getComponentCss$19 as getButtonTileCss, getComponentCss$17 as getCanvasCss, getComponentCss$16 as getCarouselCss, getComponentCss$14 as getCheckboxCss, getComponentCss$15 as getCheckboxWrapperCss, getComponentCss$13 as getContentWrapperCss, getComponentCss$12 as getCrestCss, getComponentCss$11 as getDisplayCss, getComponentCss$10 as getDividerCss, getComponentCss$$ as getDrilldownCss, getComponentCss$_ as getDrilldownItemCss, getComponentCss$Z as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$Y as getFieldsetWrapperCss, getComponentCss$V as getFlexCss, getComponentCss$W as getFlexItemCss, getComponentCss$U as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$S as getGridCss, getComponentCss$T as getGridItemCss, getComponentCss$R as getHeadingCss, getComponentCss$Q as getHeadlineCss, getComponentCss$P as getIconCss, getComponentCss$O as getInlineNotificationCss, getComponentCss$N as getInputNumberCss, getComponentCss$M as getInputPasswordCss, 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, getScalingVar, 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 };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1f as getAccordionCss, getComponentCss$1e as getBannerCss, getComponentCss$1a as getButtonCss, getComponentCss$1d as getButtonGroupCss, getComponentCss$1c as getButtonPureCss, getComponentCss$1b as getButtonTileCss, getComponentCss$19 as getCanvasCss, getComponentCss$18 as getCarouselCss, getComponentCss$16 as getCheckboxCss, getComponentCss$17 as getCheckboxWrapperCss, getComponentCss$15 as getContentWrapperCss, getComponentCss$14 as getCrestCss, getComponentCss$13 as getDisplayCss, getComponentCss$12 as getDividerCss, getComponentCss$11 as getDrilldownCss, getComponentCss$10 as getDrilldownItemCss, getComponentCss$$ as getDrilldownLinkCss, getComponentCss$Z as getFieldsetCss, getComponentCss$_ as getFieldsetWrapperCss, getComponentCss$X as getFlexCss, getComponentCss$Y as getFlexItemCss, getComponentCss$W as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getGridCss, getComponentCss$V as getGridItemCss, getComponentCss$T as getHeadingCss, getComponentCss$S as getHeadlineCss, getComponentCss$R as getIconCss, getComponentCss$Q as getInlineNotificationCss, getComponentCss$P as getInputNumberCss, getComponentCss$O as getInputPasswordCss, getComponentCss$N as getInputSearchCss, getComponentCss$M as getInputTextCss, 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, getScalingVar, 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 };

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

@@ -3271,21 +3271,10 @@ const getComboboxAriaAttributes = (isOpen, isRequired, labelId, descriptionId, d
         'aria-controls': dropdownId,
     };
 };
-// TODO: Change to aria-labelledby
-const getListAriaAttributes = (label, isRequired, hasFilter, isOpen, multiple = false) => {
+const getComboboxFilterAriaAttributes = () => {
     return {
-        role: 'listbox',
-        'aria-label': label,
-        ...(isRequired &&
-            !hasFilter && {
-            'aria-required': 'true',
-        }),
-        ...(!isOpen && {
-            'aria-hidden': 'true',
-        }),
-        ...(multiple && {
-            'aria-multiselectable': 'true',
-        }),
+        'aria-autocomplete': 'list',
+        'aria-expanded': 'true',
     };
 };
 
@@ -3905,4 +3894,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getComboboxFilterAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/input-number.wrapper.mjs

@@ -5,23 +5,23 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRInputNumber } from '../dsr-components/input-number.mjs';
 
-const PInputNumber = /*#__PURE__*/ forwardRef(({ autoComplete = '', compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, children, ...rest }, ref) => {
+const PInputNumber = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-number');
-    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, max, message, min, name, placeholder, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputNumber, { autoComplete, compact, controls, description, disabled, form, hideLabel, label, max, message, min, name, placeholder, readOnly, required, state, step, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRInputNumber, { autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme: theme || useTheme(), value, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/input-password.wrapper.mjs

@@ -5,23 +5,23 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRInputPassword } from '../dsr-components/input-password.mjs';
 
-const PInputPassword = /*#__PURE__*/ forwardRef(({ autoComplete = '', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, children, ...rest }, ref) => {
+const PInputPassword = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-password');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || useTheme(), toggle, value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || useTheme(), toggle, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme: theme || useTheme(), toggle, value, children })),
+                children: (jsx(DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme: theme || useTheme(), toggle, value, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/input-search.wrapper.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRInputSearch } from '../dsr-components/input-search.mjs';
+
+const PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = true, label = '', loading = false, message = '', name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-search');
+    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'message', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRInputSearch, { autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme: theme || useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputSearch };