@porsche-design-system/components-react 3.8.0 → 3.9.0

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

@@ -3157,7 +3157,7 @@ var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
 
 const hasWindow = typeof window !== 'undefined';
 
-const isHighContrastMode = hasWindow && window.matchMedia && matchMedia('(forced-colors: active)').matches;
+const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
 const attributeMutationMap = new Map();
 hasWindow &&
@@ -3382,12 +3382,26 @@ const gridNarrowOffset = {
     xxl: gridNarrowOffsetXXL,
 };
 
+const motionDurationShort = '0.25s';
+
+const motionEasingBase = 'cubic-bezier(0.25,0.1,0.25,1)';
+
 const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
+const motionDurationLong = '0.6s';
+
+const motionDurationModerate = '0.4s';
+
+const motionDurationVeryLong = '1.2s';
+
+const motionEasingIn = 'cubic-bezier(0,0,0.2,1)';
+
+const motionEasingOut = 'cubic-bezier(0.4,0,0.5,1)';
+
 const spacingStaticXSmall = '4px';
 
 const spacingStaticSmall = '8px';
@@ -3771,9 +3785,21 @@ const getInvertedThemedColors = (theme) => {
     return getThemedColors(isThemeDark(theme) ? 'light' : 'dark');
 };
 
-const transitionDuration = 'var(--p-transition-duration, .24s)';
-const transitionTimingFunction$1 = 'ease';
-const getTransition = (cssProperty) => `${cssProperty} ${transitionDuration} ${transitionTimingFunction$1}`;
+const motionDurationMap = {
+    short: motionDurationShort,
+    moderate: motionDurationModerate,
+    long: motionDurationLong,
+    veryLong: motionDurationVeryLong,
+};
+const motionEasingMap = {
+    base: motionEasingBase,
+    in: motionEasingIn,
+    out: motionEasingOut,
+    linear: 'linear',
+};
+const cssVariableTransitionDuration = '--p-transition-duration';
+const cssVariableAnimationDuration = '--p-animation-duration';
+const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${delay ? ` var(${cssVariableTransitionDuration}, ${motionDurationMap[delay]})` : ''}`;
 const pxToRemWithUnit = (px) => `${px / 16}rem`;
 const addImportantToRule = (value) => `${value} !important`;
 const addImportantToEachRule = (input) => {
@@ -3859,7 +3885,7 @@ const getBackfaceVisibilityJssStyle = () => ({
  * @param {string} timingFn - The timing function of the transition animation. (default: 'cubic-bezier(.16,1,.3,1)')
  * @returns {JssStyle} - The JSS styles for the frosted glass background.
  */
-const getFrostedGlassBackgroundJssStyles = (isVisible, duration, theme, timingFn = 'cubic-bezier(.16,1,.3,1)') => {
+const getFrostedGlassBackgroundJssStyles = (isVisible, duration, theme) => {
     return {
         // workaround via pseudo element to fix stacking (black) background in safari
         '&::before': {
@@ -3878,7 +3904,7 @@ const getFrostedGlassBackgroundJssStyles = (isVisible, duration, theme, timingFn
                     backdropFilter: 'blur(0px)',
                     WebkitBackdropFilter: 'blur(0px)',
                 }),
-            transition: `opacity ${duration} ${timingFn}, backdrop-filter ${duration} ${timingFn}, --webkit-backdrop-filter ${duration} ${timingFn}`,
+            transition: `${getTransition('opacity', duration, 'base')}, ${getTransition('backdrop-filter', duration, 'base')}, ${getTransition('-webkit-backdrop-filter', duration, 'base')}`,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 background: themeDarkBackgroundShading,
             }),
@@ -3973,155 +3999,27 @@ const mergeDeep = (...objects) => {
 const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
 const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
 
-const getThemedFormStateColors = (theme, state) => {
-    const themedColors = getThemedColors(theme);
-    return {
-        formStateColor: themedColors[`${state}Color`],
-        formStateHoverColor: themedColors[`${state}ColorDarken`],
-    };
-};
-
-const getBaseChildStyles = (child, state, 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})`]: {
-            gridArea: '3 / 1 / auto / span 2',
-            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',
-            appearance: 'none',
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            background: 'transparent',
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-            textIndent: 0,
-            color: primaryColor,
-            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: formStateColorDark || contrastMediumColorDark,
-                color: primaryColorDark,
-            }),
-            ...additionalDefaultJssStyle,
-        },
-        ...hoverMediaQuery({
-            // with the media query the selector has higher priority and overrides disabled styles
-            [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
-                borderColor: formStateHoverColor || primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: formStateHoverColorDark || primaryColorDark,
-                }),
-            },
-        }),
-        [`::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 getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles, additionalLabelJssStyle) => {
-    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
-    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
-    return {
-        label: {
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1fr) auto',
-            position: 'relative',
-            '&__text': {
-                gridColumn: 'span 2',
-                display: 'block',
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
-                    width: 'fit-content',
-                    marginBottom: spacingStaticXSmall,
-                })),
-                ...textSmallStyle,
-                color: isDisabled ? disabledColor : primaryColor,
-                transition: getTransition('color'),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: isDisabled ? disabledColorDark : primaryColorDark,
-                }),
-                '&+&': {
-                    marginTop: `-${spacingStaticXSmall}`,
-                    fontSize: fontSizeTextXSmall,
-                    ...(!isDisabled && {
-                        color: contrastHighColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            color: contrastHighColorDark,
-                        }),
-                    }),
-                },
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))`]: {
-                            borderColor: addImportantToRule(formStateHoverColor || primaryColor),
-                            ...prefersColorSchemeDarkMediaQuery(theme, {
-                                borderColor: addImportantToRule(formStateHoverColorDark || primaryColorDark),
-                            }),
-                        },
-                    },
-                }),
-            },
-            ...additionalLabelJssStyle,
-        },
-        ...(counterOrUnitOrIconStyles && {
-            [counterOrUnitOrIconStylesKey]: {
-                ...counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey],
-                pointerEvents: 'none',
-                ...(isDisabled && {
-                    color: disabledColor,
-                    cursor: 'not-allowed',
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: disabledColorDark,
-                    }),
-                }),
-            },
-        }),
-    };
-};
-
 const OPTION_HEIGHT = 40; // optgroups are higher and ignored
 const MULTI_SELECT_OPTION_HEIGHT = 44;
 const getNoResultsOptionJssStyle = () => ({
     '&[role=status]': {
         cursor: 'not-allowed',
     },
+    // TODO: shouldn't be used here, instead use sr-only functional component and style
     '&__sr': getHiddenTextJssStyle(),
 });
 
