@porsche-design-system/components-react 3.17.0 → 3.18.0

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

@@ -3604,6 +3604,21 @@ const motionEasingMap = {
     out: motionEasingOut,
     linear: 'linear',
 };
+/**
+ * Base value used for spacing calculations
+ *
+ * This constant defines the base value of 16 pixels, which serves as a
+ * standard unit for calculating relative sizes. By multiplying this base
+ * value with scaling factors and proportions, you can derive consistent
+ * and proportional dimensions and spacings throughout the design.
+ *
+ * Example:
+ * const spacing = scalingFactor * proportion * SCALING_BASE_VALUE;
+ */
+const SCALING_BASE_VALUE = '16px';
+const dismissButtonJssStyle = {
+    '--p-internal-button-scaling': 0,
+};
 const cssVariableTransitionDuration = '--p-transition-duration';
 const cssVariableAnimationDuration = '--p-animation-duration';
 const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => {
@@ -3613,9 +3628,10 @@ const addImportantToRule = (value) => `${value} !important`;
 const addImportantToEachRule = (input) => {
     return Object.entries(input).reduce((result, [key, value]) => value === null
         ? result
-        : ((result[key] =
-            typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
-            result), {});
+        : // @ts-expect-error: Type string can't be used to index type JssStyle
+            ((result[key] =
+                typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
+                result), {});
 };
 // TODO: this is workaround, in order the colors to be bundled in the main bundle, we need to have at least one function here, which is used in project and which calls "getThemedColors"
 // TODO: This mechanism needs to be investigated as part of refactoring
@@ -3744,6 +3760,12 @@ const prefersColorSchemeDarkMediaQuery = (theme, style) => {
     return isThemeAuto(theme) && { '@media (prefers-color-scheme: dark)': style };
 };
 
+const preventFoucOfNestedElementsStyles = {
+    ':not(:defined,[data-ssr])': {
+        visibility: 'hidden',
+    },
+};
+
 const getSchemedHighContrastMediaQuery = (light, dark) => {
     return {
         '@media (forced-colors: active) and (prefers-color-scheme: light)': light,
@@ -3931,7 +3953,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$17 = (size, compact, open, theme, sticky) => {
+const getComponentCss$18 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -3954,6 +3976,7 @@ const getComponentCss$17 = (size, compact, open, theme, sticky) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             button: {
                 display: 'flex',
                 position: 'relative',
@@ -4100,7 +4123,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$16 = (isOpen) => {
+const getComponentCss$17 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4153,6 +4176,7 @@ const getComponentCss$16 = (isOpen) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
         },
     });
 };
@@ -4171,7 +4195,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$15 = (direction) => {
+const getComponentCss$16 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4238,6 +4262,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                     ...(!responsiveStretch && { verticalAlign: 'top' }),
                 })),
             },
+            ...preventFoucOfNestedElementsStyles,
         },
         root: {
             display: 'flex',
@@ -4323,7 +4348,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$14 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$15 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4361,7 +4386,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$14 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4373,6 +4398,7 @@ const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, back
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             slot: {
                 display: 'block',
                 '&:not([name])': {
@@ -4385,12 +4411,12 @@ const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, back
                     zIndex: 3,
                 },
             },
-            '::slotted(:is(img,picture))': addImportantToEachRule({
+            '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
                 width: '100%',
                 height: '100%',
             }),
-            '::slotted(img)': addImportantToEachRule({
+            '::slotted(:is(img,video))': addImportantToEachRule({
                 objectFit: 'cover',
             }),
             a: {
@@ -4455,6 +4481,7 @@ const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, back
                 })),
         },
         media: {
+            position: 'relative', // necessary if custom `position: absolute` style is added to media elements
             gridArea: '1/1/-1 /-1',
             zIndex: 1,
             overflow: 'hidden', // relevant for scaling of nested image
@@ -4521,14 +4548,18 @@ const getVariantColors = (variant, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, compact, theme) => {
+const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, compact, cssVariableInternalScaling, theme) => {
     const isPrimary = variant === 'primary';
     const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
-    const paddingBlock = compact ? '4px' : '13px';
-    const paddingInline = compact ? '12px' : '26px';
+    const scalingVar = `var(${cssVariableInternalScaling}, ${compact ? 'calc(4 / 13)' : 1})`; // Compact mode needs to have 4px paddingBlock thus this scaling factor
+    const borderCompensation = variant === 'ghost' ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
+    const paddingBlock = `calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} ${borderCompensation})`; // 0.8125 * SCALING_BASE_VALUE corresponds to 13px
+    const paddingInline = `max(calc(${scalingVar} * 1.625 * ${SCALING_BASE_VALUE} ${borderCompensation}), ${variant === 'ghost' ? '6px' : '4px'})`; // 1.625 * SCALING_BASE_VALUE corresponds to 26px
+    const gap = `clamp(2px, calc(${scalingVar} * 0.5 * ${SCALING_BASE_VALUE}), 16px)`; // 0.5 * SCALING_BASE_VALUE corresponds to 8px
+    const iconMarginInlineStart = `clamp(-16px, calc(${scalingVar} * -0.5 * ${SCALING_BASE_VALUE}), -2px)`; // -0.5 * SCALING_BASE_VALUE corresponds to -8px
     return {
         '@global': {
             ':host': {
@@ -4536,32 +4567,36 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
                     outline: 0, // custom element is able to delegate the focus
+                    borderRadius: borderRadiusSmall,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
         },
         root: {
             display: 'flex',
             alignItems: 'flex-start',
             justifyContent: 'center',
-            width: '100%',
+            width: '100%', // Allows for setting a width on the host
+            minWidth: 'min-content', // Do not shrink beyond icon size + padding + border + label
             boxSizing: 'border-box',
             textAlign: 'start',
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
             textDecoration: 'none',
-            border: `${borderWidthBase} solid ${borderColor}`,
+            ...textSmallStyle,
+            ...(variant === 'ghost'
+                ? { ...frostedGlassStyle, border: 'none' } // We can't use a border in the ghost variant due to rendering issues with backdrop-filter in safari
+                : { border: `${borderWidthBase} solid ${borderColor}` }),
             borderRadius: borderRadiusSmall,
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
-            ...(variant === 'ghost' && { ...frostedGlassStyle, backgroundClip: 'padding-box' }), // background color overlays border-color otherwise
             color: textColor,
-            ...textSmallStyle,
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
-                gap: hideLabelValue ? 0 : compact ? '6px' : spacingStaticSmall,
+                gap: hideLabelValue ? 0 : gap,
             })),
             ...(!hasSlottedAnchor && getFocusJssStyle(theme)),
             ...(!isDisabledOrLoading &&
@@ -4588,13 +4623,14 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 width: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
                 height: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    marginInlineStart: hideLabelValue ? 0 : compact ? '-6px' : '-8px', // compensate white space of svg icon and optimize visual alignment
+                    marginInlineStart: hideLabelValue ? 0 : iconMarginInlineStart, // compensate white space of svg icon and optimize visual alignment
                 })),
             },
         }),
     };
 };
 
