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

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$1c = (size, compact, open, theme, sticky) => {
+const getComponentCss$1d = (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$1b = (isOpen) => {
+const getComponentCss$1c = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4178,7 +4178,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1a = (direction) => {
+const getComponentCss$1b = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4331,7 +4331,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$19 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1a = (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$18 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$19 = (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$17 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$18 = (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$16 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$17 = (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$15 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$16 = (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$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$15 = (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$13 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$14 = (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);
@@ -5928,12 +5928,242 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
     });
 };
 
+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');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return {
+        [`::slotted(${child})`]: {
+            display: 'block',
+            width: '100%',
+            height: child !== 'textarea'
+                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
+                : 'auto',
+            margin: 0,
+            outline: 0,
+            WebkitAppearance: 'none', // iOS safari
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+            textIndent: 0,
+            color: primaryColor,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+                color: primaryColorDark,
+            }),
+            ...additionalDefaultJssStyle,
+        },
+        '::slotted(:not(input[type="password"]))': {
+            textOverflow: 'ellipsis',
+        },
+        ...(!isLoading &&
+            hoverMediaQuery({
+                // with the media query the selector has higher priority and overrides disabled styles
+                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
+                    borderColor: formStateHoverColor || primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: formStateHoverColorDark || primaryColorDark,
+                    }),
+                },
+            })),
+        // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
+        [`::slotted(${child}:focus)`]: {
+            borderColor: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: primaryColorDark,
+            }),
+        },
+        [`::slotted(${child}:disabled)`]: {
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+                WebkitTextFillColor: disabledColorDark,
+            }),
+        },
+        ...(child !== 'select' && {
+            [`::slotted(${child}[readonly])`]: {
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: contrastLowColorDark,
+                    background: contrastLowColorDark,
+                }),
+            },
+        }),
+    };
+};
+const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
+const formElementLayeredSafeZone = `calc(${formElementLayeredGap} + ${borderWidthBase})`;
+// TODO: basic button/icon padding can already be set within style function instead of on component style level
+const formButtonOrIconPadding = spacingStaticXSmall;
+// TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
+//  unfortunately line-height alignment breaks for a select element for some reasons then
+// TODO: basic form element padding can already be set within style function instead of on component style level
+const formElementPaddingVertical = spacingStaticSmall;
+// TODO: basic form element padding can already be set within style function instead of on component style level
+const formElementPaddingHorizontal = spacingStaticMedium;
+const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
+    // when applied, font-family and font-size needs to be set too for correct calculation of ex-unit ($fontLineHeight)
+    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
+};
+// TODO: re-use in textarea-wrapper not only in text-field-wrapper
+const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
+    const { disabledColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
+    const { disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
+    return {
+        pointerEvents: 'none',
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        font: textSmallStyle.font,
+        color: contrastMediumColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: contrastMediumColorDark,
+        }),
+        ...(isDisabled && {
+            color: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+            }),
+        }),
+        ...(isReadonly && {
+            color: contrastHighColor,
+        }),
+    };
+};
+
+const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
+// Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
+// Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
+const getScalingVar = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
+/**
+ * @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."}
+ */
+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 scalingVar = getScalingVar(compact);
+    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
+    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const gap = `max(4px, calc(${spacingStaticMedium} * ${scalingVar}))`;
+    // This will return 0 for <= 0.5, ~4 for 1 and ~8 for 2 scaling...
+    const buttonCompensation = `clamp(0, 6.42 * pow(calc(${scalingVar} - 0.5), 0.6826), 12)`;
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const hoverStyles = {
+        borderColor: formStateHoverColor || primaryColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: formStateHoverColorDark || primaryColorDark,
+        }),
+    };
+    return {
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                    [`${cssVarButtonPurePadding}`]: `calc(1px * ${buttonCompensation})`,
+                    [`${cssVarButtonPureMargin}`]: `calc(-1px * ${buttonCompensation})`,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            input: {
+                all: 'unset',
+                flex: 1,
+                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+                height,
+                paddingBlock,
+                color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
+                width: '100%',
+                minWidth: '2rem',
+                ...additionalInputJssStyle,
+            },
+        },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            paddingInline,
+            display: 'flex',
+            alignItems: 'center',
+            gap,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+            }),
+            '&:has(input:focus:not([readonly]))': {
+                borderColor: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: primaryColorDark,
+                }),
+            },
+            ...(!disabled &&
+                !readOnly &&
+                hoverMediaQuery({
+                    '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
+                })),
+            ...(disabled && {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                borderColor: disabledColor,
+                WebkitTextFillColor: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                    borderColor: disabledColorDark,
+                    WebkitTextFillColor: disabledColorDark,
+                }),
+            }),
+            ...(readOnly && {
+                cursor: 'text',
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: contrastLowColorDark,
+                    background: contrastLowColorDark,
+                }),
+            }),
+        },
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+            !readOnly &&
+            hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            })),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    };
+};
+
 const widthMap = {
     narrow: gridNarrowOffset,
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$12 = (width) => {
+const getComponentCss$13 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5975,7 +6205,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$11 = () => {
+const getComponentCss$12 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6074,7 +6304,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$10 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$11 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6092,7 +6322,7 @@ const getComponentCss$10 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$$ = (color, orientation, theme) => {
+const getComponentCss$10 = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6153,7 +6383,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$$ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6400,7 +6630,7 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
     });
 };
 
-const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$_ = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6631,7 +6861,7 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
+const getComponentCss$Z = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -6683,7 +6913,7 @@ const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6720,7 +6950,7 @@ const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6767,7 +6997,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$W = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6789,7 +7019,7 @@ const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$V = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6979,7 +7209,7 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$T = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$U = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7089,7 +7319,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$S = (size, offset) => {
+const getComponentCss$T = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7109,7 +7339,7 @@ const getComponentCss$S = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$R = (direction, wrap) => {
+const getComponentCss$S = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7135,7 +7365,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$Q = (size, align, color, ellipsis, theme) => {
+const getComponentCss$R = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7195,7 +7425,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$P = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$Q = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7306,7 +7536,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$O = (name, source, color, size, theme) => {
+const getComponentCss$P = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7425,7 +7655,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$N = (state, hasAction, hasClose, theme) => {
+const getComponentCss$O = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7465,231 +7695,51 @@ const getComponentCss$N = (state, hasAction, hasClose, theme) => {
     });
 };
 
-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');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    return {
-        [`::slotted(${child})`]: {
-            display: 'block',
-            width: '100%',
-            height: child !== 'textarea'
-                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
-                : 'auto',
-            margin: 0,
-            outline: 0,
-            WebkitAppearance: 'none', // iOS safari
-            appearance: 'none',
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            background: 'transparent',
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
-            textIndent: 0,
-            color: primaryColor,
-            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: formStateColorDark || contrastMediumColorDark,
-                color: primaryColorDark,
-            }),
-            ...additionalDefaultJssStyle,
-        },
-        '::slotted(:not(input[type="password"]))': {
+// 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, hideLabel, state, compact, readOnly, theme, controls) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
-        },
-        ...(!isLoading &&
-            hoverMediaQuery({
-                // with the media query the selector has higher priority and overrides disabled styles
-                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
-                    borderColor: formStateHoverColor || primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: formStateHoverColorDark || primaryColorDark,
-                    }),
-                },
-            })),
-        // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
-        [`::slotted(${child}:focus)`]: {
-            borderColor: primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: primaryColorDark,
-            }),
-        },
-        [`::slotted(${child}:disabled)`]: {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-            WebkitTextFillColor: disabledColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledColorDark,
-                borderColor: disabledColorDark,
-                WebkitTextFillColor: disabledColorDark,
-            }),
-        },
-        ...(child !== 'select' && {
-            [`::slotted(${child}[readonly])`]: {
-                borderColor: contrastLowColor,
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: contrastLowColorDark,
-                    background: contrastLowColorDark,
-                }),
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
             },
         }),