+/**
+ * Applies a style only on Chromium based browsers by using a media query which is only supported there.
+ * https://www.browserstack.com/guide/create-browser-specific-css
+ *
+ * @param {JssStyle} style - The style to be applied when the Chromium media query is supported.
+ * @returns {JssStyle} - The Chromium media query containing the style.
+ */
+const supportsChromiumMediaQuery = (style) => ({
+    '@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)': style,
+});
+
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -4182,6 +4080,7 @@ const getComponentCss$10 = (size, compact, open, theme) => {
                 textDecoration: 'none',
                 border: 0,
                 outline: 0,
+                margin: 0,
                 gap: '24px',
                 background: 'transparent',
                 cursor: 'pointer',
@@ -4263,18 +4162,18 @@ const getComponentCss$10 = (size, compact, open, theme) => {
                 ? {
                     gridTemplateRows: '1fr',
                     visibility: 'visible',
-                    transition: `grid-template-rows ${transitionDuration} ease-out`,
+                    transition: getTransition('grid-template-rows'),
                     paddingBottom: compact ? spacingStaticSmall : '24px',
                 }
                 : {
                     gridTemplateRows: '0fr',
                     visibility: 'hidden',
-                    transition: `grid-template-rows ${transitionDuration} ease-out, visibility 0s linear ${transitionDuration}`,
+                    transition: `${getTransition('grid-template-rows')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationShort})`,
                 }),
             '& div': {
                 overflow: open ? 'visible' : 'hidden',
                 // Fix overflow issues for overlapping content (e.g. select dropdown)
-                animation: open ? `$overflow ${transitionDuration}` : 'none',
+                animation: open ? `$overflow var(${cssVariableTransitionDuration},${motionDurationShort})` : 'none',
                 // Necessary to make focus outlines fully visible
                 padding: '4px',
                 margin: '-4px',
@@ -4295,12 +4194,7 @@ const BANNER_Z_INDEX = 99;
 
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
-const cssVariableAnimationDuration = '--p-animation-duration';
 const cssVariableZIndex = '--p-internal-banner-z-index';
-const ANIMATION_DURATION$1 = 600;
-const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
-const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
-const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
 const topBottomFallback = '56px';
 const getComponentCss$$ = (isOpen) => {
     return getCss({
@@ -4322,14 +4216,14 @@ const getComponentCss$$ = (isOpen) => {
                         opacity: 1,
                         visibility: 'inherit',
                         transform: 'translate3d(0,0,0)',
-                        transition: `opacity ${duration$1} ${easeInQuad$1},transform ${duration$1} ${easeInQuad$1}`,
+                        transition: `transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}`,
                     }
                     : {
                         opacity: 0,
                         visibility: 'hidden',
                         transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
                         '&(.hydrated),&(.ssr)': {
-                            transition: `visibility 0s linear ${duration$1},opacity ${duration$1} ${easeOutQuad$1},transform ${duration$1} ${easeOutQuad$1}`,
+                            transition: `visibility 0s linear var(${cssVariableAnimationDuration}, ${motionDurationLong}), transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}`,
                         },
                     }),
                 [getMediaQueryMin('s')]: {
@@ -4440,8 +4334,8 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             display: 'flex',
             gap: spacingStaticXSmall,
             width: '100%',
-            margin: 0,
             padding: 0,
+            margin: 0,
             color: isDisabledOrLoading ? disabledColor : primaryColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
@@ -4523,6 +4417,7 @@ const getComponentCss$Z = (icon, iconSource, active, isLoading, isDisabledOrLoad
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
+            WebkitAppearance: 'none',
             appearance: 'none',
             background: 'transparent',
             textAlign: 'start',
@@ -4623,7 +4518,7 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
         },
         'image-container': {
             position: 'absolute',
-            transition: getTransition('transform'),
+            transition: getTransition('transform', 'moderate'),
             ...getInsetJssStyle(),
         },
         content: {
@@ -4757,6 +4652,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             boxSizing: 'border-box',
             outline: 0,
             textAlign: 'start',
+            WebkitAppearance: 'none',
             appearance: 'none',
             textDecoration: 'none',
             border: `2px solid ${borderColor}`,
@@ -4765,7 +4661,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             backgroundColor,
             color: textColor,
             ...textSmallStyle,
-            transition: ['background-color', 'border-color', 'color'].map(getTransition).join(),
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 padding: hideLabelValue ? '13px' : '13px 26px',
                 gap: hideLabelValue ? 0 : spacingStaticSmall,
@@ -4849,6 +4745,7 @@ const getComponentCss$X = (icon, iconSource, variant, hideLabel, disabled, loadi
                 }),
             }),
             ...(loading && !isPrimary && frostedGlassStyle),
+            margin: 0, // Removes default button margin on safari 15
         },
         ...(loading && {
             spinner: {
@@ -4882,7 +4779,7 @@ const getComponentCss$X = (icon, iconSource, variant, hideLabel, disabled, loadi
     }));
 };
 
-const carouselTransitionDuration = 400;
+const carouselTransitionDuration = motionDurationModerate;
 const bulletActiveClass = 'bullet--active';
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
 const bulletInfiniteClass = 'bullet--infinite';
@@ -5045,7 +4942,7 @@ const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHead
                 width: 'fit-content',
                 height: paginationBulletSize,
                 gap: spacingStaticSmall,
-                transition: `transform ${carouselTransitionDuration}ms`,
+                transition: `transform ${carouselTransitionDuration}`,
             },
             bullet: {
                 borderRadius: borderRadiusSmall,
@@ -5063,12 +4960,12 @@ const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHead
                     ? {
                         width: '0px',
                         height: '0px',
-                        transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms, height ${carouselTransitionDuration}ms`,
+                        transition: `background-color ${carouselTransitionDuration}, width ${carouselTransitionDuration}, height ${carouselTransitionDuration}`,
                     }
                     : {
                         width: paginationBulletSize,
                         height: paginationBulletSize,
-                        transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
+                        transition: `background-color ${carouselTransitionDuration}, width ${carouselTransitionDuration}`,
                     }),
             },
             ...(isInfinitePagination && {
@@ -5122,31 +5019,16 @@ const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHead
     });
 };
 
-const getFunctionalComponentRequiredStyles = () => {
-    return {
-        required: {
-            userSelect: 'none',
-        },
-    };
-};
-
-const getFunctionalComponentStateMessageStyles = (theme, state) => {
+const getThemedFormStateColors = (theme, state) => {
+    const themedColors = getThemedColors(theme);
     return {
-        message: {
-            display: 'flex',
-            gap: spacingStaticXSmall,
-            marginTop: spacingStaticXSmall,
-            ...textSmallStyle,
-            color: getThemedFormStateColors(theme, state).formStateColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: getThemedFormStateColors('dark', state).formStateColor,
-            }),
-            transition: getTransition('color'),
-        },
+        formStateColor: themedColors[`${state}Color`],
+        formStateHoverColor: themedColors[`${state}ColorDarken`],
     };
 };
 
-const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme) => {
+// TODO: move to form-styles.ts
+const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, 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);
@@ -5171,121 +5053,79 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
     return {
-        '@global': {
-            ':host': addImportantToEachRule({
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
+        '::slotted': {
+            '&(input)': {
+                position: 'relative',
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`,
                 display: 'block',
-            }),
-            '::slotted': addImportantToEachRule({
-                '&(input)': {
-                    gridArea: '1 / 1',
-                    position: 'relative',
-                    width: fontLineHeight,
-                    height: fontLineHeight,
-                    fontFamily,
-                    fontSize: '1rem',
-                    flexShrink: 0,
-                    display: 'block',
-                    margin: 0,
-                    padding: 0,
-                    WebkitAppearance: 'none',
-                    appearance: 'none',
-                    boxSizing: 'content-box',
-                    background: `transparent 0% 0% / ${fontLineHeight}`,
-                    transition: ['border-color', 'background-color'].map(getTransition).join(),
-                    border: `2px solid ${uncheckedColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: uncheckedColorDark,
+                margin: 0,
+                padding: 0,
+                WebkitAppearance: 'none',
+                appearance: 'none',
+                boxSizing: 'content-box',
+                background: `transparent 0% 0% / ${fontLineHeight}`,
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+                border: `2px solid ${uncheckedColor}`,
+                outline: 0,
+                ...(disabledOrLoading
+                    ? {
+                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+                    }
+                    : {
+                        cursor: 'pointer',
                     }),
-                    outline: 0,
-                    ...(disabledOrLoading
-                        ? {
-                            cursor: 'not-allowed',
-                            pointerEvents: 'none',
-                        }
-                        : {
-                            cursor: 'pointer',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: uncheckedColorDark,
+                }),
+            },
+            '&(input:checked)': {
+                // background-image is merged in later
+                borderColor: checkedColor,
+                backgroundColor: checkedColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: checkedColorDark,
+                    backgroundColor: checkedColorDark,
+                }),
+            },
+            ...(!disabledOrLoading &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    '&(input:hover),label:hover~.wrapper &(input)': {
+                        borderColor: uncheckedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: uncheckedHoverColorDark,
                         }),
-                },
-                '&(input:checked)': {
-                    // background-image is merged in later
-                    borderColor: checkedColor,
-                    backgroundColor: checkedColor,
+                    },
+                    '&(input:checked:hover),label:hover~.wrapper &(input:checked)': {
+                        borderColor: checkedHoverColor,
+                        backgroundColor: checkedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedHoverColorDark,
+                            backgroundColor: checkedHoverColorDark,
+                        }),
+                    },
+                    'label:hover~.wrapper &(input)': supportsChromiumMediaQuery({
+                        transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
+                    }),
+                })),
+            ...(!isDisabled && {
+                // TODO: can be done with getFocusStyle() in the meantime
+                '&(input:focus)::before': {
+                    content: '""',
+                    position: 'absolute',
+                    ...getInsetJssStyle(-6),
+                    border: `${borderWidthBase} solid ${focusColor}`,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: checkedColorDark,
-                        backgroundColor: checkedColorDark,
+                        borderColor: focusColorDark,
                     }),
                 },
-                ...(!disabledOrLoading && {
-                    ...(!isHighContrastMode &&
-                        hoverMediaQuery({
-                            '&(input:hover), .text:hover ~ &(input)': {
-                                borderColor: uncheckedHoverColor,
-                                ...prefersColorSchemeDarkMediaQuery(theme, {
-                                    borderColor: uncheckedHoverColorDark,
-                                }),
-                            },
-                            '&(input:checked:hover), .text:hover ~ &(input:checked)': {
-                                borderColor: checkedHoverColor,
-                                backgroundColor: checkedHoverColor,
-                                ...prefersColorSchemeDarkMediaQuery(theme, {
-                                    borderColor: checkedHoverColorDark,
-                                    backgroundColor: checkedHoverColorDark,
-                                }),
-                            },
-                        })),
-                    ...(!isDisabled && {
-                        '&(input:focus)::before': {
-                            content: '""',
-                            position: 'absolute',
-                            ...getInsetJssStyle(-6),
-                            border: `${borderWidthBase} solid ${focusColor}`,
-                            ...prefersColorSchemeDarkMediaQuery(theme, {
-                                borderColor: focusColorDark,
-                            }),
-                        },
-                        '&(input:focus:not(:focus-visible))::before': {
-                            borderColor: 'transparent',
-                        },
-                    }),
-                }),
-            }),
-            label: {
-                display: 'grid',
-                gridTemplateColumns: 'repeat(2, auto)',
-                justifyContent: 'flex-start',
-            },
-        },
-        text: {
-            gridArea: '1 / 2',
-            cursor: disabledOrLoading ? 'default' : 'pointer',
-            ...textSmallStyle,
-            color: disabledOrLoading ? disabledColor : primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledOrLoading ? disabledColorDark : primaryColorDark,
+                '&(input:focus:not(:focus-visible))::before': {
+                    borderColor: 'transparent',
+                },
             }),
-            transition: getTransition('color'),
-            ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
-                paddingTop: '2px',
-                paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent unclickable area between label and input
-            })),
         },
-        ...getFunctionalComponentRequiredStyles(),
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-        ...(isLoading && {
-            spinner: {
-                position: 'relative',
-                gridArea: '1 / 1',
-                margin: borderWidthBase,
-                justifySelf: 'center',
-                height: fontLineHeight,
-                width: fontLineHeight,
-                fontFamily,
-                fontSize: '1rem',
-                cursor: 'not-allowed',
-            },
-        }),
     };
 };
 
@@ -5297,6 +5137,65 @@ const escapeHashCharacter = (colorString) => {
     return colorString.replace('#', '%23');
 };
 
+const getFunctionalComponentRequiredStyles = () => {
+    return {
+        required: {
+            userSelect: 'none',
+        },
+    };
+};
+
+const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, theme, additionalDefaultJssStyle, additionalIsShownJssStyle) => {
+    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
+    return {
+        label: {
+            ...textSmallStyle,
+            cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+            justifySelf: 'flex-start',
+            color: isDisabledOrLoading ? disabledColor : primaryColor,
+            transition: getTransition('color'),
+            ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle)),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
+            }),
+            '&:empty': {
+                display: 'none', // prevents outer spacing caused by parents grid gap, in case no label value is defined (although it has to be set to be a11y compliant)
+            },
+            '&+&': {
+                cursor: 'unset',
+                marginTop: `-${spacingStaticXSmall}`,
+                fontSize: fontSizeTextXSmall,
+                ...(!isDisabledOrLoading && {
+                    color: contrastHighColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: contrastHighColorDark,
+                    }),
+                }),
+            },
+            ...additionalDefaultJssStyle,
+        },
+        // .required
+        ...getFunctionalComponentRequiredStyles(),
+    };
+};
+
+const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaultJssStyle) => {
+    return {
+        message: {
+            display: 'flex',
+            gap: spacingStaticXSmall,
+            ...textSmallStyle,
+            color: getThemedFormStateColors(theme, state).formStateColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: getThemedFormStateColors('dark', state).formStateColor,
+            }),
+            transition: getTransition('color'),
+            ...additionalDefaultJssStyle,
+        },
+    };
+};
+
 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"/>`);
 };
@@ -5317,34 +5216,83 @@ const getComponentCss$V = (hideLabel, state, isDisabled, isLoading, theme) => {
     const indeterminateIconColorDark = isHighContrastMode
         ? canvasColor
         : escapeHashCharacter(getThemedColors('dark').primaryColor);
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), {
+    return getCss({
         '@global': {
-            '::slotted': addImportantToEachRule({
-                '&(input)': {
-                    borderRadius: borderRadiusSmall,
-                },
-                ...(!isLoading && {
-                    '&(input:checked)': {
-                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
-                        }),
-                    },
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
                 }),
-                '&(input:indeterminate)': {
-                    backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColorDark),
+            },
+            // ::slotted(input)
+            ...addImportantToEachRule(mergeDeep(getSlottedCheckboxRadioButtonStyles(state, isDisabled, isLoading, theme), {
+                '::slotted': {
+                    '&(input)': {
+                        gridArea: '1/1',
+                        borderRadius: borderRadiusSmall,
+                    },
+                    // TODO: is it somehow useful possible to make following styles configurable by paramter?
+                    ...(!isLoading && {
+                        '&(input:checked)': {
+                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+                            }),
+                        },
+                        '&(input:indeterminate)': {
+                            backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColorDark),
+                            }),
+                        },
+                    }),
+                    ...(!isDisabled && {
+                        '&(input:focus)::before': {
+                            borderRadius: borderRadiusMedium,
+                        },
                     }),
                 },
-                ...(!isDisabled && {
-                    '&(input:focus)::before': {
-                        borderRadius: borderRadiusMedium,
-                    },
-                }),
+            })),
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+            gridArea: '1/1',
+            alignSelf: 'flex-start',
+            ...(isDisabledOrLoading(isDisabled, isLoading) && {
+                // TODO: maybe .wrapper should handle it for all form components while pointer-events: none is set to input
+                cursor: 'not-allowed',
             }),
         },
