@porsche-design-system/components-react 3.29.0 → 3.30.0-rc.1

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

@@ -3884,7 +3884,7 @@ hasWindow &&
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
 // index.ts
-var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
+var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
 const hasDocument = typeof document !== 'undefined';
 
@@ -3927,7 +3927,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1l = (size, compact, open, theme, sticky) => {
+const getComponentCss$1n = (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';
@@ -4099,7 +4099,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$1k = (isOpen) => {
+const getComponentCss$1m = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4171,7 +4171,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1j = (direction) => {
+const getComponentCss$1l = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4324,7 +4324,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1i = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1k = (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: {
@@ -4362,12 +4362,17 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1j = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -4386,6 +4391,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
                     gridArea: `${isTopAligned ? 4 : 2}/2`,
                     zIndex: 3,
                 },
+                '&[name="footer"]': {
+                    gridRow: 2,
+                    zIndex: 3,
+                },
             },
             '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
@@ -4421,7 +4430,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
             })),
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             ...(hasGradient &&
@@ -4465,21 +4477,23 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            display: 'flex',
-            gap: spacingStaticMedium,
-            justifyContent: 'space-between',
             ...buildResponsiveStyles(compact, (compactValue) => compactValue
                 ? {
-                    alignItems: 'center',
-                    flexDirection: 'row',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    columnGap: spacingStaticMedium,
                 }
                 : {
-                    alignItems: 'flex-start',
+                    display: 'flex',
                     flexDirection: 'column',
+                    alignItems: 'start',
                 }),
         },
         'link-or-button-pure': {
             zIndex: 5,
+            gridColumn: 2,
+            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
+            alignSelf: 'center',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -4487,6 +4501,7 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
+            marginTop: spacingStaticMedium,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -4531,7 +4546,8 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
     const scalingVar = `var(${cssVariableInternalScaling}, var(--p-internal-scaling-factor))`;
-    const borderCompensation = variant === 'ghost' ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
+    const borderCompensation = variant === 'ghost' && !isHighContrastMode ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
+    const borderStyle = `${borderWidthBase} solid ${borderColor}`;
     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
@@ -4563,8 +4579,11 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             textDecoration: 'none',
             ...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}` }),
+                ? {
+                    ...frostedGlassStyle,
+                    border: isHighContrastMode ? borderStyle : 'none',
+                } // We can't use a border in the ghost variant due to rendering issues with backdrop-filter in safari
+                : { border: borderStyle }),
             borderRadius: borderRadiusSmall,
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
@@ -4632,7 +4651,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$1g = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1i = (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');
@@ -4708,7 +4727,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$1f = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1h = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5087,7 +5106,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$1e = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$1g = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5539,13 +5558,13 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
     };
 };
 
-const getCheckedSVGBackgroundImage$2 = (fill) => {
+const getCheckedSVGBackgroundImage$3 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$1d = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$1f = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5570,16 +5589,16 @@ const getComponentCss$1d = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$3(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$3(checkedIconColorDark),
                             }),
                             // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
                             ...(isHighContrastMode &&
                                 getSchemedHighContrastMediaQuery({
-                                    backgroundImage: getCheckedSVGBackgroundImage$2('white'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$3('white'),
                                 }, {
-                                    backgroundImage: getCheckedSVGBackgroundImage$2('black'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$3('black'),
                                 })),
                         },
                         '&(input:indeterminate)': {
@@ -5702,7 +5721,7 @@ const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) =>
     };
 };
 
-const getCheckedSVGBackgroundImage$1 = (fill) => {
+const getCheckedSVGBackgroundImage$2 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
 const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
@@ -5728,18 +5747,18 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
     return {
         borderColor: checkedColor,
         backgroundColor: checkedColor,
-        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
         ...prefersColorSchemeDarkMediaQuery(theme, {
-            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColorDark),
             borderColor: checkedColorDark,
             backgroundColor: checkedColorDark,
         }),
         // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
         ...(isHighContrastMode &&
             getSchemedHighContrastMediaQuery({
-                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+                backgroundImage: getCheckedSVGBackgroundImage$2('white'),
             }, {
-                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+                backgroundImage: getCheckedSVGBackgroundImage$2('black'),
             })),
     };
 };
@@ -5747,7 +5766,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$1c = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$1e = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -6039,7 +6058,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
 // Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
 // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
-const getScalingVar = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$1 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
  */
@@ -6049,7 +6068,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
-    const scalingVar = getScalingVar(compact);
+    const scalingVar = getScalingVar$1(compact);
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
     const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -6386,7 +6405,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$1b = (width) => {
+const getComponentCss$1d = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6428,7 +6447,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$1a = () => {
+const getComponentCss$1c = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6527,7 +6546,7 @@ const sizeMap$5 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$19 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$1b = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6545,7 +6564,7 @@ const getComponentCss$19 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$18 = (color, orientation, theme) => {
+const getComponentCss$1a = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6606,7 +6625,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$17 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$19 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6853,7 +6872,7 @@ const getComponentCss$17 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$16 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$18 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -7084,7 +7103,7 @@ const getComponentCss$16 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$15 = (hasSlottedAnchor, isActive) => {
+const getComponentCss$17 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -7136,7 +7155,7 @@ const getComponentCss$15 = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$14 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$16 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7173,7 +7192,7 @@ const getComponentCss$14 = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$13 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$15 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7218,7 +7237,7 @@ const sizeMap$4 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$12 = (size) => {
+const getComponentCss$14 = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7260,7 +7279,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$11 = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$13 = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7282,7 +7301,7 @@ const getComponentCss$11 = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$10 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$12 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7479,7 +7498,7 @@ const cssVarRefPaddingTop = '--ref-p-flyout-pt';
 const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$$ = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$11 = (isOpen, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7539,7 +7558,7 @@ const getComponentCss$$ = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     },
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, theme),
+            dialog: getDialogJssStyle(isOpen, theme, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end', theme),
@@ -7591,7 +7610,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$_ = (size, offset) => {
+const getComponentCss$10 = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7611,7 +7630,7 @@ const getComponentCss$_ = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$Z = (direction, wrap) => {
+const getComponentCss$$ = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7637,7 +7656,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
+const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7697,7 +7716,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$X = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$Z = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7808,7 +7827,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$W = (name, source, color, size, theme) => {
+const getComponentCss$Y = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7927,7 +7946,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$V = (state, hasAction, hasClose, theme) => {
+const getComponentCss$X = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7974,7 +7993,7 @@ const getComponentCss$V = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -7997,7 +8016,7 @@ const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8017,7 +8036,7 @@ const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
+const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8042,7 +8061,7 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$R = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
+const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             '&[type="text"]': {
@@ -8065,7 +8084,7 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, toggle, compact,
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
+const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8089,7 +8108,7 @@ const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8109,7 +8128,7 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8135,7 +8154,7 @@ const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8158,7 +8177,7 @@ const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8171,7 +8190,7 @@ const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnl
     });
 };
 
-const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$N = (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': {
@@ -8200,7 +8219,7 @@ const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, a
 };
 
 const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
-const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
+const getComponentCss$M = (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, cssVariableInternalLinkScaling, theme), {
@@ -8242,12 +8261,17 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
-const getComponentCss$J = (aspectRatio, weight, // to get deprecated semibold typed
+const getComponentCss$L = (aspectRatio, weight, // to get deprecated semibold typed
 direction, hasDescription) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -8307,7 +8331,10 @@ direction, hasDescription) => {
                 aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
             })),
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             '&::after': {
@@ -8376,7 +8403,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$I = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+const getComponentCss$K = (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({
@@ -8515,13 +8542,18 @@ const getComponentCss$I = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$H = (aspectRatio, size, weight, // to get deprecated semibold typed
-background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$J = (aspectRatio, size, weight, // to get deprecated semibold typed
+background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -8540,6 +8572,10 @@ background, align, compact, hasGradient, isDisabled) => {
                     gridArea: `${isTopAligned ? 4 : 2}/2`,
                     zIndex: 3,
                 },
+                '&[name="footer"]': {
+                    gridRow: 2,
+                    zIndex: 3,
+                },
             },
             '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
@@ -8574,7 +8610,10 @@ background, align, compact, hasGradient, isDisabled) => {
                 aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
             })),
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             ...(hasGradient &&
@@ -8617,21 +8656,23 @@ background, align, compact, hasGradient, isDisabled) => {
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            display: 'flex',
-            gap: spacingStaticMedium,
-            justifyContent: 'space-between',
             ...buildResponsiveStyles(compact, (compactValue) => compactValue
                 ? {
-                    alignItems: 'center',
-                    flexDirection: 'row',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    columnGap: spacingStaticMedium,
                 }
                 : {
-                    alignItems: 'flex-start',
+                    display: 'flex',
                     flexDirection: 'column',
+                    alignItems: 'start',
                 }),
         },
         'link-or-button-pure': {
             zIndex: 5,
+            gridColumn: 2,
+            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
+            alignSelf: 'center',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -8639,6 +8680,7 @@ background, align, compact, hasGradient, isDisabled) => {
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
+            marginTop: spacingStaticMedium,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -8656,7 +8698,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$G = (size) => {
+const getComponentCss$I = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8711,7 +8753,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$F = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$H = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8849,7 +8891,7 @@ const getThemedColor = (color, themedColors) => {
     };
     return colorMap[color];
 };
-const getComponentCss$E = (model, safeZone, size, color, theme) => {
+const getComponentCss$G = (model, safeZone, size, color, theme) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -8894,7 +8936,7 @@ const getComponentCss$E = (model, safeZone, size, color, theme) => {
 };
 
 const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
-const getComponentCss$D = (theme, isDisabled, selected) => {
+const getComponentCss$F = (theme, isDisabled, selected) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8928,7 +8970,7 @@ const getComponentCss$D = (theme, isDisabled, selected) => {
 
 const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
 const scalingVar = `var(${cssVarInternalOptgroupScaling}, 1)`;
-const getComponentCss$C = (isDisabled, theme) => {
+const getComponentCss$E = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     const padding = `max(2px, ${scalingVar} * ${spacingStaticSmall}) max(4px, ${scalingVar} * 12px)`;
@@ -8967,7 +9009,7 @@ const getComponentCss$C = (isDisabled, theme) => {
 };
 
 const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
-const getComponentCss$B = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
+const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
     const scalingVar = `var(${cssVarInternalMultiSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
         '@global': {
@@ -9017,7 +9059,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$A = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$C = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -9153,41 +9195,29 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, theme) => {
-    const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
+const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
+const getScalingVar = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
+const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
+    const scalingVar = getScalingVar(compact);
+    const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
+    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    // 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.
+    const minWidth = `max(1rem, calc(${dimension} - ${borderWidthBase}*2 - ${paddingBlock}*2))`;
     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
-        maxWidth: inputSize,
-        // 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.
-        minWidth: `calc(1rem + ${borderWidthBase}*2 + ${spacingStaticSmall}*2)`,
-        ...(length > 4 && {
-            [getMediaQueryMax('xs')]: {
-                // TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
-                maxWidth: 'auto',
-                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, // TODO: not in sync with e.g. checkbox/radio-button loading style
             cursor: 'not-allowed',
         }),
-        // since @playwright/test@1.40.1 this does not work anymore in Webkit browser engine for unknown reasons
-        /* ...Object.fromEntries(
-          Array.from(Array(length)).map((_, i) => {
-            return [`&:nth-of-type(${i + 1})`, { gridArea: `1/${i + 1}` }];
-          })
-        ),*/
-        '&:nth-of-type(1)': { gridArea: '1/1' },
-        '&:nth-of-type(2)': { gridArea: '1/2' },
-        '&:nth-of-type(3)': { gridArea: '1/3' },
-        '&:nth-of-type(4)': { gridArea: '1/4' },
-        '&:nth-of-type(5)': { gridArea: '1/5' },
-        '&:nth-of-type(6)': { gridArea: '1/6' },
+        height: dimension,
+        minWidth,
+        maxWidth: dimension,
+        width: 'auto',
+        padding: paddingBlock,
+        boxSizing: 'content-box',
     })));
     return getCss({
         '@global': {
@@ -9207,17 +9237,20 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
             gap: spacingStaticXSmall,
         },
         wrapper: {
+            position: 'relative',
             display: 'grid',
-            gridTemplateColumns: `repeat(${length}, minmax(auto, 1fr))`,
+            gridTemplateColumns: `repeat(${length}, 1fr)`,
             justifySelf: 'flex-start',
-            gap: spacingStaticSmall,
+            gap,
         },
         ...(isLoading && {
             spinner: {
-                gridArea: '1/1/1/-1',
-                placeSelf: 'center',
-                width: inputSize,
-                height: inputSize,
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: dimension,
+                height: dimension,
                 pointerEvents: 'none',
             },
         }),
@@ -9233,7 +9266,7 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
 const POPOVER_SAFE_ZONE = 8;
 
 const { canvasTextColor } = getHighContrastColors();
-const getComponentCss$y = (theme) => {
+const getComponentCss$A = (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)';
@@ -9337,10 +9370,10 @@ const getComponentCss$y = (theme) => {
     });
 };
 
-const getCheckedSVGBackgroundImage = (fill) => {
+const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
@@ -9363,16 +9396,16 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by paramter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
                             }),
                             // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
                             ...(isHighContrastMode &&
                                 getSchemedHighContrastMediaQuery({
-                                    backgroundImage: getCheckedSVGBackgroundImage('white'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$1('white'),
                                 }, {
-                                    backgroundImage: getCheckedSVGBackgroundImage('black'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$1('black'),
                                 })),
                         },
                     }),