-    };
-};
-const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
-const formElementLayeredSafeZone = `calc(${formElementLayeredGap} + ${borderWidthBase})`;
-// TODO: basic button/icon padding can already be set within style function instead of on component style level
-const formButtonOrIconPadding = spacingStaticXSmall;
-// TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
-//  unfortunately line-height alignment breaks for a select element for some reasons then
-// TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingVertical = spacingStaticSmall;
-// TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingHorizontal = spacingStaticMedium;
-const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
-    // when applied, font-family and font-size needs to be set too for correct calculation of ex-unit ($fontLineHeight)
-    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
-};
-// TODO: re-use in textarea-wrapper not only in text-field-wrapper
-const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
-    const { disabledColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
-    const { disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
-    return {
-        pointerEvents: 'none',
-        maxWidth: '100%',
-        boxSizing: 'border-box',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        font: textSmallStyle.font,
-        color: contrastMediumColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: contrastMediumColorDark,
-        }),
-        ...(isDisabled && {
-            color: disabledColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledColorDark,
-            }),
-        }),
-        ...(isReadonly && {
-            color: contrastHighColor,
+        ...(controls && {
+            button: {
+                padding: `var(${cssVarButtonPurePadding})`,
+                margin: `var(${cssVarButtonPureMargin})`,
+            },
         }),
-    };
+    });
 };
 
