@porsche-design-system/components-react 3.28.0-rc.2 → 3.28.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$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';
@@ -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$1b = (isOpen) => {
+const getComponentCss$1c = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4176,7 +4176,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1a = (direction) => {
+const getComponentCss$1b = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4329,7 +4329,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: {
@@ -4367,7 +4367,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': {
@@ -4637,7 +4637,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');
@@ -4713,7 +4713,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({
@@ -5092,7 +5092,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();
@@ -5534,8 +5534,12 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: getThemedFormStateColors('dark', state).formStateColor,
             }),
-            transition: getTransition('color'),
+            transition: `${getTransition('color')}, ${getTransition('opacity')}`,
             ...additionalDefaultJssStyle,
+            '&:empty': {
+                opacity: '0',
+                position: 'absolute',
+            },
         },
     };
 };
@@ -5546,7 +5550,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);
@@ -5642,14 +5646,113 @@ const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) => {
+    const { contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
+    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
+    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
+    // Scales proportionally with the line height and the scaling factor.
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
+    return {
+        position: 'relative',
+        '&::before': {
+            // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
+            // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
+            content: '""',
+            position: 'absolute',
+            inset,
+        },
+        width: dimension,
+        height: dimension,
+        font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+        display: 'block',
+        margin: 0,
+        padding: 0,
+        WebkitAppearance: 'none', // iOS safari
+        appearance: 'none',
+        boxSizing: 'content-box',
+        background,
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+        border: `${borderWidthBase} solid ${uncheckedColor}`,
+        outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+        ...(disabledOrLoading
+            ? {
+                pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+            }
+            : {
+                cursor: 'pointer',
+            }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: uncheckedColorDark,
+        }),
+        gridArea: '1/1',
+        borderRadius: borderRadiusSmall,
+        ...addImportantToEachRule({
+            backgroundSize: 'cover',
+        }),
+    };
+};
+
 const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
+const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { formStateColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    return {
+        borderColor: checkedColor,
+        backgroundColor: checkedColor,
+        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            borderColor: checkedColorDark,
+            backgroundColor: checkedColorDark,
+        }),
+        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+        ...(isHighContrastMode &&
+            getSchemedHighContrastMediaQuery({
+                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+            }, {
+                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+            })),
+    };
+};
+
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
-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);
@@ -5673,8 +5776,6 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
             : formStateColorDark || primaryColorDark;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
-    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(disabledOrLoading ? disabledColorDark : formStateColor || primaryColor);
     const indeterminateIconColorDark = escapeHashCharacter(formStateColorDark || primaryColorDark);
     const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
@@ -5682,18 +5783,11 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
     const background = `transparent 0% 0% / ${fontLineHeight}`;
     const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
     const scalingVar = `var(${cssVarInternalCheckboxScaling}, ${compact ? 0.6668 : 1})`;
-    // Determines the scaling factor for the checkbox size. In "compact" mode, it uses 0.6668 to achieve a 20px checkbox (compact size).
-    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalCheckboxScaling`.
     const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${scalingVar} * ${fontLineHeight}))`;
-    // Calculates the checkbox size and ensures a minimum size of 12px (0.75 * SCALING_BASE_VALUE).
-    // Scales proportionally with the line height and the scaling factor.
     const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
     const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the checkbox full size.
     const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
-    // Adjusts padding to maintain consistent spacing when the checkbox is smaller than the minimum touch target size.
-    // Uses asymmetric padding instead of `gap` to ensure there is no non-clickable area between the label and the input.
     const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
-    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the checkbox ::before pseudo-element with a negative offset to align it with the touch target.
     const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the checkbox, whichever is larger.
     return getCss({
         '@global': {
@@ -5705,44 +5799,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            input: {
-                position: 'relative',
-                '&::before': {
-                    // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
-                    // This pseudo-element expands the clickable area without affecting the visual size of the checkbox itself.
-                    content: '""',
-                    position: 'absolute',
-                    inset,
-                },
-                width: dimension,
-                height: dimension,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-                display: 'block',
-                margin: 0,
-                padding: 0,
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                boxSizing: 'content-box',
-                background,
-                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                border: `${borderWidthBase} solid ${uncheckedColor}`,
-                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
-                ...(disabledOrLoading
-                    ? {
-                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
-                    }
-                    : {
-                        cursor: 'pointer',
-                    }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: uncheckedColorDark,
-                }),
-                gridArea: '1/1',
-                borderRadius: borderRadiusSmall,
-                ...addImportantToEachRule({
-                    backgroundSize: 'cover',
-                }),
-            },
+            input: getCheckboxBaseStyles(theme, isDisabled, isLoading, state, compact),
             ...(isLoading
                 ? {
                     'input:checked': {
@@ -5756,23 +5813,7 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
                     },
                 }
                 : {
-                    'input:checked': {
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
-                        ...(isHighContrastMode &&
-                            getSchemedHighContrastMediaQuery({
-                                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
-                            }, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
-                            })),
-                    },
+                    'input:checked': getCheckboxCheckedBaseStyles(theme, isDisabled, isLoading, state),
                     'input:indeterminate': {
                         background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
                         borderColor: uncheckedColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
@@ -5857,32 +5898,262 @@ const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, th
             alignSelf: 'flex-start', // in case label becomes multiline
             height,
         },
-        ...(isLoading && {
-            spinner: {
-                position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
-                gridArea: '1/1',
-                placeSelf: 'center',
-                width: dimension,
-                height: dimension,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-                pointerEvents: 'none',
-            },
-        }),
+        ...(isLoading && {
+            spinner: {
+                position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: dimension,
+                height: dimension,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
+            gridArea: '1/2',
+            ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
+        }, {
+            paddingTop,
+            paddingInlineStart,
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state, {
+            gridColumn: '1/3',
+        }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+    });
+};
+
+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(isDisabled || isLoading, hideLabel, theme, {
-            gridArea: '1/2',
-            ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
-        }, {
-            paddingTop,
-            paddingInlineStart,
-        }),
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled &&
+            !readOnly &&
+            hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            })),
         // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state, {