@@ -9421,6 +9454,267 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-scaling';
+const getCheckedSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
+};
+const getComponentCss$y = (disabled, loading, state, 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);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(disabled, loading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const uncheckedHoverColor = formStateHoverColor || primaryColor;
+    const uncheckedHoverColorDark = formStateHoverColorDark || primaryColorDark;
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedHoverColor = formStateHoverColor || contrastHighColor;
+    const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
+    const minDimension = `calc(${SCALING_BASE_VALUE} * 0.75)`;
+    const scalingVar = `var(${cssVarInternalRadioGroupOptionScaling}, 1)`;
+    const dimension = `max(${minDimension}, ${scalingVar} * (${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the radio button full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the radio button '::before' pseudo-element with a negative offset to align it with the touch target.
+    const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the radio button label relative to the radio button size.
+    const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the radio-group, whichever is larger.
+    return getCss({
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+                display: 'block',
+            },
+            input: {
+                gridArea: '1/1',
+                borderRadius: '50%',
+                position: 'relative',
+                width: dimension,
+                height: dimension,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                display: 'block',
+                margin: 0,
+                padding: 0,
+                WebkitAppearance: 'none', // iOS safari
+                appearance: 'none',
+                boxSizing: 'content-box',
+                background: `transparent 0% 0% / ${fontLineHeight}`,
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+                border: `${borderWidthBase} solid ${uncheckedColor}`,
+                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+                ...(disabledOrLoading
+                    ? {
+                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+                    }
+                    : {
+                        cursor: 'pointer',
+                    }),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: uncheckedColorDark,
+                }),
+                '&::before': {
+                    // Ensures the touch target is at least '24px', even if the radio button is smaller than the minimum touch target size.
+                    // This pseudo-element expands the clickable area without affecting the visual size of the radio button itself.
+                    content: '""',
+                    position: 'absolute',
+                    inset,
+                },
+            },
+            'input:checked': {
+                borderColor: checkedColor,
+                backgroundColor: checkedColor,
+                backgroundSize: dimension,
+                backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: checkedColorDark,
+                    backgroundColor: checkedColorDark,
+                    backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
+                }),
+                // This is a workaround for Blink-based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                ...(isHighContrastMode &&
+                    getSchemedHighContrastMediaQuery({
+                        backgroundImage: getCheckedSVGBackgroundImage('white'),
+                    }, {
+                        backgroundImage: getCheckedSVGBackgroundImage('black'),
+                    })),
+            },
+            ...(!disabledOrLoading &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    'input:hover,label:hover~.wrapper input': {
+                        borderColor: uncheckedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: uncheckedHoverColorDark,
+                        }),
+                    },
+                    '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 a chrome bug where transition properties are stuck on hover
+                    }),
+                })),
+            ...(!disabled && {
+                'input::-moz-focus-inner': {
+                    border: 0, // reset ua-style (for FF)
+                },
+                'input:focus': {
+                    outline: 0, // reset ua-style (for older browsers)
+                },
+                'input:focus-visible': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    outlineOffset: '2px',
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        outlineColor: focusColorDark,
+                    }),
+                },
+            }),
+            ...preventFoucOfNestedElementsStyles,
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            ...textSmallStyle,
+            display: 'grid',
+            gridArea: '1/1',
+            minWidth: minimumTouchTargetSize,
+            minHeight: minimumTouchTargetSize,
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'flex-start', // in case label becomes multiline
+            ...(isDisabledOrLoading(disabled, loading) && {
+                cursor: 'not-allowed',
+            }),
+            height,
+        },
+        ...(loading && {
+            spinner: {
+                position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: dimension,
+                height: dimension,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, {
+            gridArea: '1/2',
+        }, {
+            paddingTop,
+            paddingInlineStart,
+        }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+    });
+};
+
+const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
+const groupRadioGroupDirectionJssStyles = {
+    column: {
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch',
+    },
+    row: {
+        flexFlow: 'row wrap',
+        alignItems: 'start',
+    },
+};
+const getRadioGroupDirectionJssStyles = (direction) => {
+    return groupRadioGroupDirectionJssStyles[direction];
+};
+const getComponentCss$x = (disabled, loading, hideLabel, state, compact, direction, theme) => {
+    const scalingVar = `var(${cssVarInternalRadioGroupScaling}, ${compact ? 0.5 : 1})`;
+    const { primaryColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark } = getThemedColors('dark');
+    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const hoverStyles = {
+        borderColor: formStateHoverColor || primaryColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: formStateHoverColorDark || primaryColorDark,
+        }),
+    };
+    const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const columnGap = `max(${spacingStaticSmall}, ${scalingVar} * ${spacingStaticMedium})`;
+    const rowGap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
+    return getCss({
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+                [`${cssVarInternalRadioGroupOptionScaling}`]: scalingVar,
+            },
+            ...preventFoucOfNestedElementsStyles,
+        },
+        root: {
+            display: 'grid',
+            justifySelf: 'flex-start',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            alignItems: 'start',
+            position: 'relative',
+            display: 'flex',
+            ...buildResponsiveStyles(direction, getRadioGroupDirectionJssStyles),
+            columnGap,
+            rowGap,
+        },
+        ...(loading && {
+            spinner: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: dimension,
+                height: dimension,
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled && {
+            ...hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            }),
+            cursor: 'inherit', // the label is not clickable
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
 const getComponentCss$w = (isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
@@ -11527,67 +11821,69 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1l;
-exports.getBannerCss = getComponentCss$1k;
-exports.getButtonCss = getComponentCss$1g;
-exports.getButtonGroupCss = getComponentCss$1j;
-exports.getButtonPureCss = getComponentCss$1i;
-exports.getButtonTileCss = getComponentCss$1h;
-exports.getCanvasCss = getComponentCss$1f;
-exports.getCarouselCss = getComponentCss$1e;
-exports.getCheckboxCss = getComponentCss$1c;
-exports.getCheckboxWrapperCss = getComponentCss$1d;
-exports.getContentWrapperCss = getComponentCss$1b;
-exports.getCrestCss = getComponentCss$1a;
-exports.getDisplayCss = getComponentCss$19;
-exports.getDividerCss = getComponentCss$18;
-exports.getDrilldownCss = getComponentCss$17;
-exports.getDrilldownItemCss = getComponentCss$16;
-exports.getDrilldownLinkCss = getComponentCss$15;
-exports.getFieldsetCss = getComponentCss$13;
-exports.getFieldsetWrapperCss = getComponentCss$14;
-exports.getFlagCss = getComponentCss$12;
-exports.getFlexCss = getComponentCss$10;
-exports.getFlexItemCss = getComponentCss$11;
-exports.getFlyoutCss = getComponentCss$$;
+exports.getAccordionCss = getComponentCss$1n;
+exports.getBannerCss = getComponentCss$1m;
+exports.getButtonCss = getComponentCss$1i;
+exports.getButtonGroupCss = getComponentCss$1l;
+exports.getButtonPureCss = getComponentCss$1k;
+exports.getButtonTileCss = getComponentCss$1j;
+exports.getCanvasCss = getComponentCss$1h;
+exports.getCarouselCss = getComponentCss$1g;
+exports.getCheckboxCss = getComponentCss$1e;
+exports.getCheckboxWrapperCss = getComponentCss$1f;
+exports.getContentWrapperCss = getComponentCss$1d;
+exports.getCrestCss = getComponentCss$1c;
+exports.getDisplayCss = getComponentCss$1b;
+exports.getDividerCss = getComponentCss$1a;
+exports.getDrilldownCss = getComponentCss$19;
+exports.getDrilldownItemCss = getComponentCss$18;
+exports.getDrilldownLinkCss = getComponentCss$17;
+exports.getFieldsetCss = getComponentCss$15;
+exports.getFieldsetWrapperCss = getComponentCss$16;
+exports.getFlagCss = getComponentCss$14;
+exports.getFlexCss = getComponentCss$12;
+exports.getFlexItemCss = getComponentCss$13;
+exports.getFlyoutCss = getComponentCss$11;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentNoResultsOptionStyles = getFunctionalComponentNoResultsOptionStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$Z;
-exports.getGridItemCss = getComponentCss$_;
-exports.getHeadingCss = getComponentCss$Y;
-exports.getHeadlineCss = getComponentCss$X;
-exports.getIconCss = getComponentCss$W;
-exports.getInlineNotificationCss = getComponentCss$V;
-exports.getInputDateCss = getComponentCss$U;
-exports.getInputEmailCss = getComponentCss$T;
-exports.getInputNumberCss = getComponentCss$S;
-exports.getInputPasswordCss = getComponentCss$R;
-exports.getInputSearchCss = getComponentCss$Q;
-exports.getInputTelCss = getComponentCss$P;
-exports.getInputTextCss = getComponentCss$O;
-exports.getInputTimeCss = getComponentCss$N;
-exports.getInputUrlCss = getComponentCss$M;
-exports.getLinkCss = getComponentCss$K;
-exports.getLinkPureCss = getComponentCss$L;
-exports.getLinkSocialCss = getComponentCss$K;
-exports.getLinkTileCss = getComponentCss$H;
-exports.getLinkTileModelSignatureCss = getComponentCss$J;
-exports.getLinkTileProductCss = getComponentCss$I;
-exports.getMarqueCss = getComponentCss$G;
-exports.getModalCss = getComponentCss$F;
-exports.getModelSignatureCss = getComponentCss$E;
-exports.getMultiSelectCss = getComponentCss$B;
-exports.getMultiSelectOptionCss = getComponentCss$D;
-exports.getOptgroupCss = getComponentCss$C;
-exports.getPaginationCss = getComponentCss$A;
-exports.getPinCodeCss = getComponentCss$z;
-exports.getPopoverCss = getComponentCss$y;
-exports.getRadioButtonWrapperCss = getComponentCss$x;
-exports.getScalingVar = getScalingVar;
+exports.getGridCss = getComponentCss$$;
+exports.getGridItemCss = getComponentCss$10;
+exports.getHeadingCss = getComponentCss$_;
+exports.getHeadlineCss = getComponentCss$Z;
+exports.getIconCss = getComponentCss$Y;
+exports.getInlineNotificationCss = getComponentCss$X;
+exports.getInputDateCss = getComponentCss$W;
+exports.getInputEmailCss = getComponentCss$V;
+exports.getInputNumberCss = getComponentCss$U;
+exports.getInputPasswordCss = getComponentCss$T;
+exports.getInputSearchCss = getComponentCss$S;
+exports.getInputTelCss = getComponentCss$R;
+exports.getInputTextCss = getComponentCss$Q;
+exports.getInputTimeCss = getComponentCss$P;
+exports.getInputUrlCss = getComponentCss$O;
+exports.getLinkCss = getComponentCss$M;
+exports.getLinkPureCss = getComponentCss$N;
+exports.getLinkSocialCss = getComponentCss$M;
+exports.getLinkTileCss = getComponentCss$J;
+exports.getLinkTileModelSignatureCss = getComponentCss$L;
+exports.getLinkTileProductCss = getComponentCss$K;
+exports.getMarqueCss = getComponentCss$I;
+exports.getModalCss = getComponentCss$H;
+exports.getModelSignatureCss = getComponentCss$G;
+exports.getMultiSelectCss = getComponentCss$D;
+exports.getMultiSelectOptionCss = getComponentCss$F;
+exports.getOptgroupCss = getComponentCss$E;
+exports.getPaginationCss = getComponentCss$C;
+exports.getPinCodeCss = getComponentCss$B;
+exports.getPopoverCss = getComponentCss$A;
+exports.getRadioButtonWrapperCss = getComponentCss$z;
+exports.getRadioGroupCss = getComponentCss$x;
+exports.getRadioGroupOptionCss = getComponentCss$y;
+exports.getScalingVar = getScalingVar$1;
 exports.getScrollerCss = getComponentCss$w;
 exports.getSegmentedControlCss = getComponentCss$u;
 exports.getSegmentedControlItemCss = getComponentCss$v;