-    }));
+        ...(isLoading && {
+            // TODO: extract for checkbox-wrapper and radio-button-wrapper (not gridArea and placeSelf)
+            spinner: {
+                position: 'relative',
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`,
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
+            gridArea: '1/2',
+        }, {
+            paddingTop: '2px',
+            paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state, {
+            gridColumn: '1/3',
+        }),
+    });
 };
 
 const widthMap = {
@@ -5665,8 +5613,6 @@ const getComponentCss$N = (inline, wrap, direction, justifyContent, alignItems,
 
 const headerShadowClass = 'header--shadow';
 const footerShadowClass$1 = 'footer--shadow';
-const flyoutTransitionDuration = '0.5s';
-const flyoutTransitionTimingFunction = 'cubic-bezier(0.77, 0, 0.175, 1)';
 const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
@@ -5693,10 +5639,10 @@ const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) =>
                         }
                         : {
                             visibility: 'hidden',
-                            transition: `visibility 0s linear ${flyoutTransitionDuration}`,
+                            transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong})`,
                         }),
                     ...getInsetJssStyle(),
-                    ...getFrostedGlassBackgroundJssStyles(isOpen, flyoutTransitionDuration, theme),
+                    ...getFrostedGlassBackgroundJssStyles(isOpen, 'long', theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
@@ -5717,9 +5663,17 @@ const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) =>
             maxWidth: 'var(--p-flyout-max-width, 1180px)',
             color: primaryColor,
             background: backgroundColor,
-            opacity: isOpen ? 1 : 0,
-            transform: isOpen ? 'initial' : `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
-            transition: `opacity ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction} ${isOpen ? '0s' : flyoutTransitionDuration}, transform ${flyoutTransitionDuration} ${flyoutTransitionTimingFunction}`,
+            ...(isOpen
+                ? {
+                    opacity: 1,
+                    transform: 'initial',
+                    transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
+                }
+                : {
+                    opacity: 0,
+                    transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
+                    transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
+                }),
             boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: primaryColorDark,
@@ -6343,7 +6297,6 @@ const getComponentCss$B = (size) => {
 
 const mediaQueryXl = getMediaQueryMin('xl');
 const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
-const transitionTimingFunction = 'cubic-bezier(.16,1,.3,1)';
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
 const marginTopBottom = 'clamp(16px, 7vh, 192px)';
 const footerShadowClass = 'footer--shadow';
@@ -6397,7 +6350,8 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
-    const duration = isOpen ? '.6s' : '.2s';
+    const duration = isOpen ? 'moderate' : 'short';
+    const easing = isOpen ? 'in' : 'out';
     const contentPadding = '32px';
     return getCss({
         '@global': {
@@ -6416,7 +6370,7 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                         }
                         : {
                             visibility: 'hidden',
-                            transition: 'visibility 0s linear .2s',
+                            transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationShort})`,
                         }),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