-const cssVarInternalInputPasswordScaling = '--p-internal-input-password-scaling';
+// 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, hideLabel, state, toggle, compact, readOnly, theme) => {
-    // Determines the scaling factor for the input-password size. In "compact" mode, it uses 0.5 to achieve a 36px input-password (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputPasswordScaling`.
-    const scalingVar = `var(${cssVarInternalInputPasswordScaling}, ${compact ? 0.5 : 1})`;
-    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
-    const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
-    // TODO: Ideally, 'compact' should only influence the calculation of scalingVar,
-    // ensuring that the paddingButton calculation solely depends on the scaling factor.
-    const paddingButton = compact ? '0px' : `calc(${formButtonOrIconPadding} * ${scalingVar})`;
-    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
-    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    const hoverStyles = {
-        borderColor: formStateHoverColor || primaryColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            borderColor: formStateHoverColorDark || primaryColorDark,
-        }),
-    };
     return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    ...colorSchemeStyles,
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            input: {
-                all: 'unset',
-                flex: 1,
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
-                height,
-                paddingBlock,
-                textIndent: 0,
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
-                width: '100%',
-                minWidth: '2rem',
-                '&[type="text"]': {
-                    textOverflow: 'ellipsis',
-                },
-            },
-        },
-        root: {
-            display: 'grid',
-            gap: spacingStaticXSmall,
-        },
-        wrapper: {
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            paddingInlineStart: paddingInline,
-            paddingInlineEnd: toggle ? paddingBlock : paddingInline, // TODO resolve inconsistency in Figma
-            display: 'flex',
-            gap: formElementLayeredGap,
-            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: formStateColorDark || contrastMediumColorDark,
-            }),
-            '&:has(input:focus:not([readonly]))': {
-                borderColor: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: primaryColorDark,
-                }),
+        ...getFunctionalComponentInputBaseStyles(disabled, hideLabel, state, compact, readOnly, theme, {
+            '&[type="text"]': {
+                textOverflow: 'ellipsis',
             },
-            ...(!disabled &&
-                !readOnly &&
-                hoverMediaQuery({
-                    '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
-                })),
-            ...(disabled && {
-                cursor: 'not-allowed',
-                color: disabledColor,
-                borderColor: disabledColor,
-                WebkitTextFillColor: disabledColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabledColorDark,
-                    borderColor: disabledColorDark,
-                    WebkitTextFillColor: disabledColorDark,
-                }),
-            }),
-            ...(readOnly && {
-                cursor: 'text',
-                borderColor: contrastLowColor,
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: contrastLowColorDark,
-                    background: contrastLowColorDark,
-                }),
-            }),
-        },
+        }),
         ...(toggle && {
             button: {
-                placeSelf: 'center',
-                padding: paddingButton, // TODO resolve inconsistency in Figma
+                padding: `var(${cssVarButtonPurePadding})`,
+                margin: `var(${cssVarButtonPureMargin})`,
             },
         }),
-        // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
-            !readOnly &&
-            hoverMediaQuery({
-                '&:hover~.wrapper': hoverStyles,
-            })),
-        // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state),
     });
 };
 
@@ -11349,38 +11399,43 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$1c;
-exports.getBannerCss = getComponentCss$1b;
-exports.getButtonCss = getComponentCss$17;
-exports.getButtonGroupCss = getComponentCss$1a;
-exports.getButtonPureCss = getComponentCss$19;
-exports.getButtonTileCss = getComponentCss$18;
-exports.getCanvasCss = getComponentCss$16;
-exports.getCarouselCss = getComponentCss$15;
-exports.getCheckboxCss = getComponentCss$13;
-exports.getCheckboxWrapperCss = getComponentCss$14;
-exports.getContentWrapperCss = getComponentCss$12;
-exports.getCrestCss = getComponentCss$11;
-exports.getDisplayCss = getComponentCss$10;
-exports.getDividerCss = getComponentCss$$;
-exports.getDrilldownCss = getComponentCss$_;
-exports.getDrilldownItemCss = getComponentCss$Z;
-exports.getDrilldownLinkCss = getComponentCss$Y;
-exports.getFieldsetCss = getComponentCss$W;
-exports.getFieldsetWrapperCss = getComponentCss$X;
-exports.getFlexCss = getComponentCss$U;
-exports.getFlexItemCss = getComponentCss$V;
-exports.getFlyoutCss = getComponentCss$T;
+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.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$R;
-exports.getGridItemCss = getComponentCss$S;
-exports.getHeadingCss = getComponentCss$Q;
-exports.getHeadlineCss = getComponentCss$P;
-exports.getIconCss = getComponentCss$O;
-exports.getInlineNotificationCss = getComponentCss$N;
+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.getLinkCss = getComponentCss$K;
 exports.getLinkPureCss = getComponentCss$L;
@@ -11398,6 +11453,7 @@ exports.getPaginationCss = getComponentCss$A;
 exports.getPinCodeCss = getComponentCss$z;
 exports.getPopoverCss = getComponentCss$y;
 exports.getRadioButtonWrapperCss = getComponentCss$x;
+exports.getScalingVar = getScalingVar;
 exports.getScrollerCss = getComponentCss$w;
 exports.getSegmentedControlCss = getComponentCss$u;
 exports.getSegmentedControlItemCss = getComponentCss$v;