-            gridColumn: '1/3',
-        }),
-        // .loading
-        ...getFunctionalComponentLoadingMessageStyles(),
-    });
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    };
 };
 
 const widthMap = {
@@ -5890,7 +6161,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$12 = (width) => {
+const getComponentCss$13 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5932,7 +6203,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$11 = () => {
+const getComponentCss$12 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6031,7 +6302,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': {
@@ -6049,7 +6320,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 = {
@@ -6110,7 +6381,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({
@@ -6357,7 +6628,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': {
@@ -6588,7 +6859,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
@@ -6640,7 +6911,7 @@ const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6677,7 +6948,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': {
@@ -6724,7 +6995,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({
@@ -6746,7 +7017,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': {
@@ -6936,7 +7207,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({
@@ -7046,7 +7317,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({
@@ -7066,7 +7337,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': {
@@ -7092,7 +7363,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': {
@@ -7152,7 +7423,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': {
@@ -7263,7 +7534,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);
@@ -7382,7 +7653,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': {
@@ -7422,235 +7693,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',
             },
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
-                    '&: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, {
-            ...hoverMediaQuery({
-                ...(!disabled &&
-                    !readOnly && {
-                    '&:hover~.wrapper': hoverStyles,
-                }),
-            }),
-        }),
-        // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state),
     });
 };
 
@@ -7690,12 +7777,12 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
-        icon: {
-            ...(isPrimary &&
-                !isHighContrastMode && {
+        ...(isPrimary &&
+            !isHighContrastMode && {
+            icon: {
                 filter: 'invert(1)',
-            }),
-        },
+            },
+        }),
     }, hasSlottedAnchor && {
         ...(isHighContrastMode && {
             root: {
@@ -8578,7 +8665,10 @@ optionHeight, theme) => {
     };
 };
 
-const getComponentCss$D = (theme) => {
+const getComponentCss$D = (theme, isDisabled, selected) => {
+    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
     return getCss({
         '@global': {
             ':host': {
@@ -8588,11 +8678,19 @@ const getComponentCss$D = (theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                display: 'block',
+                paddingTop,
+            },
+        },
+        option: {
+            ...getOptionJssStyle('multi-select-option', 1, theme),
+            columnGap: '8px',
         },
-        option: getOptionJssStyle('multi-select-option', 1, theme),
         checkbox: {
-            pointerEvents: 'none', // Avoid checkbox label click which updates input within p-checkbox-wrapper
+            flexShrink: 0,
+            ...getCheckboxBaseStyles(theme, isDisabled),
+            ...(selected && getCheckboxCheckedBaseStyles(theme, isDisabled)),
         },
     });
 };
@@ -11299,4 +11397,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$1c as getAccordionCss, getComponentCss$1b as getBannerCss, getComponentCss$17 as getButtonCss, getComponentCss$1a as getButtonGroupCss, getComponentCss$19 as getButtonPureCss, getComponentCss$18 as getButtonTileCss, getComponentCss$16 as getCanvasCss, getComponentCss$15 as getCarouselCss, getComponentCss$13 as getCheckboxCss, getComponentCss$14 as getCheckboxWrapperCss, getComponentCss$12 as getContentWrapperCss, getComponentCss$11 as getCrestCss, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$W as getFieldsetCss, getComponentCss$X as getFieldsetWrapperCss, getComponentCss$U as getFlexCss, getComponentCss$V as getFlexItemCss, getComponentCss$T as getFlyoutCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$R as getGridCss, getComponentCss$S as getGridItemCss, getComponentCss$Q as getHeadingCss, getComponentCss$P as getHeadlineCss, getComponentCss$O as getIconCss, getComponentCss$N as getInlineNotificationCss, 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, 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$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 };