@@ -6447,9 +6401,9 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
             color: primaryColor,
             position: 'relative',
             boxSizing: 'border-box',
-            transform: isOpen ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            transform: isOpen ? 'translateY(0%)' : 'translateY(25%)',
             opacity: isOpen ? 1 : 0,
-            transition: `opacity ${duration} ${transitionTimingFunction},transform ${duration} ${transitionTimingFunction}`,
+            transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
             paddingTop: hasDismissButton ? pxToRemWithUnit(32) : contentPadding,
             ...(!hasFooter && { paddingBottom: contentPadding }),
             background: backgroundColor,
@@ -6630,7 +6584,7 @@ const getComponentCss$y = (theme) => {
             wordBreak: 'break-word',
             boxSizing: 'border-box',
             borderRadius: borderRadiusSmall,
-            transition: ['background-color', 'color'].map(getTransition).join(),
+            transition: `${getTransition('background-color')}, ${getTransition('color')}`,
             ...getNoResultsOptionJssStyle(),
             ...hoverMediaQuery({
                 '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
@@ -6690,154 +6644,261 @@ const getPlaceholderJssStyle = (styles) => ({
     '&:-moz-placeholder': styles /* Firefox 18- */,
 });
 
-const inputYPadding = '13px';
-const selectorNativeSelect = '::slotted([slot=select])';
-const INPUT_HEIGHT_CALC = `${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2`;
-const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, hasLabel, theme) => {
-    const { primaryColor, contrastMediumColor, contrastHighColor, backgroundColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
+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);
-    const isDirectionDown = direction === 'down';
+    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',
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+            textIndent: 0,
+            color: primaryColor,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+                color: primaryColorDark,
+            }),
+            ...additionalDefaultJssStyle,
+        },
+        ...(!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,
+                    }),
+                },
+            })),
+        [`::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, theme) => {
+    const { disabledColor, contrastMediumColor } = 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,
+            }),
+        }),
+    };
+};
+
+const getComponentCss$x = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+    const { contrastHighColor } = getThemedColors(theme);
+    const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
-            ...addImportantToEachRule({
-                ':host': {
-                    display: 'block',
-                    position: 'relative',
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                },
-                ...(isWithinForm && {
-                    [selectorNativeSelect]: {
+                }),
+            },
+            ...(isWithinForm &&
+                addImportantToEachRule({
+                    '::slotted([slot=internal-select])': {
                         position: 'absolute',
                         opacity: 0,
                         height: '0px',
                     },
-                }),
-            }),
-            ...getInputStyles(isDisabled, theme),
+                })),
+            // TODO: re-use select-wrapper-style
+            input: getInputStyles(isDisabled, direction, isOpen, state, theme),
         },
         root: {
-            position: 'relative',
+            display: 'grid',
+            gap: spacingStaticXSmall,
         },
-        ...getListStyles$1(isOpen, direction, theme),
-        'input-container': {
-            display: 'flex',
-            transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
-            cursor: 'text',
-            ...hoverMediaQuery({
-                '&:hover:not(.disabled)': {
-                    borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
-                    }),
-                },
-            }),
-            ...(!isDisabled && {
-                '&:focus-within': {
-                    borderColor: primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: primaryColorDark,
-                    }),
-                },
-            }),
-            background: backgroundColor,
-            border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            ...(isOpen && {
-                [isDirectionDown ? 'paddingBottom' : 'paddingTop']: '1px',
-                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
-                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
-                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
-            }),
-            ...(isDisabled && {
-                cursor: 'not-allowed',
-                color: disabledColor,
-                borderColor: disabledColor,
-                WebkitTextFillColor: disabledColor,
-            }),
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundColorDark,
-                border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
-                ...(isOpen && {
-                    [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
-                }),
-                ...(isDisabled && {
-                    color: disabledColorDark,
-                    borderColor: disabledColorDark,
-                    WebkitTextFillColor: disabledColorDark,
-                }),
-            }),
+        wrapper: {
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
         },
-        ...buildResponsiveStyles(hideLabel, (isHidden) => isHidden
-            ? {
-                label: {
-                    display: 'none',
-                },
-            }
-            : hasLabel && getLabelStyles('select', isDisabled, hideLabel, state, theme)),
+        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
         icon: {
-            padding: `${inputYPadding} 15px`,
-            cursor: isDisabled ? 'not-allowed' : 'pointer',
-            ...(isDisabled && { pointerEvents: 'none' }),
-        },
-        'reset-icon': {
-            padding: '4px',
-            margin: 'auto',
-        },
-        'toggle-icon': {
+            gridArea: '1/3',
+            placeSelf: 'center',
+            padding: formButtonOrIconPadding,
+            pointerEvents: 'none',
             transform: 'rotate3d(0,0,1,0.0001deg)',
             transition: getTransition('transform'),
-            '&--open': {
+            '&--rotate': {
                 transform: 'rotate3d(0,0,1,180deg)',
             },
         },
+        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
+        button: {
+            gridArea: '1/2',
+            placeSelf: 'center',
+            padding: formButtonOrIconPadding,
+        },
+        listbox: getListStyles$1(isOpen, direction, theme),
+        // TODO: extract (maybe even as functional component) and re-use in multi-select and select-wrapper
         'no-results': {
             padding: `${spacingStaticSmall} 12px`,
+            boxSizing: 'border-box',
             color: contrastHighColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: contrastHighColorDark,
             }),
-            boxSizing: 'border-box',
-            ...getNoResultsOptionJssStyle(),
-        },
-        ...getFunctionalComponentRequiredStyles(),
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-        'sr-text': getHiddenTextJssStyle(),
-    });
-};
-const getInputStyles = (isDisabled, theme) => {
-    const { primaryColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
-    return {
-        input: {
-            flex: 1,
-            minWidth: 0,
-            height: `calc(${INPUT_HEIGHT_CALC})`,
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-            padding: `${inputYPadding} ${spacingStaticMedium}`,
-            boxSizing: 'border-box',
-            border: 0,
-            outline: 0,
-            appearance: 'none',
-            background: 'transparent',
-            ...textSmallStyle,
-            textOverflow: 'ellipsis',
-            '&:disabled': {
-                cursor: 'not-allowed',
-            },
-            color: primaryColor,
-            ...(isDisabled && getPlaceholderJssStyle({ color: disabledColor })),
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
-                ...(isDisabled && getPlaceholderJssStyle({ color: disabledColorDark })),
-            }),
-            '&:not(:focus)': {
-                ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
-                ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
-            }, // Opacity fixes placeholder being shown lighter in firefox
+            ...getNoResultsOptionJssStyle(),
+        },
+        // TODO: maybe we should extract it as functional component too
+        'sr-only': getHiddenTextJssStyle(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+// TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
+const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return {
+        gridArea: '1/1/1/-1',
+        flex: 1,
+        minWidth: 0,
+        // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
+        height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`,
+        font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+        margin: 0,
+        padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+        paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(2),
+        boxSizing: 'border-box',
+        outline: 0,
+        WebkitAppearance: 'none',
+        appearance: 'none',
+        ...textSmallStyle,
+        textOverflow: 'ellipsis',
+        '&:disabled': {
+            cursor: 'not-allowed',
+        },
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
+        color: primaryColor,
+        '&:not(:focus)': {
+            ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
+            ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
         },
+        ...hoverMediaQuery({
+            '&:hover:not(:disabled):not(:focus),label:hover~.wrapper &:not(:disabled):not(:focus)': {
+                borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
+                }),
+            },
+        }),
+        ...(!isDisabled && {
+            '&:focus': {
+                borderColor: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: primaryColorDark,
+                }),
+            },
+        }),
+        background: backgroundColor,
+        border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
+        borderRadius: borderRadiusSmall,
+        ...(isOpen && {
+            [isDirectionDown ? 'paddingBottom' : 'paddingTop']: `calc(${formElementPaddingVertical} + 1px)`,
+            [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
+            [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+            [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+        }),
+        ...(isDisabled && {
+            ...getPlaceholderJssStyle({ color: disabledColor }),
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
+        }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: primaryColorDark,
+            background: backgroundColorDark,
+            border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
+            ...(isOpen && {
+                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
+            }),
+            ...(isDisabled && {
+                ...getPlaceholderJssStyle({ color: disabledColorDark }),
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+                WebkitTextFillColor: disabledColorDark,
+            }),
+        }),
     };
 };
 const getListStyles$1 = (isOpen, direction, theme) => {
@@ -6845,39 +6906,35 @@ const getListStyles$1 = (isOpen, direction, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return {
-        listbox: {
-            position: 'absolute',
-            margin: '0',
-            display: isOpen ? 'flex' : 'none',
-            flexDirection: 'column',
-            gap: spacingStaticSmall,
-            padding: '6px',
-            ...textSmallStyle,
-            zIndex: 10,
-            left: 0,
-            right: 0,
-            [isDirectionDown ? 'top' : 'bottom']: isDirectionDown
-                ? '100%'
-                : `calc((${INPUT_HEIGHT_CALC}) + 2 * ${borderWidthBase})`,
-            boxSizing: 'border-box',
-            maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`,
-            overflowY: 'auto',
-            WebkitOverflowScrolling: 'touch',
-            background: backgroundColor,
-            border: `2px solid ${primaryColor}`,
-            [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
-            borderRadius: borderRadiusSmall,
-            [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
-            [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
-            scrollbarWidth: 'thin',
-            scrollbarColor: 'auto',
-            transition: getTransition('border-color'),
-            transform: 'translate3d(0,0,0)',
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundColorDark,
-                borderColor: primaryColorDark,
-            }),
-        },
+        position: 'absolute',
+        margin: 0,
+        display: isOpen ? 'flex' : 'none',
+        flexDirection: 'column',
+        gap: spacingStaticSmall,
+        padding: '6px',
+        ...textSmallStyle,
+        zIndex: 10,
+        left: 0,
+        right: 0,
+        [isDirectionDown ? 'top' : 'bottom']: '100%',
+        boxSizing: 'border-box',
+        maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`,
+        overflowY: 'auto',
+        WebkitOverflowScrolling: 'touch',
+        background: backgroundColor,
+        border: `2px solid ${primaryColor}`,
+        [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
+        borderRadius: borderRadiusSmall,
+        [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
+        [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'auto',
+        transition: getTransition('border-color'),
+        transform: 'translate3d(0,0,0)',
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundColorDark,
+            borderColor: primaryColorDark,
+        }),
     };
 };
 
@@ -6933,7 +6990,7 @@ const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                transition: ['color', 'border-color', 'background-color'].map(getTransition).join(),
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
                 position: 'relative',
                 width: buttonSize,
                 height: buttonSize,
@@ -7008,31 +7065,42 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
 
 const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
-    const labelStyles = removeStyles('@media(hover:hover)', removeSlottedSelector(getLabelStyles('input', isDisabled, hideLabel, state, theme)));
-    const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getBaseChildStyles('input', state, theme, {
+    const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
+        // TODO: move into getSlottedTextFieldTextareaSelectStyles()
+        padding: `${formElementPaddingVertical} ${spacingStaticXSmall}`,
+        // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. textAlign=center|start
         textAlign: 'center',
+        // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. size=max|min
         width: inputSize,
-        ...(length === 6 && {
+        ...(length > 4 && {
             [getMediaQueryMax('xs')]: {
-                width: `calc((276px - (${spacingStaticSmall} * 5)) / 6)`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
+                // TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
+                width: `calc((276px - (${spacingStaticSmall} * ${length - 1})) / ${length})`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
             },
         }),
+        // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. isLoading
         ...(isLoading && {
             opacity: 0.2,
             cursor: 'not-allowed',
         }),
+        ...Object.fromEntries(Array.from(Array(length)).map((_, i) => {
+            return [`&:nth-of-type(${i + 1})`, { gridArea: `1/${i + 1}` }];
+        })),
     })));
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            // input
             ...inputStyles,
             ...(isWithinForm &&
                 addImportantToEachRule({
-                    '::slotted(input)': {
+                    '::slotted([slot=internal-input])': {
                         position: 'absolute',
                         height: inputSize,
                         width: 0,
@@ -7040,32 +7108,27 @@ const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, isWithinForm
                     },
                 })),
         },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+            justifySelf: 'flex-start',
+            gap: spacingStaticSmall,
+        },
         ...(isLoading && {
             spinner: {
-                width: '100%',
+                gridArea: `1/1/1/${length + 1}`,
+                placeSelf: 'center',
+                width: inputSize,
                 height: inputSize,
                 pointerEvents: 'none',
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-            },
-        }),
-        'input-container': {
-            display: 'flex',
-            position: 'relative',
-            gap: spacingStaticSmall,
-            flexWrap: 'wrap',
-            width: 'fit-content',
-        },
-        ...mergeDeep(labelStyles, {
-            label: {
-                ...buildResponsiveStyles(hideLabel, 
-                // workaround: since pin-code component is not wrapped into label tag it behaves differently
-                (isLabelHidden) => (isLabelHidden ? { display: 'none' } : { display: 'block' })),
             },
         }),
-        ...getFunctionalComponentRequiredStyles(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
     });
 };
