@porsche-design-system/components-react 3.30.0-rc.0 → 3.30.0-rc.2

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

@@ -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,7 +4362,7 @@ 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': {
@@ -4391,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',
@@ -4473,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',
             })),
@@ -4495,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',
             })),
@@ -4539,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
@@ -4571,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,
@@ -4640,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');
@@ -4716,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({
@@ -5095,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();
@@ -5547,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);
@@ -5578,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)': {
@@ -5710,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) => {
@@ -5736,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'),
             })),
     };
 };
@@ -5755,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);
@@ -6047,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$1 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$2 = (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."}
  */
@@ -6057,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$1(compact);
+    const scalingVar = getScalingVar$2(compact);
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
     const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -6394,7 +6405,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$1b = (width) => {
+const getComponentCss$1d = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6436,7 +6447,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$1a = () => {
+const getComponentCss$1c = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6535,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': {
@@ -6553,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 = {
@@ -6614,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({
@@ -6861,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': {
@@ -7092,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
@@ -7144,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': {
@@ -7181,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': {
@@ -7226,7 +7237,7 @@ const sizeMap$4 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$12 = (size) => {
+const getComponentCss$14 = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7268,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({
@@ -7290,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': {
@@ -7487,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({
@@ -7547,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),
@@ -7599,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({
@@ -7619,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': {
@@ -7645,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': {
@@ -7705,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': {
@@ -7816,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);
@@ -7935,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': {
@@ -7982,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',
@@ -8005,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',
@@ -8025,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',
@@ -8050,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"]': {
@@ -8073,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',
@@ -8097,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',
@@ -8117,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',
@@ -8143,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',
@@ -8166,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',
@@ -8179,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': {
@@ -8208,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), {
@@ -8250,7 +8261,7 @@ 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': {
@@ -8392,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({
@@ -8531,8 +8542,8 @@ 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': {
@@ -8561,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',
@@ -8641,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',
             })),
@@ -8663,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',
             })),
@@ -8680,7 +8698,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$G = (size) => {
+const getComponentCss$I = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8735,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': {
@@ -8873,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({
@@ -8918,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': {
@@ -8952,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)`;
@@ -8991,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': {
@@ -9041,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({
@@ -9178,9 +9196,9 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
 }));
 
 const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
-const getScalingVar = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
-const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
-    const scalingVar = getScalingVar(compact);
+const getScalingVar$1 = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
+const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
+    const scalingVar = getScalingVar$1(compact);
     const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
     const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
@@ -9248,7 +9266,7 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, comp
 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)';
@@ -9352,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({
@@ -9378,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'),
                                 })),
                         },
                     }),
@@ -9436,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.6668 : 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 = {
@@ -9549,7 +9828,9 @@ const getComponentCss$w = (isNextHidden, isPrevHidden, alignScrollIndicator, has
     });
 };
 
-const ITEM_PADDING = '17px';
+const cssVarInternalSegmentedControlScaling = '--p-internal-segmented-control-scaling';
+const getScalingVar = (compact) => `var(${cssVarInternalSegmentedControlScaling}, ${compact ? 0.5 : 1})`;
+const ICON_OFFSET = '4px';
 const { font: BUTTON_FONT } = textSmallStyle;
 const ICON_SIZE = '1.5rem';
 const ICON_MARGIN = '.25rem';
@@ -9569,10 +9850,20 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
         hoverBorderColor: primaryColor,
     };
 };
-const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$v = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
+    const scalingVar = getScalingVar(compact);
+    const verticalPadding = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    const horizontalPadding = `calc(${verticalPadding} + ${ICON_OFFSET})`;
+    const padding = hasIconAndSlottedContent
+        ? `${verticalPadding} ${horizontalPadding} ${verticalPadding} ${verticalPadding}`
+        : `${verticalPadding} ${horizontalPadding}`;
+    const dimension = `calc(max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px)) + (${verticalPadding} + ${borderWidthBase}) * 2)`;
+    return { padding, dimension };
+};
+const getComponentCss$v = (compact, 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');
+    const scalableItemStyles = getScalableItemStyles(hasIcon && hasSlottedContent, compact);
     return getCss({
         '@global': {
             ':host': {
@@ -9588,8 +9879,9 @@ const getComponentCss$v = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 position: 'relative',
                 display: 'block',
                 height: '100%',
+                minHeight: scalableItemStyles.dimension,
                 width: '100%',
-                padding: getItemPadding(hasIcon && hasSlottedContent),
+                padding: scalableItemStyles.padding,
                 margin: 0, // Removes default button margin on safari 15
                 border: `${borderWidthBase} solid ${borderColor}`,
                 borderRadius: borderRadiusSmall,
@@ -9641,7 +9933,8 @@ const getComponentCss$v = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-const getComponentCss$u = (maxWidth, columns) => {
+const getComponentCss$u = (maxWidth, columns, compact) => {
+    const scalingVar = getScalingVar(compact);
     return getCss({
         '@global': {
             ':host': {
@@ -9653,7 +9946,7 @@ const getComponentCss$u = (maxWidth, columns) => {
                             ? `repeat(auto-fit, ${maxWidth}px)`
                             : `repeat(${col}, minmax(0, 1fr))`,
                     })),
-                    gap: '6px',
+                    gap: `max(${spacingStaticXSmall}, ${scalingVar} * 6px)`,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
@@ -11542,67 +11835,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$1;
+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$2;
 exports.getScrollerCss = getComponentCss$w;
 exports.getSegmentedControlCss = getComponentCss$u;
 exports.getSegmentedControlItemCss = getComponentCss$v;