+const cssVariableInternalButtonScaling = '--p-internal-button-scaling';
 const getDisabledColors = (variant, loading, theme) => {
     const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor, backgroundFrostedColor } = getThemedColors(theme);
     const { canvasColor } = getHighContrastColors();
@@ -4617,12 +4653,12 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, compact, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, compact, cssVariableInternalButtonScaling, theme), {
         root: {
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
             ...(disabledOrLoading && {
@@ -4681,7 +4717,7 @@ const sidebarWidths = {
     medium: '320px',
     large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
 };
-const getComponentCss$11 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4691,6 +4727,7 @@ const getComponentCss$11 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             ':is(header, main, footer, aside)': {
                 padding: gridProductiveGap,
                 boxSizing: 'border-box',
@@ -4790,7 +4827,7 @@ const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const getComponentCss$10 = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const getComponentCss$11 = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -4807,6 +4844,7 @@ const getComponentCss$10 = (hasHeading, hasDescription, hasControlsSlot, heading
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             ...(hasControlsSlot && {
                 ['slot[name="controls"]']: {
                     display: 'block',
@@ -5221,7 +5259,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$$ = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5244,6 +5282,7 @@ const getComponentCss$$ = (hideLabel, state, isDisabled, isLoading, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // ::slotted(input)
             ...addImportantToEachRule(mergeDeep(getSlottedCheckboxRadioButtonStyles(state, isDisabled, isLoading, theme), {
                 '::slotted': {
@@ -5316,7 +5355,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$_ = (width) => {
+const getComponentCss$$ = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5358,7 +5397,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$Z = () => {
+const getComponentCss$_ = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5457,7 +5496,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
+const getComponentCss$Z = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5475,7 +5514,7 @@ const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$X = (color, orientation, theme) => {
+const getComponentCss$Y = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5518,7 +5557,7 @@ const getComponentCss$X = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5528,6 +5567,7 @@ const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             fieldset: {
                 margin: 0,
                 padding: 0,
@@ -5554,7 +5594,7 @@ const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5564,6 +5604,7 @@ const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             fieldset: {
                 margin: 0,
                 padding: 0,
@@ -5600,7 +5641,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$U = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5622,7 +5663,7 @@ const getComponentCss$U = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$T = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5663,7 +5704,7 @@ const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
 const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
 const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$S = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$T = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5683,6 +5724,7 @@ const getComponentCss$S = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             dialog: {
                 ...getFlyoutDialogResetJssStyle(),
                 inset: '0',
@@ -5802,7 +5844,7 @@ const getContentJssStyle = () => {
 
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$R = (isSecondaryScrollerVisible, theme) => {
+const getComponentCss$S = (isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5829,6 +5871,7 @@ const getComponentCss$R = (isSecondaryScrollerVisible, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             '::slotted(:is(h1, h2, h3, h4, h5, h6))': addImportantToEachRule({
                 ...headingSmallStyle,
                 margin: 0,
@@ -6108,19 +6151,9 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
         transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
     };
 };
-const getDismissButtonJssStyle = (theme, isOpen, applyAutoFocusHack = false) => {
-    const { backgroundSurfaceColor } = getThemedColors(theme);
-    const { backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+const getDialogDismissButtonJssStyle = (isOpen, applyAutoFocusHack = false) => {
     return {
-        width: 'fit-content',
-        height: 'fit-content',
-        border: `2px solid ${backgroundSurfaceColor}`, // needed to enlarge button slightly without affecting the hover area (are equal now).
-        borderRadius: borderRadiusSmall,
-        background: backgroundSurfaceColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            background: backgroundSurfaceColorDark,
-            borderColor: backgroundSurfaceColorDark,
-        }),
+        ...dismissButtonJssStyle,
         // we need to ensure that the dismiss button, which gets auto focused by `.showModal()`, to always be in the
         // viewport (or off the view on the start-hand side) before the dialog transition starts otherwise the transition
         // won't work in all cases, e.g. `dir="rtl"` and `<p-flyout position="end" />`. Because auto focus would force the
@@ -6162,7 +6195,7 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$Q = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     return getCss({
         '@global': {
@@ -6174,6 +6207,7 @@ const getComponentCss$Q = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             slot: {
                 display: 'block',
                 '&:first-of-type': {
@@ -6220,7 +6254,7 @@ const getComponentCss$Q = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             maxWidth: `var(${cssVariableMaxWidth},1180px)`,
         },
         dismiss: {
-            ...getDismissButtonJssStyle(theme, isOpen, !isPositionStart),
+            ...getDialogDismissButtonJssStyle(isOpen, !isPositionStart),
             gridArea: '1/3',
             zIndex: 4, // ensures dismiss button is above everything
             position: 'sticky',
@@ -6236,7 +6270,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$P = (size, offset) => {
+const getComponentCss$Q = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6256,7 +6290,7 @@ const getComponentCss$P = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$O = (direction, wrap) => {
+const getComponentCss$P = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6282,7 +6316,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$N = (size, align, color, ellipsis, theme) => {
+const getComponentCss$O = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6342,7 +6376,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$M = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$N = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6450,7 +6484,7 @@ const isFlippableIcon = (name, source) => {
             name === 'logout' ||
             name === 'send'));
 };
-const getComponentCss$L = (name, source, color, size, theme) => {
+const getComponentCss$M = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -6542,6 +6576,7 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
     };
 };
 const getNotificationIconJssStyle = () => ({
+    marginTop: '2px', // To be center aligned with close button
     [mediaQueryMaxS$2]: {
         display: 'none',
     },
@@ -6550,6 +6585,7 @@ const getNotificationContentJssStyle = () => ({
     display: 'grid',
     gap: spacingStaticXSmall,
     maxWidth: '50rem',
+    marginTop: '2px', // To be center aligned with close button
     [mediaQueryMinS$1]: {
         marginLeft: `-${spacingStaticSmall}`,
     },
@@ -6567,7 +6603,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$K = (state, hasAction, hasClose, theme) => {
+const getComponentCss$L = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6578,6 +6614,7 @@ const getComponentCss$K = (state, hasAction, hasClose, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             [`::slotted(:is(${HEADING_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
             'slot[name="heading"]': getHeadingJssStyle(theme),
         },
@@ -6590,15 +6627,23 @@ const getComponentCss$K = (state, hasAction, hasClose, theme) => {
         content: getNotificationContentJssStyle(),
         ...(hasAction && {
             action: {
+                marginTop: borderWidthBase, // To visually align with close button
                 [mediaQueryMaxS$1]: {
                     gridRowStart: 2,
                 },
             },
         }),
+        close: {
+            ...dismissButtonJssStyle,
+            mixBlendMode: isThemeDark(theme) ? 'plus-lighter' : 'multiply',
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                mixBlendMode: 'plus-lighter',
+            }),
+        },
     });
 };
 
-const getComponentCss$J = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$K = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -6626,10 +6671,11 @@ const getComponentCss$J = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
+const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
+const getComponentCss$J = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, theme), {
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, cssVariableInternalLinkScaling, theme), {
         label: {
             clip: addImportantToRule('unset'), // to overrule breakpoint customizable hide-label style
         },
@@ -6659,7 +6705,7 @@ const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                 '&(a)::before': {
                     content: '""',
                     position: 'fixed',
-                    inset: '-2px',
+                    inset: variant === 'ghost' ? '0px' : '-2px', // Variant ghost has no border to compensate
                     borderRadius: borderRadiusSmall,
                 },
                 ...getFocusJssStyle(theme, { slotted: 'a', pseudo: true }),
@@ -6668,7 +6714,7 @@ const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
-const getComponentCss$H = (aspectRatio, weight, // to get deprecated semibold typed
+const getComponentCss$I = (aspectRatio, weight, // to get deprecated semibold typed
 direction, hasDescription) => {
     return getCss({
         '@global': {
@@ -6680,6 +6726,7 @@ direction, hasDescription) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             slot: {
                 '&:not([name])': {
                     display: 'block',
@@ -6694,12 +6741,12 @@ direction, hasDescription) => {
                     pointerEvents: 'auto',
                 },
             },
-            '::slotted(:is(img,picture))': addImportantToEachRule({
+            '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
                 width: '100%',
                 height: '100%',
             }),
-            '::slotted(img)': addImportantToEachRule({
+            '::slotted(:is(img,video))': addImportantToEachRule({
                 objectFit: 'cover',
             }),
             a: {
@@ -6761,6 +6808,7 @@ direction, hasDescription) => {
             gap: spacingFluidSmall,
         },
         media: {
+            position: 'relative', // necessary if custom `position: absolute` style is added to media elements
             gridArea: '1/1/-1 /-1',
             zIndex: 1,
             overflow: 'hidden', // relevant for scaling of nested image
@@ -6800,7 +6848,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$G = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+const getComponentCss$H = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6813,6 +6861,7 @@ const getComponentCss$G = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             [`slot[name="${headerSlot}"]`]: {
                 display: 'block', // to ensure correct like button positioning when slot is unused
             },
@@ -6938,7 +6987,7 @@ const getComponentCss$G = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$F = (aspectRatio, size, weight, // to get deprecated semibold typed
+const getComponentCss$G = (aspectRatio, size, weight, // to get deprecated semibold typed
 background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
@@ -6951,6 +7000,7 @@ background, align, compact, hasGradient, isDisabled) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             slot: {
                 display: 'block',
                 '&:not([name])': {
@@ -6963,12 +7013,12 @@ background, align, compact, hasGradient, isDisabled) => {
                     zIndex: 3,
                 },
             },
-            '::slotted(:is(img,picture))': addImportantToEachRule({
+            '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
                 width: '100%',
                 height: '100%',
             }),
-            '::slotted(img)': addImportantToEachRule({
+            '::slotted(:is(img,video))': addImportantToEachRule({
                 objectFit: 'cover',
             }),
             a: {
@@ -7031,6 +7081,7 @@ background, align, compact, hasGradient, isDisabled) => {
                 })),
         },
         media: {
+            position: 'relative', // necessary if custom `position: absolute` style is added to media elements
             gridArea: '1/1/-1 /-1',
             zIndex: 1,
             overflow: 'hidden', // relevant for scaling of nested image
@@ -7077,7 +7128,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$E = (size) => {
+const getComponentCss$F = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7127,7 +7178,7 @@ const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-
 const safeZoneVertical = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const safeZoneHorizontal = `${spacingFluidLarge}`;
 const cssClassNameStretchToFullModalWidth = 'stretch-to-full-modal-width';
-const getComponentCss$D = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$E = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7138,6 +7189,7 @@ const getComponentCss$D = (isOpen, backdrop, fullscreen, hasDismissButton, hasHe
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // TODO: why not available to Flyout too?
             // TODO: discussable if so many styles are a good thing, since we could also expose one or two CSS variables with which a stretch to full width is possible too
             '::slotted': addImportantToEachRule(mergeDeep({
@@ -7233,7 +7285,7 @@ const getComponentCss$D = (isOpen, backdrop, fullscreen, hasDismissButton, hasHe
         },
         ...(hasDismissButton && {
             dismiss: {
-                ...getDismissButtonJssStyle(theme, isOpen),
+                ...getDialogDismissButtonJssStyle(isOpen),
                 gridArea: '1/3',
                 zIndex: 2, // ensures dismiss button is above sticky footer, header and content
                 position: 'sticky',
@@ -7264,7 +7316,7 @@ const getThemedColor = (color, themedColors) => {
     };
     return colorMap[color];
 };
-const getComponentCss$C = (model, safeZone, size, color, theme) => {
+const getComponentCss$D = (model, safeZone, size, color, theme) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -7309,7 +7361,7 @@ const getComponentCss$C = (model, safeZone, size, color, theme) => {
 };
 
 const cssVariableMultiSelectPaddingInlineStart = '--p-internal-multi-select-option-padding-left';
-const getComponentCss$B = (theme) => {
+const getComponentCss$C = (theme) => {
     const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { highlightColor } = getHighContrastColors();
@@ -7319,6 +7371,7 @@ const getComponentCss$B = (theme) => {
                 scrollMarginTop: spacingStaticSmall, // Creates top margin when navigating with keyboard and list is scrolled automatically
                 ...hostHiddenStyles,
             }),
+            ...preventFoucOfNestedElementsStyles,
         },
         option: {
             display: 'flex',
@@ -7442,6 +7495,9 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
             }),
             ...additionalDefaultJssStyle,
         },
+        ['::slotted(:not(input[type="password"]))']: {
+            textOverflow: 'ellipsis',
+        },
         ...(!isLoading &&
             hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
@@ -7523,7 +7579,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
 
 const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$A = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -7535,6 +7591,7 @@ const getComponentCss$A = (direction, isOpen, isDisabled, hideLabel, state, isWi
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             ...(isWithinForm &&
                 addImportantToEachRule({
                     [`::slotted([slot=${INTERNAL_MULTI_SELECT_SLOT}])`]: {
@@ -7550,6 +7607,8 @@ const getComponentCss$A = (direction, isOpen, isDisabled, hideLabel, state, isWi
         root: {
             display: 'grid',
             gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
             ...(isWithinForm && {
                 position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
             }),
@@ -7719,19 +7778,23 @@ const getListStyles$2 = (isOpen, direction, theme) => {
 
 const cssVariableSelectPaddingInlineStart = '--p-internal-select-option-padding-left';
 // TODO: Enforce order of slotted text, img
-const getComponentCss$z = (theme) => {
+const getComponentCss$A = (theme) => {
     return getCss({
-        '@global': addImportantToEachRule({
-            ':host': {
-                scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
-                ...hostHiddenStyles,
-            },
-            '::slotted(img)': {
-                height: fontLineHeight,
-                borderRadius: borderRadiusSmall,
-                width: 'auto',
-            },
-        }),
+        '@global': {
+            ...addImportantToEachRule({
+                ':host': {
+                    // TODO: display is missing
+                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                    ...hostHiddenStyles,
+                },
+                '::slotted(img)': {
+                    height: fontLineHeight,
+                    borderRadius: borderRadiusSmall,
+                    width: 'auto',
+                },
+            }),
+            ...preventFoucOfNestedElementsStyles,
+        },
         ...getOptionStyles(theme),
         icon: {
             marginInlineStart: 'auto',
@@ -7807,7 +7870,7 @@ const getOptionStyles = (theme) => {
     };
 };
 
-const getComponentCss$y = (isDisabled, theme) => getCss({
+const getComponentCss$z = (isDisabled, theme) => getCss({
     '@global': {
         ':host': addImportantToEachRule({
             ...colorSchemeStyles,
@@ -7858,7 +7921,7 @@ const disabledCursorStyle = {
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
 const hiddenStyle = { display: 'none' };
-const getComponentCss$x = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$y = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -7870,6 +7933,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             nav: {
                 display: 'flex',
                 justifyContent: 'center',
@@ -7993,7 +8057,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+const getComponentCss$x = (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 inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -8035,6 +8099,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, isWithinForm
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // input
             ...inputStyles,
             ...(isWithinForm &&
@@ -8174,7 +8239,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$v = (direction, isNativePopoverCase, theme) => {
+const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -8189,6 +8254,7 @@ const getComponentCss$v = (direction, isNativePopoverCase, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             p: {
                 ...textSmallStyle,
                 margin: 0,
@@ -8284,7 +8350,7 @@ const getComponentCss$v = (direction, isNativePopoverCase, theme) => {
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$u = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = isHighContrastMode
         ? getHighContrastColors().canvasColor
         : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
@@ -8300,6 +8366,7 @@ const getComponentCss$u = (hideLabel, state, isDisabled, isLoading, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // ::slotted(input)
             ...addImportantToEachRule(mergeDeep(getSlottedCheckboxRadioButtonStyles(state, isDisabled, isLoading, theme), {
                 '::slotted': {
@@ -8382,21 +8449,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
-    const { backgroundColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
-    const backgroundColorLight = {
-        'background-base': backgroundColor,
-        'background-surface': backgroundSurfaceColor,
-    };
-    const backgroundColorMap = {
-        auto: backgroundColorLight,
-        light: backgroundColorLight,
-        dark: {
-            'background-base': backgroundSurfaceColorDark,
-            'background-surface': backgroundColorDark,
-        },
-    };
+const getComponentCss$u = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -8404,7 +8457,6 @@ const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
         direction: 'ltr',
         width: prevNextWrapperWidth,
         padding: '4px 0',
-        pointerEvents: 'none',
         display: 'flex',
         alignItems: scrollIndicatorPosition === 'center' ? 'center' : 'flex-start',
     };
@@ -8418,36 +8470,7 @@ const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                     ...hostHiddenStyles,
                 }),
             },
-            button: {
-                display: 'flex',
-                pointerEvents: 'auto',
-                alignItems: 'center',
-                justifyContent: 'center',
-                ...textSmallStyle,
-                height: `calc(${fontLineHeight} + 4px)`,
-                width: `calc(${fontLineHeight} + 4px)`,
-                border: 0,
-                outline: 0,
-                cursor: 'pointer',
-                background: backgroundColorMap[theme][gradientColor],
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorMap.dark[gradientColor],
-                }),
-                borderRadius: borderRadiusSmall,
-                ...frostedGlassStyle,
-                visibility: 'hidden',
-                ...(!isThemeDark(theme) && dropShadowLowStyle),
-                ...hoverMediaQuery({
-                    transition: getTransition('background-color'),
-                    '&:hover': {
-                        ...frostedGlassStyle,
-                        background: hoverColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: hoverColorDark,
-                        }),
-                    },
-                }),
-            },
+            ...preventFoucOfNestedElementsStyles,
         },
         root: {
             position: 'relative',
@@ -8502,7 +8525,7 @@ const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                 background: `linear-gradient(to right, ${getGradient('dark', gradientColor)} 100%)`,
             }),
             visibility: isPrevHidden ? 'hidden' : 'inherit',
-            '& button': {
+            '& .action-button': {
                 marginLeft: '8px',
                 // hide buttons on mobile (actually devices not supporting hover)
                 ...hoverMediaQuery({
@@ -8519,7 +8542,7 @@ const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                 background: `linear-gradient(to left, ${getGradient('dark', gradientColor)} 100%)`,
             }),
             visibility: isNextHidden ? 'hidden' : 'inherit',
-            '& button': {
+            '& .action-button': {
                 marginRight: '8px',
                 // hide buttons on mobile (actually devices not supporting hover)
                 ...hoverMediaQuery({
@@ -8527,6 +8550,10 @@ const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
                 }),
             },
         },
+        'action-button': {
+            ...dismissButtonJssStyle,
+            ...(!isThemeDark(theme) && dropShadowLowStyle),
+        },
         icon: {
             '&:dir(rtl)': {
                 transform: 'scaleX(-1)',
@@ -8549,7 +8576,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     };
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$s = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
@@ -8561,6 +8588,7 @@ const getComponentCss$s = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // All width relevant styling has to be kept in sync with the tempDiv of the p-segmented-control utils
             button: {
                 position: 'relative',
@@ -8622,7 +8650,7 @@ const getComponentCss$s = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$r = (maxWidth, columns) => {
+const getComponentCss$s = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
@@ -8925,7 +8953,7 @@ const getListStyles$1 = (direction, theme) => {
         },
     };
 };
-const getComponentCss$q = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
+const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8934,6 +8962,7 @@ const getComponentCss$q = (direction, isOpen, state, disabled, filter, isNativeP
                 display: 'block',
                 position: 'relative',
             },
+            ...preventFoucOfNestedElementsStyles,
         },
         'sr-text': {
             display: 'none',
@@ -8948,7 +8977,7 @@ const getComponentCss$q = (direction, isOpen, state, disabled, filter, isNativeP
         : getButtonStyles$1(direction, isOpen, state, theme), isOpen && getListStyles$1(direction, theme)));
 };
 
-const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8958,6 +8987,7 @@ const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, them
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // ::slotted(select)
             ...addImportantToEachRule(getSlottedTextFieldTextareaSelectStyles('select', state, false, theme, {
                 gridArea: '1/1/1/-1',
@@ -8974,6 +9004,8 @@ const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, them
         root: {
             display: 'grid',
             gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
         wrapper: {
             display: 'grid',
@@ -9005,13 +9037,17 @@ const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, them
 
 const INTERNAL_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
             ...(isWithinForm &&
                 addImportantToEachRule({
                     [`::slotted([slot=${INTERNAL_SELECT_SLOT}])`]: {
@@ -9027,6 +9063,8 @@ const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWi
         root: {
             display: 'grid',
             gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
             ...(isWithinForm && {
                 position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
             }),
@@ -9192,7 +9230,7 @@ const sizeMap$1 = {
     large: { height: sizeLarge, width: sizeLarge },
     inherit: { height: 'inherit', width: 'inherit' },
 };
-const getComponentCss$n = (size, theme) => {
+const getComponentCss$o = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = `var(${cssVariableAnimationDuration}, ${motionDurationVeryLong})`;
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
@@ -9289,7 +9327,7 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     ];
     return svgNumberedCirclePaths[stepCount];
 };
-const getComponentCss$m = (state, disabled, theme) => {
+const getComponentCss$n = (state, disabled, theme) => {
     const { primaryColor, hoverColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const isStateCurrent = state === 'current';
@@ -9324,6 +9362,7 @@ const getComponentCss$m = (state, disabled, theme) => {
                     },
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             button: {
                 display: 'flex',
                 position: 'relative',
@@ -9382,7 +9421,7 @@ const getComponentCss$m = (state, disabled, theme) => {
     });
 };
 
-const getComponentCss$l = (size) => {
+const getComponentCss$m = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9392,6 +9431,7 @@ const getComponentCss$l = (size) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
         },
         scroller: {
             ...textSmallStyle,
@@ -9428,7 +9468,7 @@ const getColors$1 = (checked, disabled, loading, theme) => {
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
-const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
+const getComponentCss$l = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
     return getCss({
@@ -9449,6 +9489,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
                     })),
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             button: {
                 display: 'flex',
                 alignItems: 'center',
@@ -9533,7 +9574,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
     });
 };
 
-const getComponentCss$j = () => {
+const getComponentCss$k = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -9544,7 +9585,7 @@ const getComponentCss$j = () => {
     });
 };
 
-const getComponentCss$i = (multiline) => {
+const getComponentCss$j = (multiline) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9569,7 +9610,7 @@ const isSortable = (active, direction) => {
 const cssVariableTableHoverColor = '--p-internal-table-hover-color';
 const cssVariableTableBorderColor = '--p-internal-table-border-color';
 const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
-const getComponentCss$h = (theme) => {
+const getComponentCss$i = (theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = doGetThemedColors('dark');
     return getCss({
@@ -9587,6 +9628,7 @@ const getComponentCss$h = (theme) => {
                     }),
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             '::slotted(*)': addImportantToEachRule({
                 [cssVariableTableHoverColor]: hoverColor,
                 [cssVariableTableBorderColor]: contrastLowColor,
@@ -9619,7 +9661,7 @@ const getComponentCss$h = (theme) => {
 const { hoverColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
 const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
-const getComponentCss$g = (active, direction, hideLabel, multiline) => {
+const getComponentCss$h = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
     return getCss({
         '@global': {
@@ -9632,6 +9674,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             ...(sortable
                 ? {
                     button: {
@@ -9695,7 +9738,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
     });
 };
 
-const getComponentCss$f = () => {
+const getComponentCss$g = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -9706,7 +9749,7 @@ const getComponentCss$f = () => {
     });
 };
 
-const getComponentCss$e = () => {
+const getComponentCss$f = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -9722,7 +9765,7 @@ const getComponentCss$e = () => {
     });
 };
 
-const getComponentCss$d = () => {
+const getComponentCss$e = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -9747,7 +9790,7 @@ const getComponentCss$d = () => {
 const scrollerAnimatedCssClass = 'scroller--animated';
 const targetSelectors = ['a', 'button'];
 const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
-const getComponentCss$c = (size, weight, theme) => {
+const getComponentCss$d = (size, weight, theme) => {
     const { primaryColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark } = getThemedColors('dark');
     const barJssStyle = {
@@ -9775,6 +9818,7 @@ const getComponentCss$c = (size, weight, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             ...addImportantToEachRule({
                 '::slotted': {
                     // TODO: produces duplicated css code in SSR context, we should try to make use of multiple selector like
@@ -9878,7 +9922,7 @@ const getComponentCss$c = (size, weight, theme) => {
     });
 };
 
-const getComponentCss$b = (theme) => {
+const getComponentCss$c = (theme) => {
     const { primaryColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark } = getThemedColors('dark');
     return getCss({
@@ -9899,7 +9943,7 @@ const getComponentCss$b = (theme) => {
     });
 };
 
-const getComponentCss$a = () => {
+const getComponentCss$b = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -9909,6 +9953,7 @@ const getComponentCss$a = () => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
         },
         root: {
             marginBottom: '8px',
@@ -9930,7 +9975,7 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     return colorMap[tagColor];
 };
 
-const getComponentCss$9 = (color, hasLabel, theme) => {
+const getComponentCss$a = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
     const themedColorsDark = getThemedColors('dark');
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
@@ -9948,6 +9993,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             button: {
                 display: 'flex',
                 position: 'relative',
@@ -10030,7 +10076,7 @@ const getColors = (tagColor, theme) => {
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
 };
-const getComponentCss$8 = (tagColor, compact, isFocusable, hasIcon, theme) => {
+const getComponentCss$9 = (tagColor, compact, isFocusable, hasIcon, theme) => {
     const { textColor, backgroundColor, backgroundHoverColor } = getColors(tagColor, theme);
     const { textColor: textColorDark, backgroundColor: backgroundColorDark, backgroundHoverColor: backgroundHoverColorDark, } = getColors(tagColor, 'dark');
     const isBackgroundFrosted = tagColor === 'background-frosted';
@@ -10045,6 +10091,7 @@ const getComponentCss$8 = (tagColor, compact, isFocusable, hasIcon, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             span: {
                 position: 'relative', // necessary as relative anchor to ensure click area of optional slotted focusable element is in sync
                 display: 'flex',
@@ -10121,7 +10168,7 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 
 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, hasSubmitButton, theme) => {
+const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme) => {
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
@@ -10140,6 +10187,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // ::slotted(input)
             ...addImportantToEachRule({
                 ...getSlottedTextFieldTextareaSelectStyles('input', state, false, theme, {
@@ -10179,6 +10227,8 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                 : formElementPaddingHorizontal,
             display: 'grid',
             gap: spacingStaticXSmall,
+            // min width is needed for showing at least 1 character in very narrow containers. The "2rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(2rem + ${formElementPaddingHorizontal} + ${borderWidthBase}*2 + ${hasUnitOrVisibleCounter || isSearch || isPassword || isCalendarOrTimeWithCustomIndicator ? getCalculatedFormElementPaddingHorizontal(isSearch ? 2 : 1) : '0px'})`,
         },
         wrapper: {
             display: 'grid',
@@ -10236,7 +10286,7 @@ const cssVariableUnorderedPseudoContent = '--p-internal-text-list-unordered-pseu
 const cssVariableOrderedGridColumn = '--p-internal-text-list-ordered-grid-column';
 const cssVariableOrderedPseudoSuffix = '--p-internal-text-list-ordered-pseudo-suffix';
 const counter = 'p-text-list-counter';
-const getComponentCss$6 = (type, theme) => {
+const getComponentCss$7 = (type, theme) => {
     const isOrderedList = isListTypeOrdered(type);
     return getCss({
         '@global': {
@@ -10280,7 +10330,7 @@ const getComponentCss$6 = (type, theme) => {
     });
 };
 
-const getComponentCss$5 = () => {
+const getComponentCss$6 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -10318,7 +10368,7 @@ const sizeMap = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
+const getComponentCss$5 = (size, weight, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -10337,7 +10387,7 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
+const getComponentCss$4 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -10347,6 +10397,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             // ::slotted(textarea)
             ...mergeDeep(addImportantToEachRule(getSlottedTextFieldTextareaSelectStyles('textarea', state, false, theme, {
                 gridArea: '1/1',
@@ -10389,6 +10440,107 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     });
 };
 
+const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, theme) => {
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            textarea: {
+                resize,
+                display: 'block',
+                width: '100%',
+                height: 'auto',
+                margin: 0,
+                outline: 0,
+                WebkitAppearance: 'none', // iOS safari
+                appearance: 'none',
+                boxSizing: 'border-box',
+                border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+                borderRadius: borderRadiusSmall,
+                background: 'transparent',
+                textIndent: 0,
+                color: primaryColor,
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: formStateColorDark || contrastMediumColorDark,
+                    color: primaryColorDark,
+                }),
+                gridArea: '1/1',
+                font: textSmallStyle.font, // to override line-height
+                padding: hasCounter
+                    ? `12px ${formElementPaddingHorizontal} ${spacingStaticLarge}`
+                    : `12px ${formElementPaddingHorizontal}`,
+                // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
+                '&:focus': {
+                    borderColor: primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: primaryColorDark,
+                    }),
+                },
+                '&:disabled': {
+                    cursor: 'not-allowed',
+                    color: disabledColor,
+                    borderColor: disabledColor,
+                    WebkitTextFillColor: disabledColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: disabledColorDark,
+                        borderColor: disabledColorDark,
+                        WebkitTextFillColor: disabledColorDark,
+                    }),
+                },
+                '&[readonly]': {
+                    borderColor: contrastLowColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: contrastLowColorDark,
+                        background: contrastLowColorDark,
+                    }),
+                },
+            },
+            ...hoverMediaQuery({
+                // with the media query the selector has higher priority and overrides disabled styles
+                ['textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])']: {
+                    borderColor: formStateHoverColor || primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: formStateHoverColorDark || primaryColorDark,
+                    }),
+                },
+            }),
+        },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            display: 'grid',
+        },
+        ...(hasCounter && {
+            counter: {
+                ...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(),
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const ANIMATION_DURATION = motionDurationModerate;
@@ -10430,6 +10582,7 @@ const getComponentCss$1 = () => {
                 ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
+            ...preventFoucOfNestedElementsStyles,
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
             '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
@@ -10496,79 +10649,80 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$17;
-exports.getBannerCss = getComponentCss$16;
-exports.getButtonCss = getComponentCss$12;
-exports.getButtonGroupCss = getComponentCss$15;
-exports.getButtonPureCss = getComponentCss$14;
-exports.getButtonTileCss = getComponentCss$13;
-exports.getCanvasCss = getComponentCss$11;
-exports.getCarouselCss = getComponentCss$10;
-exports.getCheckboxWrapperCss = getComponentCss$$;
-exports.getContentWrapperCss = getComponentCss$_;
-exports.getCrestCss = getComponentCss$Z;
-exports.getDisplayCss = getComponentCss$Y;
-exports.getDividerCss = getComponentCss$X;
-exports.getFieldsetCss = getComponentCss$V;
-exports.getFieldsetWrapperCss = getComponentCss$W;
-exports.getFlexCss = getComponentCss$T;
-exports.getFlexItemCss = getComponentCss$U;
-exports.getFlyoutCss = getComponentCss$Q;
-exports.getFlyoutMultilevelCss = getComponentCss$S;
-exports.getFlyoutMultilevelItemCss = getComponentCss$R;
+exports.getAccordionCss = getComponentCss$18;
+exports.getBannerCss = getComponentCss$17;
+exports.getButtonCss = getComponentCss$13;
+exports.getButtonGroupCss = getComponentCss$16;
+exports.getButtonPureCss = getComponentCss$15;
+exports.getButtonTileCss = getComponentCss$14;
+exports.getCanvasCss = getComponentCss$12;
+exports.getCarouselCss = getComponentCss$11;
+exports.getCheckboxWrapperCss = getComponentCss$10;
+exports.getContentWrapperCss = getComponentCss$$;
+exports.getCrestCss = getComponentCss$_;
+exports.getDisplayCss = getComponentCss$Z;
+exports.getDividerCss = getComponentCss$Y;
+exports.getFieldsetCss = getComponentCss$W;
+exports.getFieldsetWrapperCss = getComponentCss$X;
+exports.getFlexCss = getComponentCss$U;
+exports.getFlexItemCss = getComponentCss$V;
+exports.getFlyoutCss = getComponentCss$R;
+exports.getFlyoutMultilevelCss = getComponentCss$T;
+exports.getFlyoutMultilevelItemCss = getComponentCss$S;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$O;
-exports.getGridItemCss = getComponentCss$P;
-exports.getHeadingCss = getComponentCss$N;
-exports.getHeadlineCss = getComponentCss$M;
-exports.getIconCss = getComponentCss$L;
-exports.getInlineNotificationCss = getComponentCss$K;
-exports.getLinkCss = getComponentCss$I;
-exports.getLinkPureCss = getComponentCss$J;
-exports.getLinkSocialCss = getComponentCss$I;
-exports.getLinkTileCss = getComponentCss$F;
-exports.getLinkTileModelSignatureCss = getComponentCss$H;
-exports.getLinkTileProductCss = getComponentCss$G;
-exports.getMarqueCss = getComponentCss$E;
-exports.getModalCss = getComponentCss$D;
-exports.getModelSignatureCss = getComponentCss$C;
-exports.getMultiSelectCss = getComponentCss$A;
-exports.getMultiSelectOptionCss = getComponentCss$B;
-exports.getOptgroupCss = getComponentCss$y;
-exports.getPaginationCss = getComponentCss$x;
-exports.getPinCodeCss = getComponentCss$w;
-exports.getPopoverCss = getComponentCss$v;
-exports.getRadioButtonWrapperCss = getComponentCss$u;
-exports.getScrollerCss = getComponentCss$t;
-exports.getSegmentedControlCss = getComponentCss$r;
-exports.getSegmentedControlItemCss = getComponentCss$s;
-exports.getSelectCss = getComponentCss$o;
-exports.getSelectOptionCss = getComponentCss$z;
-exports.getSelectWrapperCss = getComponentCss$p;
-exports.getSelectWrapperDropdownCss = getComponentCss$q;
-exports.getSpinnerCss = getComponentCss$n;
-exports.getStepperHorizontalCss = getComponentCss$l;
-exports.getStepperHorizontalItemCss = getComponentCss$m;
-exports.getSwitchCss = getComponentCss$k;
-exports.getTableBodyCss = getComponentCss$j;
-exports.getTableCellCss = getComponentCss$i;
-exports.getTableCss = getComponentCss$h;
-exports.getTableHeadCellCss = getComponentCss$g;
-exports.getTableHeadCss = getComponentCss$e;
-exports.getTableHeadRowCss = getComponentCss$f;
-exports.getTableRowCss = getComponentCss$d;
-exports.getTabsBarCss = getComponentCss$c;
-exports.getTabsCss = getComponentCss$a;
-exports.getTabsItemCss = getComponentCss$b;
-exports.getTagCss = getComponentCss$8;
-exports.getTagDismissibleCss = getComponentCss$9;
-exports.getTextCss = getComponentCss$4;
-exports.getTextFieldWrapperCss = getComponentCss$7;
-exports.getTextListCss = getComponentCss$6;
-exports.getTextListItemCss = getComponentCss$5;
-exports.getTextareaWrapperCss = getComponentCss$3;
+exports.getGridCss = getComponentCss$P;
+exports.getGridItemCss = getComponentCss$Q;
+exports.getHeadingCss = getComponentCss$O;
+exports.getHeadlineCss = getComponentCss$N;
+exports.getIconCss = getComponentCss$M;
+exports.getInlineNotificationCss = getComponentCss$L;
+exports.getLinkCss = getComponentCss$J;
+exports.getLinkPureCss = getComponentCss$K;
+exports.getLinkSocialCss = getComponentCss$J;
+exports.getLinkTileCss = getComponentCss$G;
+exports.getLinkTileModelSignatureCss = getComponentCss$I;
+exports.getLinkTileProductCss = getComponentCss$H;
+exports.getMarqueCss = getComponentCss$F;
+exports.getModalCss = getComponentCss$E;
+exports.getModelSignatureCss = getComponentCss$D;
+exports.getMultiSelectCss = getComponentCss$B;
+exports.getMultiSelectOptionCss = getComponentCss$C;
+exports.getOptgroupCss = getComponentCss$z;
+exports.getPaginationCss = getComponentCss$y;
+exports.getPinCodeCss = getComponentCss$x;
+exports.getPopoverCss = getComponentCss$w;
+exports.getRadioButtonWrapperCss = getComponentCss$v;
+exports.getScrollerCss = getComponentCss$u;
+exports.getSegmentedControlCss = getComponentCss$s;
+exports.getSegmentedControlItemCss = getComponentCss$t;
+exports.getSelectCss = getComponentCss$p;
+exports.getSelectOptionCss = getComponentCss$A;
+exports.getSelectWrapperCss = getComponentCss$q;
+exports.getSelectWrapperDropdownCss = getComponentCss$r;
+exports.getSpinnerCss = getComponentCss$o;
+exports.getStepperHorizontalCss = getComponentCss$m;
+exports.getStepperHorizontalItemCss = getComponentCss$n;
+exports.getSwitchCss = getComponentCss$l;
+exports.getTableBodyCss = getComponentCss$k;
+exports.getTableCellCss = getComponentCss$j;
+exports.getTableCss = getComponentCss$i;
+exports.getTableHeadCellCss = getComponentCss$h;
+exports.getTableHeadCss = getComponentCss$f;
+exports.getTableHeadRowCss = getComponentCss$g;
+exports.getTableRowCss = getComponentCss$e;
+exports.getTabsBarCss = getComponentCss$d;
+exports.getTabsCss = getComponentCss$b;
+exports.getTabsItemCss = getComponentCss$c;
+exports.getTagCss = getComponentCss$9;
+exports.getTagDismissibleCss = getComponentCss$a;
+exports.getTextCss = getComponentCss$5;
+exports.getTextFieldWrapperCss = getComponentCss$8;
+exports.getTextListCss = getComponentCss$7;
+exports.getTextListItemCss = getComponentCss$6;
+exports.getTextareaCss = getComponentCss$3;
+exports.getTextareaWrapperCss = getComponentCss$4;
 exports.getToastCss = getComponentCss$1;
 exports.getWordmarkCss = getComponentCss;