@@ -7191,6 +7254,7 @@ const getComponentCss$u = (direction, isNative, theme) => {
             button: {
                 display: 'block',
                 position: 'relative',
+                WebkitAppearance: 'none',
                 appearance: 'none',
                 background: 'transparent',
                 border: 0,
@@ -7249,7 +7313,7 @@ const getComponentCss$u = (direction, isNative, theme) => {
             filter: `drop-shadow(0 0 16px ${shadowColor})`,
             backdropFilter: 'drop-shadow(0px 0px 0px transparent)',
             pointerEvents: 'none',
-            animation: '240ms $fadeIn ease forwards'
+            animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
                 ,
             '&::before': {
                 content: '""',
@@ -7304,28 +7368,77 @@ const getComponentCss$t = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColorDark = isHighContrastMode
         ? getHighContrastColors().canvasColor
         : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), {
+    return getCss({
         '@global': {
-            '::slotted': addImportantToEachRule({
-                '&(input)': {
-                    borderRadius: '50%',
-                },
-                ...(!isLoading && {
-                    '&(input:checked)': {
-                        backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
-                        }),
-                    },
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
                 }),
-                ...(!isDisabled && {
-                    '&(input:focus)::before': {
+            },
+            // ::slotted(input)
+            ...addImportantToEachRule(mergeDeep(getSlottedCheckboxRadioButtonStyles(state, isDisabled, isLoading, theme), {
+                '::slotted': {
+                    '&(input)': {
+                        gridArea: '1/1',
                         borderRadius: '50%',
                     },
-                }),
+                    // TODO: is it somehow useful possible to make following styles configurable by paramter?
+                    ...(!isLoading && {
+                        '&(input:checked)': {
+                            backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
+                            }),
+                        },
+                    }),
+                    ...(!isDisabled && {
+                        '&(input:focus)::before': {
+                            borderRadius: '50%',
+                        },
+                    }),
+                },
+            })),
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+            gridArea: '1/1',
+            alignSelf: 'flex-start',
+            ...(isDisabledOrLoading(isDisabled, isLoading) && {
+                // TODO: maybe .wrapper should handle it for all form components while pointer-events: none is set to input
+                cursor: 'not-allowed',
             }),
         },
-    }));
+        ...(isLoading && {
+            // TODO: extract for checkbox-wrapper and radio-button-wrapper (not gridArea and placeSelf)
+            spinner: {
+                position: 'relative',
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`,
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
+            gridArea: '1/2',
+        }, {
+            paddingTop: '2px',
+            paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state, {
+            gridColumn: '1/3',
+        }),
+    });
 };
 
 const gradientColorLight = {
@@ -7643,12 +7756,13 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
     const isDirectionDown = direction === 'down';
     return {
         '@global': {
+            // TODO: extract generic default button/anchor reset style
             button: {
                 position: 'absolute',
-                top: 0,
-                height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`,
+                ...getInsetJssStyle(),
                 width: '100%',
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'),
+                height: '100%',
+                margin: 0,
                 padding: 0,
                 background: 'transparent',
                 border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
@@ -7707,14 +7821,18 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
             input: {
                 display: 'block',
                 position: 'absolute',
+                ...getInsetJssStyle(2),
+                width: 'calc(100% - 4px)',
+                height: 'calc(100% - 4px)',
                 zIndex: 1,
-                bottom: '2px',
-                left: '2px',
-                width: `calc(100% - (${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`,
-                height: `calc(${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`,
                 font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-                padding: `13px ${spacingStaticMedium}`,
+                margin: 0,
+                // TODO: could be done with css subgrid much more elegant in the near future
+                //  or move input into select-wrapper and handle it the same like multi-select
+                padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+                paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(1),
                 outline: '0',
+                WebkitAppearance: 'none',
                 appearance: 'none',
                 boxSizing: 'border-box',
                 border: '0',
@@ -7768,6 +7886,7 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                         },
                     },
                 }),
+                // TODO: we should try to get rid of the span and apply the border-styles on either select or input
                 '&+span': {
                     // for focus outline and clicking arrow since input ends left of the icon
                     position: 'absolute',
@@ -7800,11 +7919,12 @@ const getListStyles = (direction, theme) => {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: spacingStaticSmall,
-                position: `var(${dropdownPositionVar})`,
+                position: `var(${dropdownPositionVar}, absolute)`,
                 padding: '6px',
                 margin: 0,
                 background: backgroundColor,
                 ...textSmallStyle,
+                color: contrastHighColor,
                 zIndex: 10,
                 left: 0,
                 right: 0,
@@ -7824,6 +7944,7 @@ const getListStyles = (direction, theme) => {
                 transition: getTransition('border-color'),
                 transform: 'translate3d(0,0,0)',
                 ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
                     background: backgroundColorDark,
                     borderColor: primaryColorDark,
                     [isDirectionDown ? 'borderTopColor' : 'borderBottomColor']: addImportantToRule(contrastMediumColorDark),
@@ -7836,16 +7957,12 @@ const getListStyles = (direction, theme) => {
             gap: '12px',
             padding: `${spacingStaticSmall} 12px`,
             flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
-            }),
             cursor: 'pointer',
             textAlign: 'start',
             wordBreak: 'break-word',
             boxSizing: 'border-box',
             borderRadius: borderRadiusSmall,
-            transition: ['background-color', 'color'].map(getTransition).join(),
+            transition: `${getTransition('background-color')}, ${getTransition('color')}`,
             ...getNoResultsOptionJssStyle(),
             ...hoverMediaQuery({
                 '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
@@ -7889,9 +8006,13 @@ const getListStyles = (direction, theme) => {
             },
         },
         optgroup: {
+            color: contrastMediumColor,
             display: 'block',
             padding: '3px 14px',
             fontWeight: fontWeightSemiBold,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastMediumColorDark,
+            }),
             '&:not(:first-child)': {
                 marginTop: spacingStaticSmall,
             },
@@ -7902,37 +8023,13 @@ const getListStyles = (direction, theme) => {
     };
 };
 const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) => {
-    const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return getCss(
     // merge because of global styles
     mergeDeep({
         '@global': {
             ':host': {
-                [dropdownPositionVar]: 'absolute',
                 display: 'block',
-                position: `var(${dropdownPositionVar})`,
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'),
-                marginTop: `calc(-1 * (${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`,
-                paddingTop: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`,
-                left: 0,
-                right: 0,
-                color: disabled ? disabledColor : formStateColor || contrastMediumColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabled ? disabledColorDark : formStateColorDark || contrastMediumColorDark,
-                }),
-                ...(!disabled &&
-                    !isHighContrastMode &&
-                    hoverMediaQuery({
-                        '&(:hover)': {
-                            color: formStateHoverColor || primaryColor,
-                            ...prefersColorSchemeDarkMediaQuery(theme, {
-                                color: formStateHoverColorDark || primaryColorDark,
-                            }),
-                        },
-                    })),
+                position: 'relative',
             },
         },
         'sr-text': {
@@ -7943,41 +8040,57 @@ const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) =>
         : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
 };
 
-const controlBarWidth = '54px';
 const getComponentCss$o = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
-        '@global': addImportantToEachRule({
+        '@global': {
             ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
             },
-            ...getBaseChildStyles('select', state, theme, {
+            // ::slotted(select)
+            ...addImportantToEachRule(getSlottedTextFieldTextareaSelectStyles('select', state, false, theme, {
+                gridArea: '1/1/1/-1',
                 position: 'static',
                 zIndex: 0,
                 cursor: 'pointer',
-                paddingBlock: spacingStaticSmall,
-                paddingInline: `${spacingStaticMedium} ${controlBarWidth}`,
+                // TODO: move into getSlottedTextFieldTextareaSelectStyles()
+                padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+                paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(1),
+                // TODO: needs to be aligned with multi-select
                 ...(hasCustomDropdown && !isDisabled && { borderColor: 'transparent' }),
-            }),
-        }),
+            })),
+        },
         root: {
-            position: 'relative',
+            display: 'grid',
+            gap: spacingStaticXSmall,
         },
-        ...getLabelStyles('select', isDisabled, hideLabel, state, theme, {
-            icon: {
-                gridArea: '3 / 2',
-                placeSelf: 'center',
-                transform: 'rotate3d(0,0,1,0.0001deg)',
-                transition: getTransition('transform'),
-                '&--open': {
-                    transform: 'rotate3d(0,0,1,180deg)',
-                },
+        wrapper: {
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) auto ${formElementLayeredSafeZone}`,
+        },
+        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
+        icon: {
+            gridArea: '1/2',
+            placeSelf: 'center',
+            position: 'relative',
+            zIndex: 2,
+            pointerEvents: 'none',
+            padding: formButtonOrIconPadding,
+            transform: 'rotate3d(0,0,1,0.0001deg)',
+            transition: getTransition('transform'),
+            '&--open': {
+                transform: 'rotate3d(0,0,1,180deg)',
             },
-        }, {
-            gridTemplateColumns: `minmax(0, 1fr) calc(${controlBarWidth} + ${borderWidthBase})`,
-        }),
-        ...getFunctionalComponentRequiredStyles(),
+        },
+        dropdown: {
+            gridArea: '1/1/1/-1',
+        },
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
     });
 };
@@ -7993,7 +8106,7 @@ const sizeMap$1 = {
 };
 const getComponentCss$n = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
-    const animationDuration = 'var(--p-animation-duration, 2s)';
+    const animationDuration = `var(${cssVariableAnimationDuration}, ${motionDurationVeryLong})`;
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasColor, canvasTextColor } = getHighContrastColors();
@@ -8127,6 +8240,7 @@ const getComponentCss$m = (state, disabled, theme) => {
                 gap: '3px',
                 color: isDisabled ? disabledColor : primaryColor,
                 padding: '4px 10px 4px 6px',
+                margin: 0,
                 background: 0,
                 border: 0,
                 outline: 0,
@@ -8261,10 +8375,12 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             gap: spacingStaticSmall,
             width: '100%',
             padding: 0,
+            margin: 0,
             outline: 0,
             border: 0,
             textAlign: 'start',
             background: 'transparent',
+            WebkitAppearance: 'none',
             appearance: 'none',
             cursor: isDisabledOrLoading(disabled, loading) ? 'auto' : 'pointer',
             ...buildResponsiveStyles(stretch, (stretchValue) => ({
@@ -8311,7 +8427,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
             borderRadius: '14px',
             backgroundColor: buttonBackgroundColor,
             cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
-            transition: `${getTransition('background-color')},${getTransition('border-color')},${getTransition('color')}`,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 borderColor: buttonBorderColorDark,
                 backgroundColor: buttonBackgroundColorDark,
@@ -8330,7 +8446,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
                 backgroundColor: toggleBackgroundColorDark,
             }),
             transform: `translate3d(${checked ? '20px' : '0'}, 0, 0)`,
-            transition: `${getTransition('background-color')},${getTransition('transform')}`,
+            transition: `${getTransition('background-color')}, ${getTransition('transform')}`,
         },
         ...(loading && {
             spinner: {
@@ -8467,6 +8583,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                         color: 'inherit',
                         outline: 0,
                         alignItems: 'flex-end',
+                        WebkitAppearance: 'none',
                         appearance: 'none',
                         background: 'transparent',
                         textAlign: 'start',
@@ -8568,7 +8685,6 @@ const getComponentCss$d = () => {
     });
 };
 
-const barTransitionDuration = '.4s';
 const scrollerAnimatedCssClass = 'scroller--animated';
 const targetSelectors = ['a', 'button'];
 const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
@@ -8683,7 +8799,7 @@ const getComponentCss$c = (size, weight, theme) => {
         [scrollerAnimatedCssClass]: {
             ['& ' +
                 transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')]: {
-                transition: addImportantToRule(`visibility 0s linear ${barTransitionDuration}`), // bar appears after transition
+                transition: addImportantToRule(`visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationModerate})`), // bar appears after transition
             },
         },
         // moving bar
@@ -8692,8 +8808,8 @@ const getComponentCss$c = (size, weight, theme) => {
             width: 0,
             bottom: isHighContrastMode ? '0' : '-2px',
             visibility: 'visible',
-            transition: `transform ${barTransitionDuration},width ${barTransitionDuration}`,
-            animation: '$hide 0s .5s forwards', // auto hide bar after transition, needs to be a little longer in Safari
+            transition: `${getTransition('transform', 'moderate')}, ${getTransition('width', 'moderate')}`,
+            animation: `$hide 0s var(${cssVariableAnimationDuration},0.5s) forwards`, // auto hide bar after transition, needs to be a little longer in Safari
         },
         '@keyframes hide': {
             to: {
@@ -8801,6 +8917,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 gap: '12px',
                 minHeight: '54px',
                 padding: '4px 12px',
+                margin: 0,
                 borderRadius: borderRadiusSmall,
                 border: 0,
                 cursor: 'pointer',
@@ -8922,6 +9039,7 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                     cursor: 'pointer',
                     font: 'inherit',
                     color: 'inherit',
+                    WebkitAppearance: 'none',
                     appearance: 'none',
                     border: 0,
                     textAlign: 'start',
@@ -8961,27 +9079,9 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
     return hasShowPickerSupport && (isCalendar || isTime);
 };
 
-const cssVariableInputPaddingLeft = '--p-internal-text-field-input-padding-left';
-const cssVariableInputPaddingRight = '--p-internal-text-field-input-padding-right';
-const buttonOrIconPadding = '4px';
-const buttonOrIconSize = `calc(${fontLineHeight} + ${buttonOrIconPadding} * 2)`;
-const buttonOrIconOffset = '9px';
-const baseButtonOrIconStyles = {
-    position: 'absolute',
-    bottom: '11px',
-    padding: buttonOrIconPadding,
-    font: `1rem ${fontFamily}`,
-};
-const getInputPaddingHorizontal = (buttonOrIconAmount) => {
-    return `calc(${buttonOrIconOffset} * 2 + ${buttonOrIconSize} * ${buttonOrIconAmount})`;
-};
-const getButtonOrIconOffsetHorizontal = (buttonOrIconAmount) => {
-    const multiplier = buttonOrIconAmount > 1 ? ` + ${buttonOrIconSize} * ${buttonOrIconAmount - 1}` : '';
-    return `calc(${buttonOrIconOffset} + ${borderWidthBase}${multiplier})`;
-};
+const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
+const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
 const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, theme) => {
-    const { contrastMediumColor } = getThemedColors(theme);
-    const { contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
@@ -8996,21 +9096,23 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    [cssVariableInputPaddingLeft]: isSearchWithoutForm ? getInputPaddingHorizontal(1) : spacingStaticMedium,
-                    [cssVariableInputPaddingRight]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
-                        ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
-                        : spacingStaticMedium,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            // ::slotted(input)
             ...addImportantToEachRule({
-                ...getBaseChildStyles('input', state, theme, {
-                    padding: `${spacingStaticSmall} var(${cssVariableInputPaddingRight}) ${spacingStaticSmall} var(${cssVariableInputPaddingLeft})`,
+                ...getSlottedTextFieldTextareaSelectStyles('input', state, false, theme, {
+                    gridArea: '1/1/1/-1',
+                    padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
+                    paddingInlineStart: `var(${cssVariableInputPaddingStart})`,
+                    paddingInlineEnd: `var(${cssVariableInputPaddingEnd})`,
+                    // TODO: move into getSlottedTextFieldTextareaSelectStyles()
                     ...(isNumber && {
                         MozAppearance: 'textfield', // hides up/down spin button for Firefox
                     }),
                 }),
+                // TODO: move into getSlottedTextFieldTextareaSelectStyles()
                 '::slotted': {
                     '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
                         WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
@@ -9018,48 +9120,58 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                 },
             }),
         },
+        root: {
+            [cssVariableInputPaddingStart]: isSearchWithoutForm
+                ? getCalculatedFormElementPaddingHorizontal(1)
+                : formElementPaddingHorizontal,
+            [cssVariableInputPaddingEnd]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
+                ? getCalculatedFormElementPaddingHorizontal(isSearchWithForm ? 2 : 1)
+                : formElementPaddingHorizontal,
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+            gridTemplateColumns: `${formElementLayeredSafeZone} auto minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
+        },
         ...((isSearchOrPassword || isCalendarOrTimeWithCustomIndicator) && {
+            // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf) like done for unit class
             button: {
-                ...baseButtonOrIconStyles,
-                right: getButtonOrIconOffsetHorizontal(1),
+                gridArea: '1/5',
+                placeSelf: 'center',
+                padding: formButtonOrIconPadding,
                 // TODO: maybe we should render hidden button conditionally, needs to be checked if a11y compliant
-                '&:not([hidden]) ~ .button': {
-                    right: getButtonOrIconOffsetHorizontal(2),
+                '&:not([hidden])~.button': {
+                    gridArea: '1/4',
                 },
             },
         }),
         ...(isSearchWithoutForm && {
+            // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf) like done for unit class
             icon: {
-                ...baseButtonOrIconStyles,
-                left: getButtonOrIconOffsetHorizontal(1),
+                gridArea: '1/2',
+                placeSelf: 'center',
+                padding: formButtonOrIconPadding,
                 pointerEvents: 'none',
             },
         }),
-        root: {
-            display: 'block',
-            position: 'relative',
-        },
-        ...getLabelStyles('input', isDisabled, hideLabel, state, theme, hasUnitOrVisibleCounter && {
+        ...(hasUnitOrVisibleCounter && {
+            // TODO: rename to unit-counter?
             unit: {
-                position: 'absolute',
-                bottom: '15px',
-                [unitPosition === 'suffix' ? 'right' : 'left']: 0,
-                zIndex: 1,
-                padding: unitPosition === 'suffix' ? `0 ${spacingStaticMedium} 0 10px` : `0 10px 0 ${spacingStaticMedium}`,
-                font: textSmallStyle.font,
-                color: contrastMediumColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: contrastMediumColorDark,
-                }),
+                ...getUnitCounterJssStyle(isDisabled, theme),
+                gridArea: `1/${unitPosition === 'suffix' ? 5 : 1}/1/${unitPosition === 'suffix' ? 7 : 3}`,
+                placeSelf: 'center',
+                paddingInline: unitPosition === 'suffix'
+                    ? `${formElementLayeredGap} calc(${formElementPaddingHorizontal} + ${borderWidthBase})`
+                    : `calc(${formElementPaddingHorizontal} + ${borderWidthBase}) ${formElementLayeredGap}`, // padding needed for correct input padding synchronisation
             },
         }),
-        ...getFunctionalComponentRequiredStyles(),
+        // TODO: maybe we should extract it as functional component too
+        'sr-only': getHiddenTextJssStyle(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
-        // TODO: could be made conditional if we had hasUnit
-        'sr-only': {
-            ...getHiddenTextJssStyle(),
-            padding: 0,
-        },
     });
 };
 
@@ -9175,19 +9287,26 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
 };
 
 const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
-    const { contrastMediumColor } = getThemedColors(theme);
-    const { contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
-            ...mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            // ::slotted(textarea)
+            ...mergeDeep(addImportantToEachRule(getSlottedTextFieldTextareaSelectStyles('textarea', state, false, theme, {
+                gridArea: '1/1',
+                // TODO: move into getSlottedTextFieldTextareaSelectStyles()
                 font: textSmallStyle.font,
-                padding: hasCounter ? `12px ${spacingStaticMedium} ${spacingStaticLarge}` : `12px ${spacingStaticMedium}`,
+                // TODO: move into getSlottedTextFieldTextareaSelectStyles()
+                padding: hasCounter
+                    ? `12px ${formElementPaddingHorizontal} ${spacingStaticLarge}`
+                    : `12px ${formElementPaddingHorizontal}`,
             })), {
+                // TODO: is it possible to move into getSlottedTextFieldTextareaSelectStyles()?
                 '::slotted(textarea)': {
                     height: 'auto',
                     minHeight: '200px',
@@ -9195,40 +9314,34 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
                 },
             }),
         },
-        ...getLabelStyles('textarea', isDisabled, hideLabel, state, theme, hasCounter && {
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+        },
+        ...(hasCounter && {
             counter: {
-                position: 'absolute',
-                bottom: '6px',
-                left: '12px',
-                right: '12px',
-                textAlign: 'end',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                zIndex: 1,
-                font: textSmallStyle.font,
-                color: contrastMediumColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: contrastMediumColorDark,
-                }),
+                ...getUnitCounterJssStyle(isDisabled, theme),
+                gridArea: '1/1',
+                placeSelf: 'flex-end',
+                padding: `6px calc(${formElementPaddingHorizontal} + ${borderWidthBase})`,
             },
+            // TODO: maybe we should extract it as functional component too
+            'sr-only': getHiddenTextJssStyle(),
         }),
-        ...getFunctionalComponentRequiredStyles(),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
-        ...(hasCounter && {
-            'sr-only': {
-                ...getHiddenTextJssStyle(),
-                padding: 0,
-            },
-        }),
     });
 };
 
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
-const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
-const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
-const ANIMATION_DURATION = 600;
-const duration = `${ANIMATION_DURATION}ms`;
+const ANIMATION_DURATION = motionDurationModerate;
+const duration = ANIMATION_DURATION;
 const getKeyframes = (direction, outsideStyle) => {
     const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
     return direction === 'in'
@@ -9272,10 +9385,10 @@ const getComponentCss$1 = () => {
             '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
         hydrated: {
-            animation: `${duration} $in ${easeInQuad} forwards`,
+            animation: `${duration} $in ${motionEasingIn} forwards`,
         },
         [toastCloseClassName]: {
-            animation: addImportantToRule(`${ANIMATION_DURATION}ms $out ${easeOutQuad} forwards`),
+            animation: addImportantToRule(`${ANIMATION_DURATION} $out ${motionEasingOut} forwards`),
         },
     });
 };
@@ -9327,4 +9440,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$10 as getAccordionCss, getComponentCss$$ as getBannerCss, getComponentCss$X as getButtonCss, getComponentCss$_ as getButtonGroupCss, getComponentCss$Z as getButtonPureCss, getComponentCss$Y as getButtonTileCss, getComponentCss$W as getCarouselCss, getComponentCss$V as getCheckboxWrapperCss, getComponentCss$U as getContentWrapperCss, getComponentCss$T as getCrestCss, getComponentCss$S as getDisplayCss, getComponentCss$R as getDividerCss, getComponentCss$P as getFieldsetCss, getComponentCss$Q as getFieldsetWrapperCss, getComponentCss$N as getFlexCss, getComponentCss$O as getFlexItemCss, getComponentCss$M as getFlyoutCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$K as getGridCss, getComponentCss$L as getGridItemCss, getComponentCss$J as getHeadingCss, getComponentCss$I as getHeadlineCss, getComponentCss$H as getIconCss, getComponentCss$G as getInlineNotificationCss, getComponentCss$E as getLinkCss, getComponentCss$F as getLinkPureCss, getComponentCss$E as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$D as getLinkTileModelSignatureCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$10 as getAccordionCss, getComponentCss$$ as getBannerCss, getComponentCss$X as getButtonCss, getComponentCss$_ as getButtonGroupCss, getComponentCss$Z as getButtonPureCss, getComponentCss$Y as getButtonTileCss, getComponentCss$W as getCarouselCss, getComponentCss$V as getCheckboxWrapperCss, getComponentCss$U as getContentWrapperCss, getComponentCss$T as getCrestCss, getComponentCss$S as getDisplayCss, getComponentCss$R as getDividerCss, getComponentCss$P as getFieldsetCss, getComponentCss$Q as getFieldsetWrapperCss, getComponentCss$N as getFlexCss, getComponentCss$O as getFlexItemCss, getComponentCss$M as getFlyoutCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$K as getGridCss, getComponentCss$L as getGridItemCss, getComponentCss$J as getHeadingCss, getComponentCss$I as getHeadlineCss, getComponentCss$H as getIconCss, getComponentCss$G as getInlineNotificationCss, getComponentCss$E as getLinkCss, getComponentCss$F as getLinkPureCss, getComponentCss$E as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$D as getLinkTileModelSignatureCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };