@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

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

@@ -1,356 +1,3 @@
-const blurFrosted$1 = 'blur(32px)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use backdropFilter: blurFrosted instead  */
-const frostedGlassStyle = {
-    WebkitBackdropFilter: blurFrosted$1,
-    backdropFilter: blurFrosted$1,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use 2px instead. */
-const borderWidthBase = '2px';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use 1px instead. */
-const borderWidthThin = '1px';
-
-const fontPorscheNext$1 = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
-const fontFamily = fontPorscheNext$1;
-
-const leadingNormal$1 = 'calc(6px + 2.125ex)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
-const fontLineHeight = leadingNormal$1;
-
-const typescaleLg$1 = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
-
-const typescaleMd$1 = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
-const fontSizeHeadingMedium = typescaleMd$1;
-
-const typescaleSm$1 = '1rem';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
-const fontSizeHeadingSmall = typescaleSm$1;
-
-const typescaleXl$1 = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
-const fontSizeHeadingXLarge = typescaleXl$1;
-
-const typescale2Xl$1 = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescale2Xl instead. */
-const fontSizeHeadingXXLarge = typescale2Xl$1;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleLg instead. */
-const fontSizeTextLarge = typescaleLg$1;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
-const fontSizeTextMedium = typescaleMd$1;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
-const fontSizeTextSmall = typescaleSm$1;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
-const fontSizeTextXLarge = typescaleXl$1;
-
-const typescaleXs$2 = '.875rem';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
-const fontSizeTextXSmall = typescaleXs$2;
-
-const typescale2Xs$1 = '.75rem';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescale2Xs instead. */
-const fontSizeTextXXSmall = typescale2Xs$1;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use typescale variables instead. */
-const fontSizeText$1 = {
-    xxSmall: fontSizeTextXXSmall,
-    xSmall: fontSizeTextXSmall,
-    small: fontSizeTextSmall,
-    medium: fontSizeTextMedium,
-    large: fontSizeTextLarge,
-    xLarge: fontSizeTextXLarge,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
-const fontStyleNormal = 'normal';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
-const fontVariant = 'normal';
-
-const fontWeightNormal$1 = 400;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
-const fontWeightRegular = fontWeightNormal$1;
-
-const fontWeightSemibold$1 = 600;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightSemibold instead. */
-const fontWeightSemiBold = fontWeightSemibold$1;
-
-const gradientStopsFadeDark = 'hsla(0,0%,0%,.8) 0%,' +
-    'hsla(0,0%,0%,.8) 8.1%,' +
-    'hsla(0,0%,0%,.8) 15.5%,' +
-    'hsla(0,0%,0%,.8) 22.5%,' +
-    'hsla(0,0%,0%,.78) 29%,' +
-    'hsla(0,0%,0%,.73) 35.3%,' +
-    'hsla(0,0%,0%,.67) 41.2%,' +
-    'hsla(0,0%,0%,.6) 47.1%,' +
-    'hsla(0,0%,0%,.52) 52.9%,' +
-    'hsla(0,0%,0%,.44) 58.8%,' +
-    'hsla(0,0%,0%,.33) 64.7%,' +
-    'hsla(0,0%,0%,.22) 71%,' +
-    'hsla(0,0%,0%,.12) 77.5%,' +
-    'hsla(0,0%,0%,.05) 84.5%,' +
-    'hsla(0,0%,0%,.011) 91.9%,' +
-    'hsla(0,0%,0%,0) 100%';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use background: `linear-gradient(to bottom, ${gradientStopsFadeDark});` instead  */
-const gradientToBottomStyle = {
-    background: `linear-gradient(to bottom, ${gradientStopsFadeDark});`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. background: `linear-gradient(to top, ${gradientStopsFadeDark});` instead  */
-const gradientToTopStyle = {
-    background: `linear-gradient(to top, ${gradientStopsFadeDark});`,
-};
-
-const breakpointBase = 0;
-
-const breakpointLg = 1300;
-
-const breakpointL = breakpointLg;
-
-const breakpointMd = 1000;
-
-const breakpointM = breakpointMd;
-
-const breakpointSm = 760;
-
-const breakpointS = breakpointSm;
-
-const breakpointXl = 1760;
-
-const breakpointXL = breakpointXl;
-
-const breakpointXs = 480;
-
-const breakpointXS = breakpointXs;
-
-const breakpoint2Xl = 1920;
-
-const breakpointXXL = breakpoint2Xl;
-
-const breakpoint = {
-    base: breakpointBase,
-    xs: breakpointXS,
-    s: breakpointS,
-    m: breakpointM,
-    l: breakpointL,
-    xl: breakpointXL,
-    xxl: breakpointXXL,
-};
-
-function getMediaQueryMin(min) {
-    return `@media(min-width:${breakpoint[min]}px)`;
-}
-
-const spacingFluidMd = 'clamp(16px, 1.25vw + 12px, 36px)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidMd instead. */
-const spacingFluidMedium = spacingFluidMd;
-
-const gridGap = spacingFluidMedium;
-
-const _gridWidthMax = '2560px';
-// fluid sizing calculated by https://fluidtypography.com/#app-get-started
-const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
-const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
-const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
-
-const columnMap = {
-    narrow: 4,
-    basic: 2,
-    extended: 1,
-};
-const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
-const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
-const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
-const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
-const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
-
-const gridFullOffset = _gridPadding;
-
-const gridWideOffsetBase = _gridSafeZoneBase;
-
-const gridWideOffsetS = _gridSafeZoneS;
-
-const gridWideOffsetXXL = `calc(${_gridPadding} + ${_gridSafeZoneXXL})`;
-
-const gridWideOffset = {
-    base: gridWideOffsetBase,
-    s: gridWideOffsetS,
-    xxl: gridWideOffsetXXL,
-};
-
-const gridExtendedOffsetBase = _gridSafeZoneBase;
-
-const gridExtendedOffsetS = _getGridOffsetS('extended');
-
-const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
-
-const gridExtendedOffset = {
-    base: gridExtendedOffsetBase,
-    s: gridExtendedOffsetS,
-    xxl: gridExtendedOffsetXXL,
-};
-
-const gridBasicOffsetBase = _gridSafeZoneBase;
-
-const gridBasicOffsetS = _getGridOffsetS('basic');
-
-const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
-
-const gridBasicOffset = {
-    base: gridBasicOffsetBase,
-    s: gridBasicOffsetS,
-    xxl: gridBasicOffsetXXL,
-};
-
-const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
-
-function getMediaQueryMax(max) {
-    return `@media(max-width:${breakpoint[max] - 1}px)`;
-}
-
-const durationLg = '.6s';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use durationLg instead. */
-const motionDurationLong = durationLg;
-
-const durationMd$1 = '.4s';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use durationMd instead. */
-const motionDurationModerate = durationMd$1;
-
-const durationSm$1 = '.25s';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use durationSm instead. */
-const motionDurationShort = durationSm$1;
-
-const durationXl$1 = '1.2s';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use durationXl instead. */
-const motionDurationVeryLong = durationXl$1;
-
-const easeInOut = 'cubic-bezier(.25,.1,.25,1)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use easeInOut instead. */
-const motionEasingBase = easeInOut;
-
-const easeIn = 'cubic-bezier(0,0,.2,1)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use easeIn instead. */
-const motionEasingIn = easeIn;
-
-const easeOut = 'cubic-bezier(.4,0,.5,1)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use easeOut instead. */
-const motionEasingOut = easeOut;
-
-const shadowLg = '0px 8px 40px rgba(0,0,0,.16)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use boxShadow: shadowLg instead. */
-const dropShadowHighStyle = {
-    boxShadow: shadowLg,
-};
-
-const spacingFluidLg = 'clamp(32px, 2.75vw + 23px, 76px)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidLg instead. */
-const spacingFluidLarge = spacingFluidLg;
-
-const spacingFluidSm = 'clamp(8px, 0.5vw + 6px, 16px)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidSm instead. */
-const spacingFluidSmall = spacingFluidSm;
-
-const spacingFluidXs = 'clamp(4px, 0.25vw + 3px, 8px)';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidXs instead. */
-const spacingFluidXSmall = spacingFluidXs;
-
-const spacingStaticMd$1 = '16px';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticMd instead. */
-const spacingStaticMedium = spacingStaticMd$1;
-
-const spacingStaticSm$2 = '8px';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticSm instead. */
-const spacingStaticSmall = spacingStaticSm$2;
-
-const spacingStaticXs$3 = '4px';
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticXs instead. */
-const spacingStaticXSmall = spacingStaticXs$3;
-
-const spacingStaticXs$2 = spacingStaticXs$3;
-
-const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
-const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseHeadingSm instead. */
-const headingSmallStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingSmall}${_headingFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseHeadingMd instead. */
-const headingMediumStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingMedium}${_headingFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseHeadingXl instead. */
-const headingXLargeStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingXLarge}${_headingFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseHeading2Xl instead. */
-const headingXXLargeStyle = {
-    font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
-};
-
-const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
-const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseText2Xs instead. */
-const textXXSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextXs instead. */
-const textXSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextSm instead. */
-const textSmallStyle = {
-    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
-};
-
-/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextMd instead. */
-const textMediumStyle = {
-    font: `${_textFontPartA}${fontSizeTextMedium}${_textFontPartB}`,
-};
-
-const proseTextSmStyle = {
-    font: `normal normal ${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
-};
-
 const alphaDisabled = 0.4;
 
 const blurFrosted = 'var(--p-blur-frosted)';
@@ -433,9 +80,9 @@ const colorWarningFrosted = 'var(--p-color-warning-frosted)';
 
 const colorWarningMedium = 'var(--p-color-warning-medium)';
 
-const fontPorscheNext = 'var(--p-font-porsche-next)';
+const fontPorscheNext$1 = 'var(--p-font-porsche-next)';
 
-const leadingNormal = 'var(--p-leading-normal)';
+const leadingNormal$1 = 'var(--p-leading-normal)';
 
 const typescale2Xl = 'var(--p-typescale-2xl)';
 
@@ -451,7 +98,7 @@ const typescaleLg = 'var(--p-typescale-lg)';
 
 const typescaleMd = 'var(--p-typescale-md)';
 
-const typescaleSm = 'var(--p-typescale-sm)';
+const typescaleSm$1 = 'var(--p-typescale-sm)';
 
 const typescaleXl = 'var(--p-typescale-xl)';
 
@@ -459,16 +106,34 @@ const typescaleXs$1 = 'var(--p-typescale-xs)';
 
 const fontWeightBold = 'var(--p-font-weight-bold)';
 
-const fontWeightNormal = 'var(--p-font-weight-normal)';
+const fontWeightNormal$1 = 'var(--p-font-weight-normal)';
 
 const fontWeightSemibold = 'var(--p-font-weight-semibold)';
 
-const durationMd = 'var(--p-duration-md)';
+const durationLg = 'var(--p-duration-lg)';
+
+const durationMd$1 = 'var(--p-duration-md)';
 
 const durationSm = 'var(--p-duration-sm)';
 
 const durationXl = 'var(--p-duration-xl)';
 
+const easeIn$1 = 'var(--p-ease-in)';
+
+const easeInOut = 'var(--p-ease-in-out)';
+
+const easeOut$1 = 'var(--p-ease-out)';
+
+const shadowLg = 'var(--p-shadow-lg)';
+
+const spacingFluidLg = 'var(--p-spacing-fluid-lg)';
+
+const spacingFluidMd$1 = 'var(--p-spacing-fluid-md)';
+
+const spacingFluidSm = 'var(--p-spacing-fluid-sm)';
+
+const spacingFluidXs = 'var(--p-spacing-fluid-xs)';
+
 const spacingStaticMd = 'var(--p-spacing-static-md)';
 
 const spacingStaticSm$1 = 'var(--p-spacing-static-sm)';
@@ -480,20 +145,17 @@ const forcedColorsMediaQuery = (style) => {
 };
 
 const motionDurationMap = {
-    short: motionDurationShort,
-    moderate: motionDurationModerate,
-    long: motionDurationLong,
-    veryLong: motionDurationVeryLong,
+    short: durationSm,
+    moderate: durationMd$1,
+    long: durationLg,
+    veryLong: durationXl,
 };
 const motionEasingMap = {
-    base: motionEasingBase,
-    in: motionEasingIn,
-    out: motionEasingOut,
+    base: easeInOut,
+    in: easeIn$1,
+    out: easeOut$1,
     linear: 'linear',
 };
-const dismissButtonJssStyle = {
-    '--p-internal-button-scaling': 0.5,
-};
 const cssVariableTransitionDuration = '--p-transition-duration';
 const cssVariableAnimationDuration = '--p-animation-duration';
 const getAnimation = (name, duration = 'short', easing = 'base') => {
@@ -514,7 +176,7 @@ const addImportantToEachRule = (input) => {
 };
 const getFocusBaseStyles = (offset = 2) => {
     return {
-        outline: `${borderWidthBase} solid ${colorFocus}`,
+        outline: `2px solid ${colorFocus}`,
         outlineOffset: `${offset}px`,
         ...forcedColorsMediaQuery({
             outlineColor: 'Highlight',
@@ -582,6 +244,14 @@ const hoverMediaQuery = (style) => {
     return { '@media(hover:hover)': style };
 };
 
+/**
+ * Utility to wrap JSS styles in `@media (pointer: coarse)`,
+ * which targets touch devices with an imprecise pointer.
+ */
+const pointerCoarseMediaQuery = (style) => {
+    return { '@media(pointer:coarse)': style };
+};
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -3757,15 +3427,209 @@ function requireDist () {
 		};
 	}
 
-	dist = jssCombineAndSortMQ;
-	return dist;
+	dist = jssCombineAndSortMQ;
+	return dist;
+}
+
+var distExports = requireDist();
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
+
+const isDisabledOrLoading = (disabled, loading) => {
+    return disabled || loading;
+};
+
+const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
+const fontFamily = fontPorscheNext;
+
+const leadingNormal = 'calc(6px + 2.125ex)';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
+const fontLineHeight = leadingNormal;
+
+const typescaleSm = '1rem';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+const fontSizeTextSmall = typescaleSm;
+
+const typescaleXs = '.875rem';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
+const fontSizeTextXSmall = typescaleXs;
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+const fontStyleNormal = 'normal';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+const fontVariant = 'normal';
+
+const fontWeightNormal = 400;
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
+const fontWeightRegular = fontWeightNormal;
+
+const gradientStopsFadeDark = 'hsla(0,0%,0%,.8) 0%,' +
+    'hsla(0,0%,0%,.8) 8.1%,' +
+    'hsla(0,0%,0%,.8) 15.5%,' +
+    'hsla(0,0%,0%,.8) 22.5%,' +
+    'hsla(0,0%,0%,.78) 29%,' +
+    'hsla(0,0%,0%,.73) 35.3%,' +
+    'hsla(0,0%,0%,.67) 41.2%,' +
+    'hsla(0,0%,0%,.6) 47.1%,' +
+    'hsla(0,0%,0%,.52) 52.9%,' +
+    'hsla(0,0%,0%,.44) 58.8%,' +
+    'hsla(0,0%,0%,.33) 64.7%,' +
+    'hsla(0,0%,0%,.22) 71%,' +
+    'hsla(0,0%,0%,.12) 77.5%,' +
+    'hsla(0,0%,0%,.05) 84.5%,' +
+    'hsla(0,0%,0%,.011) 91.9%,' +
+    'hsla(0,0%,0%,0) 100%';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use background: `linear-gradient(to bottom, ${gradientStopsFadeDark});` instead  */
+const gradientToBottomStyle = {
+    background: `linear-gradient(to bottom, ${gradientStopsFadeDark});`,
+};
+
+/** @deprecated since v4.0.0, will be removed with next major release. background: `linear-gradient(to top, ${gradientStopsFadeDark});` instead  */
+const gradientToTopStyle = {
+    background: `linear-gradient(to top, ${gradientStopsFadeDark});`,
+};
+
+const breakpointBase = 0;
+
+const breakpointLg = 1300;
+
+const breakpointL = breakpointLg;
+
+const breakpointMd = 1000;
+
+const breakpointM = breakpointMd;
+
+const breakpointSm = 760;
+
+const breakpointS = breakpointSm;
+
+const breakpointXl = 1760;
+
+const breakpointXL = breakpointXl;
+
+const breakpointXs = 480;
+
+const breakpointXS = breakpointXs;
+
+const breakpoint2Xl = 1920;
+
+const breakpointXXL = breakpoint2Xl;
+
+const breakpoint = {
+    base: breakpointBase,
+    xs: breakpointXS,
+    s: breakpointS,
+    m: breakpointM,
+    l: breakpointL,
+    xl: breakpointXL,
+    xxl: breakpointXXL,
+};
+
+function getMediaQueryMin(min) {
+    return `@media(min-width:${breakpoint[min]}px)`;
+}
+
+const spacingFluidMd = 'clamp(16px, 1.25vw + 12px, 36px)';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidMd instead. */
+const spacingFluidMedium = spacingFluidMd;
+
+const gridGap = spacingFluidMedium;
+
+const _gridWidthMax = '2560px';
+// fluid sizing calculated by https://fluidtypography.com/#app-get-started
+const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
+const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
+const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
+
+const columnMap = {
+    narrow: 4,
+    basic: 2,
+    extended: 1,
+};
+const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
+const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
+const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
+const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
+const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
+
+const gridFullOffset = _gridPadding;
+
+const gridWideOffsetBase = _gridSafeZoneBase;
+
+const gridWideOffsetS = _gridSafeZoneS;
+
+const gridWideOffsetXXL = `calc(${_gridPadding} + ${_gridSafeZoneXXL})`;
+
+const gridWideOffset = {
+    base: gridWideOffsetBase,
+    s: gridWideOffsetS,
+    xxl: gridWideOffsetXXL,
+};
+
+const gridExtendedOffsetBase = _gridSafeZoneBase;
+
+const gridExtendedOffsetS = _getGridOffsetS('extended');
+
+const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
+
+const gridExtendedOffset = {
+    base: gridExtendedOffsetBase,
+    s: gridExtendedOffsetS,
+    xxl: gridExtendedOffsetXXL,
+};
+
+const gridBasicOffsetBase = _gridSafeZoneBase;
+
+const gridBasicOffsetS = _getGridOffsetS('basic');
+
+const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
+
+const gridBasicOffset = {
+    base: gridBasicOffsetBase,
+    s: gridBasicOffsetS,
+    xxl: gridBasicOffsetXXL,
+};
+
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+function getMediaQueryMax(max) {
+    return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
-var distExports = requireDist();
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
+const durationMd = '.4s';
 
-const isDisabledOrLoading = (disabled, loading) => {
-    return disabled || loading;
+/** @deprecated since v4.0.0, will be removed with next major release. Use durationMd instead. */
+const motionDurationModerate = durationMd;
+
+const easeIn = 'cubic-bezier(0,0,.2,1)';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeIn instead. */
+const motionEasingIn = easeIn;
+
+const easeOut = 'cubic-bezier(.4,0,.5,1)';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeOut instead. */
+const motionEasingOut = easeOut;
+
+const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
+const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextXs instead. */
+const textXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
+};
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextSm instead. */
+const textSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
 };
 
 const parseJSON = (prop) => {
@@ -3903,7 +3767,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.4"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4042,7 +3906,7 @@ const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky
     const paddingBlock = `calc(28px * (${compactFactor} - 0.64285714) + 6px)`;
     const paddingInline = `calc(11.2px * (${compactFactor} - 0.64285714) + 12px)`;
     const gap = `calc(11.2px * (${compactFactor} - 0.64285714) + 4px)`;
-    const marginTop = `calc(28px * (${compactFactor} - 0.64285714) + 6px)`;
+    const paddingTop = `calc(28px * (${compactFactor} - 0.64285714) + 6px)`;
     const isIconAlignedStart = alignMarker === 'start';
     return getCss({
         '@global': {
@@ -4091,12 +3955,12 @@ const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky
                 font: 'inherit',
                 fontWeight: fontWeightSemibold,
                 ...buildResponsiveStyles(size, (sizeValue) => ({
-                    fontSize: sizeValue === 'medium' ? typescaleMd : typescaleSm,
+                    fontSize: sizeValue === 'medium' ? typescaleMd : typescaleSm$1,
                 })),
             },
             details: {
                 all: 'unset',
-                font: `${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`, // enables font inheritance for slotted content
+                font: `${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`, // enables font inheritance for slotted content
                 color: colorPrimary, // enables color inheritance for slotted content
                 display: 'grid',
                 gridTemplate: `repeat(2, auto) / ${hasSummaryBefore ? 'auto ' : ''}${isIconAlignedStart ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr) auto'}${hasSummaryAfter ? ' auto ' : ''}`,
@@ -4104,7 +3968,10 @@ const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky
                 alignItems: 'center',
                 padding: `var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock}) var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
                 background: backgroundMap$1[background],
-                ...(background === 'frosted' && frostedGlassStyle),
+                ...(background === 'frosted' && {
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
+                }),
                 borderRadius: `var(${legacyRadiusSmall}, ${radiusXl})`,
                 ...forcedColorsMediaQuery({
                     outline: '1px solid CanvasText',
@@ -4124,12 +3991,15 @@ const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky
                     gridTemplateRows: '0fr',
                     visibility: 'hidden', // since `::details-content` and `allow-discrete` transition doesn't work in Safari we need to take care ourselves for visibility state to be a11y compliant
                     // as soon as all browsers are supporting `allow-discrete` reliable, visibility transition shouldn't be necessary anymore
-                    transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}), ${getTransition('grid-template-rows', duration, easing)}, ${getTransition('margin-top', duration, easing)}, ${getTransition('opacity', duration, easing)}`,
+                    transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}), ${getTransition('grid-template-rows', duration, easing)}, ${getTransition('padding-top', duration, easing)}, ${getTransition('opacity', duration, easing)}`,
                 },
                 '&[open]': {
                     '& > div': {
                         opacity: 1,
-                        marginTop,
+                        paddingTop,
+                        zIndex: 2, // Ensure details are above summary when using custom padding
+                        paddingInline: `var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
+                        marginInline: `calc(-1 * var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline}))`,
                         // as soon as all browsers support calc-size(auto) to be transitionable, we can remove the grid-template-rows rule and animation
                         gridTemplateRows: '1fr',
                         visibility: 'inherit', // since `::details-content` and `allow-discrete` transition doesn't work in Safari we need to take care ourselves for visibility state to be a11y compliant
@@ -4199,93 +4069,6 @@ const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky
 const TOAST_Z_INDEX = 999999;
 const BANNER_Z_INDEX = 99;
 
-const getBannerPopoverResetStyles = () => {
-    return {
-        position: 'fixed',
-        margin: 0,
-        padding: 0,
-        inset: 'auto', // ua popover reset
-        width: 'auto', // ua popover reset
-        height: 'auto', // ua popover reset
-        maxWidth: '100%', // If component is wrapped in container with maxWidth
-        border: '0', // ua popover reset
-        outline: '0', // ua popover reset
-        overflow: 'visible', // ua popover reset
-    };
-};
-
-/**
- * @css-variable {"name": "--p-banner-position-top", "description": "Position top of banner", "defaultValue": "56px"}
- * @css-variable {"name": "--p-banner-position-bottom", "description": "Position bottom of banner. Only has an effect below breakpoint 's'.", "defaultValue": "56px"}
- */
-const cssVariableTop = '--p-banner-position-top';
-const cssVariableBottom = '--p-banner-position-bottom';
-const cssVariableZIndex = '--p-internal-banner-z-index';
-const topBottomFallback = '56px';
-const getComponentCss$18 = (isOpen) => {
-    const easing = isOpen ? 'in' : 'out';
-    const transition = `visibility 0s linear var(${cssVariableTransitionDuration}, ${isOpen ? '0s' : motionDurationLong}), ${getTransition('transform', 'moderate', easing)}`;
-    const transitionChild = `${getTransition('opacity', 'moderate', easing)}`;
-    return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    all: 'unset',
-                    ...getBannerPopoverResetStyles(),
-                    inset: `auto ${gridExtendedOffsetBase} var(${cssVariableBottom},${topBottomFallback})`,
-                    zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
-                    borderRadius: `var(${legacyRadiusMedium}, ${radiusXl})`, // needed for rounded box-shadow
-                    '&::backdrop': {
-                        display: 'none',
-                    },
-                    '& > :first-child': {
-                        opacity: 0,
-                        ...dropShadowHighStyle,
-                        ...(isOpen
-                            ? {
-                                opacity: 1,
-                            }
-                            : {
-                                opacity: 0,
-                            }),
-                        transition: transitionChild,
-                        // // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
-                        '@supports (transition-behavior: allow-discrete)': {
-                            transition: `${transitionChild}, overlay var(${cssVariableTransitionDuration}, ${motionDurationModerate}) ${motionEasingOut} allow-discrete`,
-                        },
-                    },
-                    ...(isOpen
-                        ? {
-                            visibility: 'inherit',
-                            pointerEvents: 'inherit',
-                            transform: 'translate3d(0,0,0)',
-                        }
-                        : {
-                            visibility: 'hidden',
-                            pointerEvents: 'none',
-                            transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
-                        }),
-                    transition,
-                    // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
-                    '@supports (transition-behavior: allow-discrete)': {
-                        transition: `${transition}, overlay var(${cssVariableTransitionDuration}, ${motionDurationModerate}) ${motionEasingOut} allow-discrete`,
-                    },
-                    [getMediaQueryMin('s')]: {
-                        inset: `var(${cssVariableTop},${topBottomFallback}) ${gridExtendedOffsetS} auto`,
-                        ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
-                    },
-                    [getMediaQueryMin('xxl')]: {
-                        insetInline: gridExtendedOffsetXXL,
-                    },
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-        },
-    });
-};
-
 const colorMap$3 = {
     primary: colorPrimary,
     'contrast-higher': colorContrastHigher,
@@ -4300,17 +4083,38 @@ const colorMap$3 = {
     inherit: 'currentcolor',
 };
 
+const notificationBackgroundMap = {
+    info: colorInfoFrosted,
+    warning: colorWarningFrosted,
+    success: colorSuccessFrosted,
+    error: colorErrorFrosted,
+};
+
+const notificationColorMap = {
+    info: colorInfo,
+    warning: colorWarning,
+    success: colorSuccess,
+    error: colorError,
+};
+
+const notificationIconMap = {
+    info: getInlineSVGBackgroundImage('<path d="M12 3c-4.95 0-9 4.05-9 9s4.05 9 9 9 9-4.05 9-9-4.05-9-9-9m-.75 4.5h1.5V9h-1.5zm1.5 8.5h-1.5v-6h1.5z"/>'),
+    warning: getInlineSVGBackgroundImage('<path d="M21.58 18.26 13.3 3.75A1.5 1.5 0 0 0 12 3a1.5 1.5 0 0 0-1.3.75l-8.28 14.5a1.5 1.5 0 0 0 0 1.5c.28.47.76.75 1.3.75h16.56a1.5 1.5 0 0 0 1.3-2.25M13 17.5h-2v-2h2zm-.4-3.5h-1.2L11 8.5h2z"/>'),
+    success: getInlineSVGBackgroundImage('<path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18m-1.26 12.69-3.8-3.8 1.07-1.05 2.73 2.73 5.25-5.26 1.06 1.06z"/>'),
+    error: getInlineSVGBackgroundImage('<path d="M18 3H6a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h4l2 2 2-2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-5 3.5-.4 5.5h-1.2L11 6.5zm-2 7h2v2h-2z"/>'),
+};
+
 const sizeMap$1 = {
     'xx-small': typescale2Xs, // deprecated (alias)
     'x-small': typescaleXs$1, // deprecated (alias)
-    small: typescaleSm, // deprecated (alias)
+    small: typescaleSm$1, // deprecated (alias)
     medium: typescaleMd, // deprecated (alias)
     large: typescaleLg, // deprecated (alias)
     'x-large': typescaleXl, // deprecated (alias)
     'xx-large': typescale2Xl, // deprecated (alias)
     '2xs': typescale2Xs,
     xs: typescaleXs$1,
-    sm: typescaleSm,
+    sm: typescaleSm$1,
     md: typescaleMd,
     lg: typescaleLg,
     xl: typescaleXl,
@@ -4322,13 +4126,144 @@ const sizeMap$1 = {
 };
 
 const weightMap = {
-    regular: fontWeightNormal, // deprecated
+    regular: fontWeightNormal$1, // deprecated
     'semi-bold': fontWeightSemibold, // deprecated
-    normal: fontWeightNormal,
+    normal: fontWeightNormal$1,
     semibold: fontWeightSemibold,
     bold: fontWeightBold,
 };
 
+/**
+ * @css-variable {"name": "--p-banner-max-w", "description": "Defines the maximum width of the Banner.", "defaultValue": "100ch"}
+ */
+const cssVarMaxWidth = '--p-banner-max-w';
+/**
+ * @css-variable {"name": "--p-banner-top", "description": "Defines the distance from the top of the viewport. Only takes effect when the `position` property is set to `top` (at the respective breakpoint).", "defaultValue": "56px"}
+ */
+const cssVarTop = '--p-banner-top';
+/**
+ * @css-variable {"name": "--p-banner-bottom", "description": "Defines the distance from the bottom of the viewport. Only takes effect when the `position` property is set to `bottom` (at the respective breakpoint).", "defaultValue": "56px"}
+ */
+const cssVarBottom = '--p-banner-bottom';
+/**
+ * @css-variable {"name": "--p-banner-inset-x", "description": "Defines the horizontal offset of the Banner from the edges of the viewport.", "defaultValue": "max(22px, 10.625vw - 12px)"}
+ */
+const cssVarInsetX = '--p-banner-inset-x';
+const cssVarPositionTop = '--p-banner-position-top'; // deprecated (aliased)
+const cssVarPositionBottom = '--p-banner-position-bottom'; // deprecated (aliased)
+const topBottomFallback = '56px';
+const cssVariableZIndex = '--p-internal-banner-z-index';
+const getComponentCss$18 = (isOpen, position, state, hasDismissButton) => {
+    const duration = isOpen ? 'moderate' : 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const transition = `visibility 0s linear var(${cssVariableTransitionDuration},${isOpen ? '0s' : motionDurationMap[duration]}),${getTransition('transform', duration, easing)}`;
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'contents',
+                ...addImportantToEachRule({
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
+                all: 'unset',
+                display: 'block',
+                gridArea: '1/2',
+                font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                color: colorPrimary,
+            },
+            'slot[name="description"],p': {
+                all: 'unset',
+                display: 'block',
+                gridArea: '2/2',
+                marginTop: spacingStaticXs$1,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                color: colorPrimary,
+            },
+            '[popover]': {
+                all: 'unset',
+                position: 'fixed',
+                zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, // Fallback for browsers lacking `transition-behavior: allow-discrete` — keeps the banner visible during fade-out after leaving the top layer.
+                ...buildResponsiveStyles(position, (v) => ({
+                    ...(v === 'top' && {
+                        insetBlock: `var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback})) auto`,
+                        ...(!isOpen && {
+                            transform: `translate3d(-50%,calc(-100% - var(${cssVarTop},var(${cssVarPositionTop},${topBottomFallback}))),0)`,
+                        }),
+                    }),
+                    ...(v === 'bottom' && {
+                        insetBlock: `auto var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback}))`,
+                        ...(!isOpen && {
+                            transform: `translate3d(-50%,calc(var(${cssVarBottom},var(${cssVarPositionBottom},${topBottomFallback})) + 100%),0)`,
+                        }),
+                    }),
+                })),
+                left: '50vw',
+                width: `min(calc(100vw - 2 * var(${cssVarInsetX},${gridExtendedOffsetBase})),var(${cssVarMaxWidth},100ch))`,
+                '&:popover-open': {
+                    overlay: 'auto',
+                },
+                '&::backdrop': {
+                    display: 'none',
+                },
+                visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
+                pointerEvents: 'none', // element can't be interacted with mouse
+                ...(isOpen && {
+                    visibility: 'inherit',
+                    pointerEvents: 'inherit',
+                    transform: 'translate3d(-50%,0,0)',
+                }),
+                transition,
+                // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
+                '@supports (transition-behavior: allow-discrete)': {
+                    transition: `${transition},${getTransition('overlay', duration, easing)} allow-discrete`,
+                },
+            },
+        },
+        banner: {
+            display: 'grid',
+            gridTemplateColumns: `auto minmax(0, 1fr) auto auto`,
+            padding: spacingStaticMd,
+            borderRadius: `var(${legacyRadiusMedium}, ${radius2Xl})`,
+            background: notificationBackgroundMap[state],
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+            boxShadow: shadowLg,
+            opacity: isOpen ? 1 : 0, // it's necessary to spit up opacity transition from [popover], otherwise frosted effect won't render
+            transition: getTransition('opacity', duration, easing),
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
+            '&::before': {
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/1',
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    marginInlineEnd: spacingStaticSm$1,
+                    background: notificationColorMap[state],
+                    WebkitMask: `${notificationIconMap[state]} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${notificationIconMap[state]} center/contain no-repeat`,
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
+                },
+            },
+        },
+        ...(hasDismissButton && {
+            dismiss: {
+                gridArea: `1/4/3`,
+                marginTop: `calc(-1 * ${spacingStaticXs$1})`,
+                marginInlineEnd: `calc(-1 * ${spacingStaticXs$1})`,
+                marginInlineStart: spacingStaticMd,
+            },
+        }),
+    });
+};
+
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
@@ -4369,7 +4304,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             cursor: 'pointer',
             color: colorMap$3[color],
             textDecoration: underline ? 'underline' : 'none',
-            font: `${fontWeightNormal} ${typescaleSm}/${leadingNormal} ${fontPorscheNext}`,
+            font: `${fontWeightNormal$1} ${typescaleSm$1}/${leadingNormal$1} ${fontPorscheNext$1}`,
             ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
                 gap: hidelabelValue ? 0 : spacingStaticXs$1,
             })), buildResponsiveStyles(stretch, (stretchValue) => ({
@@ -4457,7 +4392,7 @@ const getComponentCss$17 = (icon, iconSource, active, isDisabled, isLoading, isD
             icon: {
                 position: 'absolute',
                 top: 0,
-                left: `calc(50% - ${leadingNormal} / 2)`,
+                left: `calc(50% - ${leadingNormal$1} / 2)`,
             },
         }),
         // .loading
@@ -4516,7 +4451,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                 all: 'unset',
                 zIndex: 3,
                 maxWidth: '34.375rem',
-                ...textMediumStyle,
+                font: `${fontWeightNormal$1} ${typescaleMd} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorPrimary,
                 hyphens: 'inherit',
                 ...mergeDeep(buildResponsiveStyles(size, (v) => ({
@@ -4528,7 +4463,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
         },
         root: {
             display: 'grid',
-            gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
+            gridTemplate: `${spacingFluidMd$1} auto minmax(0px, 1fr) auto ${spacingFluidMd$1}/${spacingFluidMd$1} minmax(0px, 1fr) ${spacingFluidMd$1}`,
             width: '100%', // necessary in case tile content overflows in grid or flex context
             // Safari workaround to scale the tile properly
             '@supports (-webkit-hyphens: auto)': {
@@ -4547,14 +4482,14 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                         ? {
                             gridArea: '1/1/3/-1',
                             background: gradientToBottomStyle.background.replaceAll('0,0%,0%,', `from ${colorCanvas} h s l / `),
-                            marginBottom: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            marginBottom: `calc(${spacingFluidLg} * -1)`, // to increase the gradient area without reserving additional layout space
                             borderStartStartRadius: 'inherit',
                             borderStartEndRadius: 'inherit',
                         }
                         : {
                             gridArea: '4/1/6/-1',
                             background: gradientToTopStyle.background.replaceAll('0,0%,0%,', `from ${colorCanvas} h s l / `),
-                            marginTop: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            marginTop: `calc(${spacingFluidLg} * -1)`, // to increase the gradient area without reserving additional layout space
                             borderEndStartRadius: 'inherit',
                             borderEndEndRadius: 'inherit',
                         }),
@@ -4580,7 +4515,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                 ? {
                     display: 'grid',
                     gridTemplateColumns: 'minmax(0,1fr) auto',
-                    columnGap: spacingStaticMedium,
+                    columnGap: spacingStaticMd,
                 }
                 : {
                     display: 'flex',
@@ -4600,7 +4535,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
-            marginTop: spacingStaticMedium,
+            marginTop: spacingStaticMd,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -4654,8 +4589,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             width: '100%', // Allows for setting a width on the host
             minWidth: 'min-content', // Do not shrink beyond icon size + padding + border + label
             boxSizing: 'border-box',
-            ...frostedGlassStyle,
-            ...textSmallStyle,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+            font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             borderRadius: 'inherit',
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
@@ -4692,8 +4628,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
         label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle),
         ...(hasIcon && {
             icon: {
-                width: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
-                height: fontLineHeight, // ensure space is already reserved until icon component is loaded (ssr)
+                font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct width/height definition based on ex-unit
+                width: leadingNormal$1, // ensure space is already reserved until icon component is loaded (ssr)
+                height: leadingNormal$1, // ensure space is already reserved until icon component is loaded (ssr)
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     marginInlineStart: hideLabelValue ? 0 : iconMarginInlineStart, // compensate white space of svg icon and optimize visual alignment
                 })),
@@ -4720,9 +4657,6 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         },
         ...(isLoading && {
             spinner: {
-                width: fontLineHeight,
-                height: fontLineHeight,
-                pointerEvents: 'none',
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
@@ -4770,8 +4704,6 @@ const colorFrostedSoftDark = palette.dark.grey['100a'];
 
 const colorPrimaryDark = palette.dark.grey["950"];
 
-const typescaleXs = '.875rem';
-
 const spacingStaticSm = '8px';
 
 const spacingStaticXs = '4px';
@@ -4855,7 +4787,7 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             h2: {
                 all: 'unset',
                 padding: spacingStaticXs, // preserve enough spacing for focus state
-                font: textXSmallStyle.font,
+                font: `${fontWeightNormal$1} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorPrimary,
                 textOverflow: 'ellipsis',
                 overflow: 'hidden',
@@ -4902,13 +4834,13 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1fr)',
             gap: spacingBase,
             alignItems: 'center',
-            padding: `${spacingStaticSmall} ${spacingBase}`,
+            padding: `${spacingStaticSm$1} ${spacingBase}`,
             '&:focus-visible': {
                 outline: 'none',
             },
             '&__area': {
                 display: 'flex',
-                gap: spacingStaticSmall,
+                gap: spacingStaticSm$1,
                 alignItems: 'center',
                 '&--start': {
                     justifyContent: 'flex-start',
@@ -5006,7 +4938,7 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
         footer: {
             zIndex: 5,
             gridArea: 'footer',
-            padding: `${spacingBase} ${spacingBase} ${spacingFluidSmall}`,
+            padding: `${spacingBase} ${spacingBase} ${spacingFluidSm}`,
             position: 'sticky',
             bottom: 0,
             '&::before': {
@@ -5054,12 +4986,12 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) =>
             '&__header': {
                 zIndex: 9999999,
                 display: 'flex',
-                gap: spacingStaticSmall,
+                gap: spacingStaticSm$1,
                 alignItems: 'center',
                 position: 'sticky',
                 top: `calc(-1 * ${spacingBase})`,
                 margin: `calc(-1 * ${spacingBase}) calc(-1 * ${spacingBase}) ${spacingBase}`,
-                padding: `${spacingStaticSmall} ${spacingBase}`,
+                padding: `${spacingStaticSm$1} ${spacingBase}`,
                 minHeight: '56px',
                 boxSizing: 'border-box',
                 '&--start': {
@@ -5140,7 +5072,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
             ':host': {
                 display: 'flex',
                 ...addImportantToEachRule({
-                    gap: spacingFluidMedium, // TODO: maybe it's better to style by margin on .splide, then styles would be part of shadow dom
+                    gap: spacingFluidMd$1, // TODO: maybe it's better to style by margin on .splide, then styles would be part of shadow dom
                     flexDirection: 'column',
                     boxSizing: 'content-box', // ensures padding is added to host instead of subtracted
                     ...hostHiddenStyles,
@@ -5181,20 +5113,20 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 ...(hasHeading && {
                     [selectorHeading]: {
                         maxWidth: '56.25rem',
-                        margin: `0 0 ${hasDescription ? 0 : spacingFluidMedium}`,
-                        ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
+                        margin: `0 0 ${hasDescription ? 0 : spacingFluidMd$1}`,
+                        font: `${fontWeightNormal$1} ${headingSize === 'xx-large' ? typescale2Xl : typescaleXl} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     },
                     '::slotted([slot=heading])': {
                         margin: 0, // reset ua-style
-                        ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
+                        font: `${fontWeightNormal$1} ${headingSize === 'xx-large' ? typescale2Xl : typescaleXl} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     },
                 }),
                 // p,::slotted([slot=description])
                 ...(hasDescription && {
                     [selectorDescription]: {
                         maxWidth: '34.375rem',
-                        margin: `${spacingFluidSmall} 0 ${spacingFluidMedium}`,
-                        ...textSmallStyle,
+                        margin: `${spacingFluidSm} 0 ${spacingFluidMd$1}`,
+                        font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     },
                 }),
             }),
@@ -5207,7 +5139,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 gridTemplateColumns: 'minmax(0px,1fr) auto',
                 paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                 paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
-                ...(hasNavigation && { columnGap: spacingStaticMedium }),
+                ...(hasNavigation && { columnGap: spacingStaticMd }),
             },
             [mediaQueryXXL]: {
                 paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
@@ -5220,12 +5152,12 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 gridRowStart: '3',
                 gridColumnEnd: '-1',
                 display: 'flex',
-                gap: spacingStaticXSmall,
+                gap: spacingStaticXs$1,
                 alignSelf: 'flex-start', // relevant in case slot="header" becomes higher than nav group
             },
         },
         btn: {
-            padding: spacingStaticSmall,
+            padding: spacingStaticSm$1,
         },
         'skip-link': {
             // :focus must be used in this case, because :focus-visible is just matched on the focusable element itself, not on the host element.
@@ -5431,9 +5363,9 @@ const cssVarInternalCheckboxScaling = '--__p-checkbox-scaling';
 const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
-    const checkboxBorderWidth = borderWidthThin;
+    const checkboxBorderWidth = '1px';
     const checkboxDimension = `calc(var(${cssVarInternalCheckboxScaling}) * 1.75rem)`;
-    const checkboxMarginBlock = `max(0px, calc((${fontLineHeight} - ${checkboxDimension}) / 2))`;
+    const checkboxMarginBlock = `max(0px, calc((${leadingNormal$1} - ${checkboxDimension}) / 2))`;
     const checkboxTouchInset = `calc(-${checkboxBorderWidth} - max(0px, calc(24px - ${checkboxDimension}) / 2))`;
     return {
         all: 'unset',
@@ -5442,7 +5374,7 @@ const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
         height: checkboxDimension,
         marginBlock: checkboxMarginBlock,
         boxSizing: 'border-box',
-        font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+        font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct width and height definition based on ex-unit
         background: `var(${cssVarCheckboxBackgroundColor},${formStateBackgroundColor})`,
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
         border: `${checkboxBorderWidth} solid var(${cssVarCheckboxBorderColor},${formStateBorderColor})`,
@@ -5536,8 +5468,8 @@ const getFunctionalComponentLabelAfterStyles = () => {
             verticalAlign: 'top',
             '&::slotted(*)': {
                 ...addImportantToEachRule({
-                    marginInlineStart: spacingStaticXs$2,
-                })
+                    marginInlineStart: spacingStaticXs$1,
+                }),
             },
         },
     };
@@ -5553,7 +5485,7 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
             ...additionalLabelWrapperJssStyle,
         },
         label: {
-            ...proseTextSmStyle,
+            font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
             color: colorPrimary,
             ...(isDisabledOrLoading && {
@@ -5570,10 +5502,10 @@ const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, add
             // styling for the description
             '&:is(span)': {
                 cursor: 'unset',
-                fontSize: typescaleXs,
+                fontSize: typescaleXs$1,
                 color: colorContrastHigh,
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXs$2}` })),
-                marginTop: `-${spacingStaticXs$2}`,
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `calc(-1 * ${spacingStaticXs$1})` })),
+                marginTop: `calc(-1 * ${spacingStaticXs$1})`,
             },
             ...additionalDefaultJssStyle,
         },
@@ -5586,8 +5518,8 @@ const getFunctionalComponentStateMessageStyles = (state, additionalDefaultJssSty
     return {
         message: {
             display: 'flex',
-            gap: spacingStaticXSmall,
-            ...textSmallStyle,
+            gap: spacingStaticXs$1,
+            font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             color: getThemedFormStateColors(state).formStateColor,
             transition: `${getTransition('color')}, ${getTransition('opacity')}`,
             ...additionalDefaultJssStyle,
@@ -5608,7 +5540,7 @@ const getFunctionalComponentStateMessageStyles = (state, additionalDefaultJssSty
 const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact) => {
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
     const checkboxDimension = `calc(var(${cssVarInternalCheckboxScaling}) * 1.75rem)`;
-    const labelPaddingTop = `max(0px, calc((${checkboxDimension} - ${fontLineHeight}) / 2))`;
+    const labelPaddingTop = `max(0px, calc((${checkboxDimension} - ${leadingNormal$1}) / 2))`;
     const labelPaddingInlineStart = `calc(11.2px * (var(${cssVarInternalCheckboxScaling}) - 0.64285714) + 4px)`;
     return getCss({
         '@global': {
@@ -5630,7 +5562,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         },
         root: {
             display: 'grid',
-            rowGap: spacingStaticXSmall,
+            rowGap: spacingStaticXs$1,
         },
         wrapper: {
             position: 'relative',
@@ -5642,7 +5574,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             alignItems: 'center',
             display: 'grid',
             alignSelf: 'flex-start',
-            minHeight: fontLineHeight, // necessary for compact mode
+            minHeight: leadingNormal$1, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
             ...(isDisabled && getDisabledBaseStyles()),
         },
@@ -5679,7 +5611,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
 const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle, additionalHostJssStyle) => {
-    const wrapperBorderWidth = borderWidthThin;
+    const wrapperBorderWidth = '1px';
     const wrapperHeight = `calc(var(${cssVarInternalInputBaseScaling}) * 3.5rem)`;
     const wrapperPaddingInline = `calc(22.4px * (var(${cssVarInternalInputBaseScaling}) - 0.64285714) + 8px)`;
     const wrapperGap = `calc(22.4px * (var(${cssVarInternalInputBaseScaling}) - 0.64285714) + 4px)`;
@@ -5712,14 +5644,14 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                 alignItems: 'center',
                 width: 'max(100%, 2ch)', // show at least 2 characters in very narrow containers
                 height: '100%',
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / calc(${leadingNormal$1} + 6px) ${fontPorscheNext$1}`, // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
                 textOverflow: 'ellipsis',
                 ...additionalInputJssStyle,
             },
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         wrapper: {
             display: 'flex',
@@ -5779,7 +5711,7 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact,
     const cssVarTextColor = `--p-${componentName}-text-color`;
     const cssVarBorderColor = `--p-${componentName}-border-color`;
     const { formStateBorderColor, formStateBorderHoverColor, formStateBackgroundColor } = getThemedFormStateColors(state);
-    const borderWidth = borderWidthThin;
+    const borderWidth = '1px';
     const height = `calc(var(${cssVarScalingName}) * 3.5rem)`;
     const paddingInline = `calc(22.4px * (var(${cssVarScalingName}) - 0.64285714) + 8px)`;
     const gap = `calc(22.4px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
@@ -5795,7 +5727,7 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact,
         border: `${borderWidth} solid var(${cssVarBorderColor}, ${isOpen ? formStateBorderHoverColor : formStateBorderColor})`,
         borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
         background: `var(${cssVarBackgroundColor}, ${formStateBackgroundColor})`,
-        font: textSmallStyle.font,
+        font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
         color: `var(${cssVarTextColor}, ${colorPrimary})`,
         cursor: isDisabled ? 'not-allowed' : 'pointer',
         ...(isDisabled && getDisabledBaseStyles()),
@@ -5812,9 +5744,9 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact,
 };
 
 const getButtonImageJssStyle = {
-    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct calculations based on ex-unit
+    font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct calculations based on ex-unit
     width: 'auto',
-    height: fontLineHeight,
+    height: leadingNormal$1,
     borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
 };
 
@@ -5857,8 +5789,8 @@ const getOptionJssStyle = (componentName, cssVarScalingName) => {
         gap,
         paddingBlock,
         paddingInline,
-        minHeight: fontLineHeight, // preserves height for empty option
-        ...textSmallStyle,
+        minHeight: leadingNormal$1, // preserves height for empty option
+        font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
         color: colorContrastHigh,
         cursor: 'pointer',
         textAlign: 'start',
@@ -5926,7 +5858,7 @@ const getPopoverJssStyle = (isOpen, cssVarScalingName, optionHeight) => {
         overflow: 'hidden auto',
         scrollbarWidth: 'thin', // firefox
         scrollbarColor: 'auto', // firefox
-        animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) ${keyframesName} ${motionEasingBase} forwards`,
+        animation: `var(${cssVariableAnimationDuration}, ${durationSm}) ${keyframesName} ${easeInOut} forwards`,
         filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.15))',
         background: colorCanvas,
         border: `1px solid ${colorContrastLow}`,
@@ -6040,7 +5972,7 @@ const getComponentCss$10 = (size, align, color, ellipsis) => {
         root: {
             all: 'unset',
             display: 'block',
-            font: `${fontWeightNormal} ${typescale5Xl}/${leadingNormal} ${fontPorscheNext}`,
+            font: `${fontWeightNormal$1} ${typescale5Xl}/${leadingNormal$1} ${fontPorscheNext$1}`,
             ...buildResponsiveStyles(size, (v) => ({
                 fontSize: sizeMap[v],
             })),
@@ -6106,14 +6038,14 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
-                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                from: { transform: `translate3d(0,${spacingFluidMd$1},0)` },
                 to: { transform: 'translate3d(0,0,0)' },
             },
             // unfortunately, it's not possible to use transform animation like in mobile view
             // because then a new stacking context within scroll container would be initialized
             // causing the slotted scroll container to become invisible
             '@keyframes slide-up-desktop': {
-                from: { marginBlockStart: spacingFluidMedium },
+                from: { marginBlockStart: spacingFluidMd$1 },
                 to: { marginBlockStart: '0px' },
             },
             ':host': {
@@ -6131,7 +6063,7 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
             ...preventFoucOfNestedElementsStyles,
             '::slotted(*)': {
                 [cssVariableGridTemplate]: 'auto/auto', // reset css variable to prevent inheritance
-                [cssVariableGap]: spacingFluidXSmall, // reset css variable to prevent inheritance
+                [cssVariableGap]: spacingFluidXs, // reset css variable to prevent inheritance
             },
             dialog: {
                 all: 'unset',
@@ -6142,7 +6074,8 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                 ...(isOpen
                     ? {
                         visibility: 'inherit',
-                        ...frostedGlassStyle,
+                        WebkitBackdropFilter: blurFrosted,
+                        backdropFilter: blurFrosted,
                         background: `var(${cssVarColorBackgroundShading})`,
                         transition: `${getTransition('background', backdropDurationOpen, easingOpen)}, ${getTransition('backdrop-filter', backdropDurationOpen, easingOpen)}, ${getTransition('-webkit-backdrop-filter', backdropDurationOpen, easingOpen)}`,
                     }
@@ -6162,13 +6095,13 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                         zIndex: 0,
                         display: 'grid',
                         gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
-                        gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                        gap: `var(${cssVariableGap},${spacingFluidXs})`,
                         alignContent: 'start',
                         alignItems: 'start',
                         boxSizing: 'border-box',
                         minHeight: '100%',
                         height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                        paddingBlockEnd: spacingFluidLarge,
+                        paddingBlockEnd: spacingFluidLg,
                         ...(isPrimary && {
                             animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
                         }),
@@ -6179,13 +6112,13 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                         gridArea: '3/2/auto/-2',
                         display: 'grid',
                         gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
-                        gap: `var(${cssVariableGap},${isPrimary ? spacingFluidXSmall : spacingFluidMedium})`,
+                        gap: `var(${cssVariableGap},${isPrimary ? spacingFluidXs : spacingFluidMd$1})`,
                         alignContent: 'start',
                         alignItems: 'start',
                         boxSizing: 'border-box',
                         minHeight: '100%',
                         height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                        paddingBlockEnd: spacingFluidLarge,
+                        paddingBlockEnd: spacingFluidLg,
                         animation: getAnimation('slide-up-desktop', 'moderate', 'base'),
                     }),
                 },
@@ -6224,12 +6157,12 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                     },
                 }),
             [mediaQueryMobile]: {
-                gridTemplate: `${spacingFluidMedium} auto ${spacingFluidLarge} minmax(0, 1fr)/${spacingFluidLarge} auto minmax(0, 1fr) auto ${spacingFluidLarge}`,
+                gridTemplate: `${spacingFluidMd$1} auto ${spacingFluidLg} minmax(0, 1fr)/${spacingFluidLg} auto minmax(0, 1fr) auto ${spacingFluidLg}`,
                 background: `var(${cssVarColorBackgroundBase})`,
             },
             [mediaQueryDesktop]: {
                 width: isSecondaryScrollerVisible ? `calc(${scrollerWidthDesktop} * 2)` : scrollerWidthDesktop,
-                gridTemplate: `${spacingFluidMedium} auto minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge})`,
+                gridTemplate: `${spacingFluidMd$1} auto minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLg} minmax(0, 1fr) ${spacingFluidLg})`,
                 background: `var(${cssVarColorBackgroundBase})`,
                 ...(isSecondaryScrollerVisible && {
                     background: `linear-gradient(90deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 50%,var(${cssVarColorBackgroundSurface}) 50%,var(${cssVarColorBackgroundSurface}) 100%)`,
@@ -6319,9 +6252,9 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                 '--p-color-frosted': colorFrostedDark,
                 '--p-color-frosted-soft': colorFrostedSoftDark,
                 position: 'absolute',
-                insetInlineStart: `calc(100% + ${spacingFluidSmall})`,
-                insetBlockStart: spacingFluidSmall,
-                padding: spacingStaticSmall,
+                insetInlineStart: `calc(100% + ${spacingFluidSm})`,
+                insetBlockStart: spacingFluidSm,
+                padding: spacingStaticSm$1,
             },
         },
         back: {
@@ -6330,11 +6263,10 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
                 isPrimary && {
                 [mediaQueryMobile]: {
                     display: 'block',
-                    marginTop: '2px', // compensate negative margin of ::pseudo background of button-pure
                     gridArea: '2/2',
                     width: 'fit-content',
                     height: 'fit-content',
-                    placeSelf: 'start',
+                    placeSelf: 'center',
                     zIndex: 2,
                 },
             }),
@@ -6346,15 +6278,15 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
-                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                from: { transform: `translate3d(0,${spacingFluidMd$1},0)` },
                 to: { transform: 'translate3d(0,0,0)' },
             },
             '@keyframes slide-up-desktop-primary': {
-                from: { marginBlockStart: spacingFluidMedium },
+                from: { marginBlockStart: spacingFluidMd$1 },
                 to: { marginBlockStart: '0px' },
             },
             '@keyframes slide-up-desktop-secondary': {
-                from: { marginBlockStart: spacingFluidMedium },
+                from: { marginBlockStart: spacingFluidMd$1 },
                 to: { marginBlockStart: '0px' },
             },
             ':host': {
@@ -6394,13 +6326,13 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                             zIndex: 0,
                             display: 'grid',
                             gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
-                            gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                            gap: `var(${cssVariableGap},${spacingFluidXs})`,
                             alignContent: 'start',
                             alignItems: 'start',
                             boxSizing: 'border-box',
                             minHeight: '100%',
                             height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                            paddingBlockEnd: spacingFluidLarge,
+                            paddingBlockEnd: spacingFluidLg,
                             animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
                         }),
                         ...((isPrimary || isCascade) && {
@@ -6412,18 +6344,18 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                             gridArea: '3/2/auto/-2',
                             display: 'grid',
                             gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
-                            gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                            gap: `var(${cssVariableGap},${spacingFluidXs})`,
                             alignContent: 'start',
                             alignItems: 'start',
                             boxSizing: 'border-box',
                             minHeight: '100%',
                             height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                            paddingBlockEnd: spacingFluidLarge,
+                            paddingBlockEnd: spacingFluidLg,
                             animation: getAnimation(`slide-up-desktop-${isPrimary ? 'primary' : 'secondary'}`, 'moderate', 'base'),
                         }),
                         ...(isSecondary && {
                             gridArea: '2/2/auto/-2',
-                            paddingBlockEnd: spacingFluidLarge,
+                            paddingBlockEnd: spacingFluidLg,
                         }),
                         ...(isCascade && {
                             display: 'contents',
@@ -6435,13 +6367,13 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                 display: 'none',
                 [mediaQueryMobile]: {
                     ...(isSecondary && {
-                        ...headingSmallStyle,
+                        font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                         display: 'block',
                         gridArea: '2/3',
                         placeSelf: 'center',
                         zIndex: 2,
                         margin: 0,
-                        paddingInline: spacingStaticMedium,
+                        paddingInline: spacingStaticMd,
                         maxWidth: '100%',
                         boxSizing: 'border-box',
                         whiteSpace: 'nowrap',
@@ -6466,7 +6398,7 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
             }),
             '::slotted(*)': {
                 [cssVariableGridTemplate]: 'auto/auto', // reset css variable to prevent inheritance
-                [cssVariableGap]: spacingFluidXSmall, // reset css variable to prevent inheritance
+                [cssVariableGap]: spacingFluidXs, // reset css variable to prevent inheritance
             },
         },
         // drawer subgrid in combination with scroller grid ensures no content squeezing during slide up animation, potentially caused by scrollbar
@@ -6484,7 +6416,7 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                     inset: 0,
                     insetInlineStart: scrollerWidthDesktop,
                     display: 'grid',
-                    gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge}`,
+                    gridTemplate: `${spacingFluidMd$1} minmax(0, 1fr)/${spacingFluidLg} minmax(0, 1fr) ${spacingFluidLg}`,
                 }),
                 ...((isPrimary || isCascade) && {
                     display: 'contents',
@@ -6543,8 +6475,8 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                 // TODO: not sure if this is ideal, since the consumer won't be able to change it when used with a custom
                 //  grid-template, maybe <p-drilldown-button slot="button" /> would be an option, similar to <p-drilldown-link />
                 gridColumn: '1/-1',
-                padding: spacingFluidSmall,
-                margin: `0 calc(${spacingFluidSmall} * -1)`,
+                padding: spacingFluidSm,
+                margin: `0 calc(${spacingFluidSm} * -1)`,
             }),
         },
         back: {
@@ -6562,7 +6494,7 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
                 },
                 [mediaQueryDesktop]: {
                     gridArea: '2/2',
-                    marginBottom: spacingFluidMedium,
+                    marginBottom: spacingFluidMd$1,
                     width: 'fit-content',
                     height: 'fit-content',
                     marginInlineStart: '-4px', // improve visual alignment and compensate white space of arrow-left icon
@@ -6578,10 +6510,10 @@ const anchorHoverJssStyle = {
 const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
-        padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
-        margin: `-2px calc(${spacingFluidSmall} * -1 - 4px)`, // aligned with link-pure
+        padding: `calc(${spacingFluidSm} + 2px) calc(${spacingFluidSm} + 4px)`, // aligned with link-pure
+        margin: `-2px calc(${spacingFluidSm} * -1 - 4px)`, // aligned with link-pure
         borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`, // needed for focus outline
-        font: textMediumStyle.font,
+        font: `${fontWeightNormal$1} ${typescaleMd} / ${leadingNormal$1} ${fontPorscheNext$1}`,
         color: `var(${cssVarColorPrimary})`,
         textDecoration: 'underline',
         textDecorationColor: isActive ? 'inherit' : 'transparent',
@@ -6637,16 +6569,16 @@ const getComponentCss$X = (state, labelSize, hasLabel) => {
             ...(hasLabel && {
                 legend: {
                     all: 'unset',
-                    marginBottom: spacingStaticMedium,
+                    marginBottom: spacingStaticMd,
                     color: colorPrimary,
-                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                    font: `${labelSize === 'small' ? fontWeightSemibold : fontWeightNormal$1} ${labelSize === 'small' ? typescaleSm$1 : typescaleMd} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 },
             }),
         },
         ...getFunctionalComponentRequiredStyles(),
         ...mergeDeep(getFunctionalComponentStateMessageStyles(state), {
             message: {
-                marginTop: spacingStaticMedium,
+                marginTop: spacingStaticMd,
             },
         }),
     });
@@ -6657,7 +6589,7 @@ const getComponentCss$X = (state, labelSize, hasLabel) => {
  */
 const cssVarSize$2 = '--p-flag-size';
 const getComponentCss$W = (size) => {
-    const dimension = `var(${cssVarSize$2},${leadingNormal})`;
+    const dimension = `var(${cssVarSize$2},${leadingNormal$1})`;
     return getCss({
         '@global': {
             ':host': {
@@ -6678,7 +6610,7 @@ const getComponentCss$W = (size) => {
                 pointerEvents: 'none', // disable dragging/ghosting of images
                 width: dimension,
                 height: dimension,
-                fontFamily: fontPorscheNext, // needed for correct width/height definition based on ex-unit
+                fontFamily: fontPorscheNext$1, // needed for correct width/height definition based on ex-unit
                 ...buildResponsiveStyles(size, (s) => ({
                     fontSize: sizeMap$1[s], // needed for correct width/height definition based on ex-unit
                 })),
@@ -6690,8 +6622,8 @@ const getComponentCss$W = (size) => {
 const cssVarBackgroundColor = '--_a';
 const dialogHostJssStyle = (background) => {
     return {
-        '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
-        '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
+        '--pds-internal-grid-outer-column': `calc(${spacingFluidLg} - ${gridGap})`,
+        '--pds-internal-grid-margin': `calc(${spacingFluidLg} * -1)`,
         '--pds-internal-grid-width-min': 'auto',
         '--pds-internal-grid-width-max': 'none',
         [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
@@ -6733,7 +6665,10 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
                 visibility: 'inherit',
                 pointerEvents: 'auto',
                 background: colorBackdrop,
-                ...(isBackdropBlur && frostedGlassStyle),
+                ...(isBackdropBlur && {
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
+                }),
             }
             : {
                 visibility: 'hidden', // element shall not be tabbable with keyboard after fade out transition has finished
@@ -6772,18 +6707,19 @@ const getScrollerJssStyle = (position) => {
     };
 };
 const dialogBorderRadius = `var(${legacyRadiusLarge}, ${radiusXl})`;
-const dialogPaddingTop = spacingFluidMedium;
-const dialogPaddingBottom = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
-const dialogPaddingInline = spacingFluidLarge;
+const dialogPaddingTop = spacingFluidMd$1;
+const dialogPaddingBottom = `calc(${spacingFluidSm} + ${spacingFluidMd$1})`;
+const dialogPaddingInline = spacingFluidLg;
 const dialogGridJssStyle = () => {
     return {
         position: 'relative',
         display: 'grid',
-        gridTemplate: `auto/${spacingFluidSmall} minmax(0,1fr) ${spacingFluidSmall}`,
-        gap: `${spacingFluidMedium} calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
+        gridTemplate: `auto/${spacingFluidSm} minmax(0,1fr) ${spacingFluidSm}`,
+        gap: `${spacingFluidMd$1} calc(${spacingFluidLg} - ${spacingFluidSm})`,
         paddingTop: dialogPaddingTop,
         paddingBottom: dialogPaddingBottom,
         alignContent: 'flex-start',
+        overflow: 'clip',
     };
 };
 const getDialogColorJssStyle = () => {
@@ -6818,18 +6754,17 @@ const getDialogDismissButtonJssStyle = () => {
         gridArea: '1/3',
         zIndex: 5, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
         position: 'sticky',
-        top: spacingFluidSmall,
-        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSmall})`,
-        marginInlineEnd: spacingFluidSmall,
+        top: spacingFluidSm,
+        marginTop: `calc(-1 * ${dialogPaddingTop} + ${spacingFluidSm})`,
+        marginInlineEnd: spacingFluidSm,
         placeSelf: 'flex-start flex-end',
         '&::after': {
             content: '""',
             display: 'block',
             position: 'absolute',
-            inset: `calc(-1 * ${spacingFluidSmall}) calc(-1 * ${spacingFluidSmall}) -50px -50px`,
+            inset: `calc(-1 * ${spacingFluidSm}) calc(-1 * ${spacingFluidSm}) -50px -50px`,
             pointerEvents: 'none',
             zIndex: -1,
-            borderRadius: dialogBorderRadius,
             background: `radial-gradient(circle at top right, hsla(from var(${cssVarBackgroundColor}) h s l / 0.35) 0%, transparent 70%)`,
         },
     };
@@ -6844,7 +6779,7 @@ const getSlotJssStyle = () => {
 };
 const getSlotHeaderJssStyle = () => {
     const paddingTop = dialogPaddingTop;
-    const paddingBottom = spacingStaticMedium;
+    const paddingBottom = spacingStaticMd;
     return {
         gridColumn: '1/-1',
         zIndex: 1, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
@@ -6879,7 +6814,8 @@ const getSlotFooterJssStyle = () => {
             inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
             background: colorFrosted,
             borderRadius: radius3Xl,
-            ...frostedGlassStyle,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
         },
     };
 };
@@ -6999,14 +6935,14 @@ const getComponentCss$U = (size, weight, align, color, hyphens, ellipsis) => {
                     ...hostHiddenStyles,
                 }),
             },
-            [`::slotted(:is(${HEADING_TAGS.join()}))`]: addImportantToEachRule({
+            [`::slotted(:is(${HEADING_TAGS.join()}))`]: {
                 all: 'unset',
-            }),
+            },
         },
         root: {
             all: 'unset',
             display: 'block',
-            font: `${weightMap[weight]} ${typescale2Xl}/${leadingNormal} ${fontPorscheNext}`,
+            font: `${weightMap[weight]} ${typescale2Xl}/${leadingNormal$1} ${fontPorscheNext$1}`,
             ...buildResponsiveStyles(size, (v) => ({
                 fontSize: sizeMap$1[v],
             })),
@@ -7073,7 +7009,7 @@ const isFlippableIcon = (name, source) => {
             name === 'send'));
 };
 const getComponentCss$T = (name, source, color, size) => {
-    const dimension = `var(${cssVarSize$1},${leadingNormal})`;
+    const dimension = `var(${cssVarSize$1},${leadingNormal$1})`;
     const mask = `url("${buildIconUrl(source || name)}") center/contain no-repeat`;
     return getCss({
         '@global': {
@@ -7096,7 +7032,7 @@ const getComponentCss$T = (name, source, color, size) => {
                 pointerEvents: 'none', // disable dragging/ghosting of images
                 width: dimension,
                 height: dimension,
-                fontFamily: fontPorscheNext, // needed for correct width/height definition based on ex-unit
+                fontFamily: fontPorscheNext$1, // needed for correct width/height definition based on ex-unit
                 ...buildResponsiveStyles(size, (s) => ({
                     fontSize: sizeMap$1[s], // needed for correct width/height definition based on ex-unit
                 })),
@@ -7116,96 +7052,80 @@ const getComponentCss$T = (name, source, color, size) => {
     });
 };
 
-const mediaQueryMinS$1 = getMediaQueryMin('s');
-const mediaQueryMaxS$2 = getMediaQueryMax('s');
-const getBackgroundColor = (state) => {
-    const colorMap = {
-        info: colorInfoFrosted,
-        warning: colorWarningFrosted,
-        success: colorSuccessFrosted,
-        error: colorErrorFrosted,
-    };
-    return colorMap[state];
-};
-const getNotificationRootJssStyle = (state, hasAction, hasClose) => {
-    return {
-        // display: 'grid', // NOTE: display property is moved into component styled to not apply !important keyword
-        // 2 columns for content and optional close button
-        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
-        gap: spacingStaticMedium,
-        placeItems: 'start',
-        padding: spacingStaticMedium,
-        ...frostedGlassStyle,
-        background: getBackgroundColor(state),
-        borderRadius: `var(${legacyRadiusMedium}, ${radiusXl})`,
-        [mediaQueryMinS$1]: {
-            // 4 columns are for icon, content, optional action button and optional close button
-            gridTemplateColumns: `auto minmax(auto, 1fr)${hasAction ? ' auto' : ''}${hasClose ? ' auto' : ''}`,
-        },
-        ...forcedColorsMediaQuery({
-            outline: '2px solid CanvasText',
-            outlineOffset: '-2px',
-        }),
-    };
-};
-const getNotificationIconJssStyle = () => ({
-    marginTop: '2px', // To be center aligned with close button
-    [mediaQueryMaxS$2]: {
-        display: 'none',
-    },
-});
-const getNotificationContentJssStyle = () => ({
-    display: 'grid',
-    gap: spacingStaticXSmall,
-    marginTop: '2px', // To be center aligned with close button
-    [mediaQueryMinS$1]: {
-        marginLeft: `-${spacingStaticSmall}`,
-    },
-});
-
-const INLINE_NOTIFICATION_HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const mediaQueryMaxS$1 = getMediaQueryMax('s');
-const getTextJssStyle = {
-    margin: 0,
-    color: colorPrimary,
-};
-const getHeadingJssStyle = {
-    ...headingSmallStyle,
-    ...getTextJssStyle,
-};
-const getComponentCss$S = (state, hasAction, hasClose) => {
+const getComponentCss$S = (state, hasAction, hasDismissButton) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'grid',
+                display: 'block',
                 ...addImportantToEachRule({
-                    ...getNotificationRootJssStyle(state, hasAction, hasClose),
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            [`::slotted(:is(${INLINE_NOTIFICATION_HEADING_TAGS.join()}))`]: addImportantToEachRule({
+            'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
                 all: 'unset',
-            }),
-            'slot[name="heading"]': getHeadingJssStyle,
+                display: 'block',
+                gridArea: '1/2',
+                font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                color: colorPrimary,
+            },
+            'slot:not([name]),p': {
+                all: 'unset',
+                display: 'block',
+                gridArea: '2/2',
+                marginTop: spacingStaticXs$1,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                color: colorPrimary,
+            },
         },
-        heading: getHeadingJssStyle,
-        description: {
-            ...textSmallStyle,
-            ...getTextJssStyle,
+        notification: {
+            display: 'grid',
+            gridTemplateColumns: `auto minmax(0, 1fr) auto auto`,
+            padding: spacingStaticMd,
+            borderRadius: `var(${legacyRadiusMedium}, ${radiusXl})`,
+            background: notificationBackgroundMap[state],
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
+            '&::before': {
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/1',
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    marginInlineEnd: spacingStaticSm$1,
+                    background: notificationColorMap[state],
+                    WebkitMask: `${notificationIconMap[state]} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${notificationIconMap[state]} center/contain no-repeat`,
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
+                },
+            },
         },
-        icon: getNotificationIconJssStyle(),
-        content: getNotificationContentJssStyle(),
+        ...(hasDismissButton && {
+            dismiss: {
+                gridArea: `1/4/3`,
+                marginTop: `calc(-1 * ${spacingStaticXs$1})`,
+                marginInlineEnd: `calc(-1 * ${spacingStaticXs$1})`,
+                marginInlineStart: spacingStaticMd,
+            },
+        }),
         ...(hasAction && {
             action: {
-                marginTop: borderWidthBase, // To visually align with close button
-                [mediaQueryMaxS$1]: {
-                    gridRowStart: 2,
+                gridArea: '3/1/auto/-1',
+                marginTop: spacingStaticMd,
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/3',
+                    marginTop: 0,
+                    marginInlineStart: spacingStaticMd,
                 },
             },
         }),
-        close: dismissButtonJssStyle,
     });
 };
 
@@ -7359,16 +7279,16 @@ const getComponentCss$L = (disabled, loading, hideLabel, state, compact, readOnl
 
 const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
 // TODO: basic button/icon padding can already be set within style function instead of on component style level
-const formButtonOrIconPadding = spacingStaticXSmall;
+const formButtonOrIconPadding = spacingStaticXs$1;
 // TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
 //  unfortunately line-height alignment breaks for a select element for some reasons then
 // TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingVertical = spacingStaticSmall;
+const formElementPaddingVertical = spacingStaticSm$1;
 // TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingHorizontal = spacingStaticMedium;
+const formElementPaddingHorizontal = spacingStaticMd;
 const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
     // when applied, font-family and font-size needs to be set too for correct calculation of ex-unit ($fontLineHeight)
-    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
+    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${leadingNormal$1} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
 };
 const getUnitCounterJssStyle = () => {
     return {
@@ -7378,7 +7298,7 @@ const getUnitCounterJssStyle = () => {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        font: textSmallStyle.font,
+        font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
         color: colorContrastHigh,
     };
 };
@@ -7530,7 +7450,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                     [`&([slot="${headerSlot}"])`]: {
                         display: 'flex',
                         flexWrap: 'wrap',
-                        gap: spacingFluidXSmall,
+                        gap: spacingFluidXs,
                     },
                 },
                 '::slotted(:is(img,picture))': {
@@ -7555,7 +7475,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
             overflow: 'hidden', // TODO: discussable if we should prevent text to overflow .root, – e.g. it also prevents a popover from being shown correctly
             boxSizing: 'border-box',
             borderRadius: `var(${legacyRadiusLarge}, ${radius4Xl})`,
-            padding: spacingFluidSmall,
+            padding: spacingFluidSm,
             color: colorPrimary,
             backgroundColor: colorSurface,
             ...buildResponsiveStyles(aspectRatio, (ratio) => ({
@@ -7570,7 +7490,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
         }),
         header: {
             display: 'flex',
-            gap: spacingFluidSmall,
+            gap: spacingFluidSm,
             justifyContent: 'space-between',
             alignItems: 'flex-start',
         },
@@ -7582,11 +7502,11 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
         }),
         image: {
             aspectRatio: '8/9',
-            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall}`,
+            margin: `${spacingFluidSm} auto ${spacingFluidXs}`,
             overflow: 'hidden',
             transition: getTransition('transform', 'moderate'),
             [getMediaQueryMin('s')]: {
-                padding: `0 ${spacingFluidMedium}`, // ensures image is not getting to large
+                padding: `0 ${spacingFluidMd$1}`, // ensures image is not getting to large
             },
             ...hoverMediaQuery({
                 '.root:hover &': {
@@ -7602,25 +7522,25 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
         },
         heading: {
             margin: '0 0 2px', // ua-style reset
-            ...headingSmallStyle,
+            font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             ...getMultilineEllipsis(3),
         },
         price: {
             margin: 0, // ua-style reset
-            ...textXSmallStyle,
+            font: `${fontWeightNormal$1} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             ...(hasPriceOriginal && {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
-                columnGap: spacingFluidXSmall,
+                columnGap: spacingFluidXs,
             }),
         },
         ...(hasDescription && {
             description: {
                 margin: 0, // ua-style reset
-                ...textXXSmallStyle,
-                ...getMultilineEllipsis(2),
+                font: `${fontWeightNormal$1} ${typescale2Xs} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorContrastHigh,
+                ...getMultilineEllipsis(2),
             },
         }),
         ...(hasPriceOriginal && {
@@ -7680,7 +7600,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
                 all: 'unset',
                 zIndex: 3,
                 maxWidth: '34.375rem',
-                ...textMediumStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorPrimary,
                 hyphens: 'inherit',
                 ...mergeDeep(buildResponsiveStyles(size, (v) => ({
@@ -7692,7 +7612,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
         },
         root: {
             display: 'grid',
-            gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
+            gridTemplate: `${spacingFluidMd$1} auto minmax(0px, 1fr) auto ${spacingFluidMd$1}/${spacingFluidMd$1} minmax(0px, 1fr) ${spacingFluidMd$1}`,
             width: '100%', // necessary in case tile content overflows in grid or flex context
             // Safari workaround to scale the tile properly
             '@supports (-webkit-hyphens: auto)': {
@@ -7710,14 +7630,14 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
                         ? {
                             gridArea: '1/1/3/-1',
                             background: gradientToBottomStyle.background.replaceAll('0,0%,0%,', `from ${colorCanvas} h s l / `),
-                            marginBottom: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            marginBottom: `calc(${spacingFluidLg} * -1)`, // to increase the gradient area without reserving additional layout space
                             borderStartStartRadius: 'inherit',
                             borderStartEndRadius: 'inherit',
                         }
                         : {
                             gridArea: '4/1/6/-1',
                             background: gradientToTopStyle.background.replaceAll('0,0%,0%,', `from ${colorCanvas} h s l / `),
-                            marginTop: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            marginTop: `calc(${spacingFluidLg} * -1)`, // to increase the gradient area without reserving additional layout space
                             borderEndStartRadius: 'inherit',
                             borderEndEndRadius: 'inherit',
                         }),
@@ -7742,7 +7662,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
                 ? {
                     display: 'grid',
                     gridTemplateColumns: 'minmax(0,1fr) auto',
-                    columnGap: spacingStaticMedium,
+                    columnGap: spacingStaticMd,
                 }
                 : {
                     display: 'flex',
@@ -7762,7 +7682,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
-            marginTop: spacingStaticMedium,
+            marginTop: spacingStaticMd,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -7894,7 +7814,7 @@ const colorMap = {
     'contrast-low': colorContrastLow,
     'contrast-medium': colorContrastMedium,
     'contrast-high': colorContrastHigh,
-    inherit: 'inherit',
+    inherit: 'currentcolor',
 };
 const getComponentCss$B = (model, safeZone, size, color) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
@@ -7909,11 +7829,10 @@ const getComponentCss$B = (model, safeZone, size, color) => {
                 // width + height style can't be !important atm to be backwards compatible with e.g. `<p-model-signature size="inherit" style="height: 50px"/>`
                 width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : `${width}px`})`,
                 height: `var(${cssVariableHeight},auto)`,
-                color: `var(${cssVariableColor},${colorMap[color]})`,
                 ...addImportantToEachRule({
                     mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
                     aspectRatio: `${width} / ${safeZone ? 36 : height}`, // 36px is the max-height for SVG model signature creation
-                    background: 'currentcolor', // necessary for proper color inheritance
+                    background: `var(${cssVariableColor},${colorMap[color]})`, // color="inherit" will use currentcolor for inheritance
                     ...forcedColorsMediaQuery({
                         background: 'CanvasText',
                     }),
@@ -7940,7 +7859,7 @@ const getComponentCss$B = (model, safeZone, size, color) => {
 const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
 const getComponentCss$A = (isDisabled, selected) => {
     const checkboxDimension = `calc(var(${cssVarInternalCheckboxScaling}) * 1.75rem)`;
-    const labelPaddingTop = `max(0px, calc((${checkboxDimension} - ${fontLineHeight}) / 2))`;
+    const labelPaddingTop = `max(0px, calc((${checkboxDimension} - ${leadingNormal$1}) / 2))`;
     return getCss({
         '@global': {
             ':host': {
@@ -7988,7 +7907,7 @@ const getComponentCss$z = (isDisabled) => {
             '[role="presentation"]': {
                 paddingBlock,
                 paddingInline,
-                font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
+                font: `${fontWeightSemibold} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 color: colorPrimary,
                 ...(isDisabled && getDisabledBaseStyles()),
             },
@@ -8023,9 +7942,9 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
-            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + 1px * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
         },
         filter: getFilterJssStyle(cssVarInternalMultiSelectScaling),
         options: getOptionsJssStyle(cssVarInternalMultiSelectScaling),
@@ -8039,8 +7958,8 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     });
 };
 
-const mediaQueryMinS = getMediaQueryMin('s');
-const mediaQueryMaxS = getMediaQueryMax('s');
+const mediaQueryMinS$1 = getMediaQueryMin('s');
+const mediaQueryMaxS$1 = getMediaQueryMax('s');
 const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
@@ -8063,18 +7982,18 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
             },
             ul: {
                 display: 'flex',
-                gap: spacingStaticXSmall,
+                gap: spacingStaticXs$1,
                 margin: 0,
                 padding: 0,
-                [mediaQueryMinS]: {
-                    gap: spacingStaticSmall,
+                [mediaQueryMinS$1]: {
+                    gap: spacingStaticSm$1,
                 },
             },
             li: {
                 listStyleType: 'none',
                 ...(pageTotal > 5 && {
                     // max 5 items including ellipsis at the same time on mobile
-                    [mediaQueryMaxS]: {
+                    [mediaQueryMaxS$1]: {
                         [activePage < 4
                             ? // we are at the start, so let's hide start ellipsis and 2 items before end ellipsis
                                 '&.ellip-start,&:nth-child(6),&:nth-child(7),&:not(.ellip):nth-child(8)'
@@ -8093,7 +8012,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                                 })),
                     },
                 }),
-                [mediaQueryMinS]: {
+                [mediaQueryMinS$1]: {
                     ...(pageTotal < 8
                         ? { '&.ellip': hiddenStyle }
                         : // max 7 items including ellipsis at the same time on tablet
@@ -8117,7 +8036,7 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                 minWidth: '2.25rem',
                 height: '2.25rem',
                 boxSizing: 'border-box',
-                ...textSmallStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 whiteSpace: 'nowrap',
                 cursor: 'pointer',
                 backgroundColor: 'transparent',
@@ -8127,7 +8046,8 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                 outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style
                 ...hoverMediaQuery({
                     '&:not([aria-disabled]):not(.ellipsis):hover': {
-                        ...frostedGlassStyle,
+                        WebkitBackdropFilter: blurFrosted,
+                        backdropFilter: blurFrosted,
                         background: colorFrosted,
                         ...forcedColorsMediaQuery({
                             outline: '2px solid CanvasText',
@@ -8163,7 +8083,7 @@ const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
 const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCompact) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
     const gap = `calc(11.2px * (var(${cssVarInternalPinCodeScaling}) - 0.64285714) + 4px)`;
-    const inputBorderWidth = borderWidthThin;
+    const inputBorderWidth = '1px';
     const inputDimension = `calc(var(${cssVarInternalPinCodeScaling}) * 3.5rem)`;
     const inputPadding = `calc(11.2px * (var(${cssVarInternalPinCodeScaling}) - 0.64285714) + 4px)`;
     const inputMinWidth = `calc(1ch + ${inputPadding} * 2 + ${inputBorderWidth} * 2)`;
@@ -8190,7 +8110,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 border: `${inputBorderWidth} solid ${formStateBorderColor}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 background: formStateBackgroundColor,
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / calc(${leadingNormal$1} + 6px) ${fontPorscheNext$1}`, // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
                 color: colorPrimary,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
                 textOverflow: 'ellipsis',
@@ -8212,7 +8132,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
         root: {
             all: 'unset',
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         wrapper: {
             position: 'relative',
@@ -8266,20 +8186,21 @@ const getComponentCss$v = () => {
             },
             ...preventFoucOfNestedElementsStyles,
             p: {
-                ...textSmallStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 margin: 0,
             },
             button: {
                 all: 'unset',
                 display: 'block',
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width/height definition based on ex-unit
-                width: fontLineHeight, // width needed to improve ssr support
-                height: fontLineHeight, // height needed to improve ssr support
+                font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct width/height definition based on ex-unit
+                width: leadingNormal$1, // width needed to improve ssr support
+                height: leadingNormal$1, // height needed to improve ssr support
                 borderRadius: radiusFull,
                 cursor: 'pointer',
                 backgroundColor: colorFrosted,
                 transition: getTransition('background-color'),
-                ...frostedGlassStyle,
+                WebkitBackdropFilter: blurFrosted,
+                backdropFilter: blurFrosted,
                 ...hoverMediaQuery({
                     '&:hover': {
                         backgroundColor: colorFrostedSoft,
@@ -8293,7 +8214,7 @@ const getComponentCss$v = () => {
                 pointerEvents: 'none',
                 filter: `drop-shadow(0 0 16px ${shadowColor})`,
                 backdropFilter: 'drop-shadow(0 0 transparent)', // workaround for Firefox bug not rendering PDS frosted glass correctly when nested inside CSS filter: https://bugzilla.mozilla.org/show_bug.cgi?id=1797051
-                animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) fade-in ${motionEasingBase} forwards`,
+                animation: `var(${cssVariableAnimationDuration}, ${durationSm}) fade-in ${easeInOut} forwards`,
                 '&:not(:popover-open)': {
                     display: 'none', // ensures popover is not flickering when closed in some situations
                 },
@@ -8317,11 +8238,11 @@ const getComponentCss$v = () => {
             maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
             width: 'max-content', // ensures in older browsers correct width
             boxSizing: 'border-box',
-            padding: `${spacingStaticSmall} ${spacingStaticMedium}`,
+            padding: `${spacingStaticSm$1} ${spacingStaticMd}`,
             pointerEvents: 'auto',
             borderRadius: `var(${legacyRadiusSmall}, ${radiusLg})`,
-            ...textSmallStyle,
             background: colorCanvas,
+            font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
             color: colorPrimary,
             ...forcedColorsMediaQuery({
                 outline: '2px solid CanvasText',
@@ -8336,11 +8257,11 @@ const checkedIcon = getInlineSVGBackgroundImage(`<circle cx="12" cy="12" r="6"/>
 const getComponentCss$u = (disabled, loading, state) => {
     const { formStateBackgroundColor, formStateBorderColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
-    const radioBorderWidth = borderWidthThin;
+    const radioBorderWidth = '1px';
     const radioDimension = `calc(var(${cssVarInternalRadioGroupOptionScaling}) * 1.75rem)`;
-    const radioMarginBlock = `max(0px, calc((${fontLineHeight} - ${radioDimension}) / 2))`;
+    const radioMarginBlock = `max(0px, calc((${leadingNormal$1} - ${radioDimension}) / 2))`;
     const radioTouchInset = `calc(-${radioBorderWidth} - max(0px, calc(24px - ${radioDimension}) / 2))`;
-    const labelPaddingTop = `max(0px, calc((${radioDimension} - ${fontLineHeight}) / 2))`;
+    const labelPaddingTop = `max(0px, calc((${radioDimension} - ${leadingNormal$1}) / 2))`;
     const labelPaddingInlineStart = `calc(11.2px * (var(${cssVarInternalRadioGroupOptionScaling}) - 0.64285714) + 4px)`;
     return getCss({
         '@global': {
@@ -8359,7 +8280,7 @@ const getComponentCss$u = (disabled, loading, state) => {
                 height: radioDimension,
                 marginBlock: radioMarginBlock,
                 boxSizing: 'border-box',
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct width and height definition based on ex-unit
                 background: formStateBackgroundColor,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
                 border: `${radioBorderWidth} solid ${formStateBorderColor}`,
@@ -8405,14 +8326,14 @@ const getComponentCss$u = (disabled, loading, state) => {
         root: {
             display: 'grid',
             gridTemplateColumns: 'auto minmax(0, 1fr)',
-            rowGap: spacingStaticXSmall,
+            rowGap: spacingStaticXs$1,
         },
         wrapper: {
             position: 'relative',
             display: 'flex',
             alignItems: 'center',
             alignSelf: 'flex-start',
-            minHeight: fontLineHeight, // necessary for compact mode
+            minHeight: leadingNormal$1, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
             ...(disabled && getDisabledBaseStyles()),
         },
@@ -8473,7 +8394,7 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
             all: 'unset',
             display: 'grid',
             justifySelf: 'flex-start',
-            rowGap: spacingStaticXSmall,
+            rowGap: spacingStaticXs$1,
         },
         wrapper: {
             alignItems: 'start',
@@ -8567,6 +8488,10 @@ const getScrollIndicatorStyles = (direction, isVisible, isSticky, hasScrollbar,
         ...(hasScrollbar && {
             marginTop: `calc(-1 * ${scrollbarWidth})`,
         }),
+        ...(hasScrollbar &&
+            pointerCoarseMediaQuery({
+                marginTop: 0,
+            })),
         display: 'grid',
         alignSelf: 'center',
         width: '1.5rem',
@@ -8610,7 +8535,8 @@ isSticky, hasScrollbar, isCompact) => {
             : !isIndicatorNextVisible
                 ? 'left'
                 : 'both';
-    const mask = `${getSmoothMask(fadeEdges)} 0 0/auto no-repeat${hasScrollbar ? `,linear-gradient(black,black) 0 bottom/auto ${scrollbarWidth} no-repeat` : ''}`;
+    const mask = `${getSmoothMask(fadeEdges)} 0 0/auto no-repeat`;
+    const scrollbarMask = `linear-gradient(black,black) 0 bottom/auto ${scrollbarWidth} no-repeat`;
     return getCss({
         '@global': {
             ':host': {
@@ -8641,13 +8567,25 @@ isSticky, hasScrollbar, isCompact) => {
             gridTemplateColumns: `${safeZone} minmax(auto,1fr) ${safeZone}`,
             margin: `calc(-1 * ${safeZone})`, // compensate padding to ensure that `:host` is aligned with other elements
             padding: `${safeZone} 0px${hasScrollbar ? ` calc(${safeZone} + ${scrollbarWidth})` : ''}`, // ensure enough space is available for focus ring of slotted elements (horizontal space is given by `.sentinel`)
+            scrollbarWidth: hasScrollbar ? 'thin' : 'none',
+            // Override for touch devices to avoid issues with ios not rendering mask at all when using multiple mask layers
+            ...(hasScrollbar &&
+                pointerCoarseMediaQuery({
+                    padding: `${safeZone} 0px`,
+                })),
             outline: 'none', // focus ring is applied to `.root`, it would be cut off by the mask if applied to `.scroll`
             overflow: 'auto hidden',
             ...(fadeEdges !== 'none' && {
-                WebkitMask: mask, // necessary for Sogou browser support :-)
-                mask,
+                WebkitMask: hasScrollbar ? `${mask},${scrollbarMask}` : mask, // necessary for Sogou browser support :-)
+                mask: hasScrollbar ? `${mask},${scrollbarMask}` : mask,
             }),
-            scrollbarWidth: hasScrollbar ? 'thin' : 'none',
+            // Override for touch devices to avoid issues with ios not rendering mask at all when using multiple mask layers
+            ...(fadeEdges !== 'none' &&
+                hasScrollbar &&
+                pointerCoarseMediaQuery({
+                    WebkitMask: mask,
+                    mask: mask,
+                })),
         },
         // as soon as `@container scroll-state(scrollable: left)` has better browser support we can get rid of sentinel and IntersectionObserver
         sentinel: {
@@ -8677,7 +8615,7 @@ const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
     const padding = hasIconAndSlottedContent
         ? `${verticalPadding} ${horizontalPadding} ${verticalPadding} ${verticalPadding}`
         : `${verticalPadding} ${horizontalPadding}`;
-    const dimension = `calc(max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px)) + (${verticalPadding} + ${borderWidthBase}) * 2)`;
+    const dimension = `calc(max(${leadingNormal$1}, ${scalingVar} * (${leadingNormal$1} + 10px)) + (${verticalPadding} + 1px) * 2)`;
     return { padding, dimension };
 };
 const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, hasSlottedContent) => {
@@ -8702,7 +8640,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 minHeight: dimension,
                 minWidth: dimension,
                 padding: padding,
-                border: `${borderWidthThin} solid ${isSelected ? formStateBorderHoverColor : formStateBorderColor}`,
+                border: `1px solid ${isSelected ? formStateBorderHoverColor : formStateBorderColor}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 background: formStateBackgroundColor,
                 color: colorPrimary,
@@ -8774,7 +8712,7 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         root: {
             all: 'unset',
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, false, hideLabel, {
@@ -8838,9 +8776,9 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
-            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + 1px * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
         filter: getFilterJssStyle(cssVarInternalSelectScaling),
         options: getOptionsJssStyle(cssVarInternalSelectScaling),
@@ -8897,7 +8835,7 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             ...getDialogTransitionJssStyle(isOpen, '^'),
             width: '100%',
             alignSelf: 'flex-end',
-            marginBlockStart: spacingFluidLarge, // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
+            marginBlockStart: spacingFluidLg, // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
             borderTopLeftRadius: dialogBorderRadius,
             borderTopRightRadius: dialogBorderRadius,
             ...forcedColorsMediaQuery({
@@ -8923,7 +8861,7 @@ const cssVarColor = '--p-spinner-color';
  */
 const cssVarTrackColor = '--p-spinner-track-color';
 const getComponentCss$m = (color, size) => {
-    const dimension = `var(${cssVarSize},${leadingNormal})`;
+    const dimension = `var(${cssVarSize},${leadingNormal$1})`;
     const strokeDasharray = '69'; // C = 2πR
     const animationDuration = `var(${cssVariableAnimationDuration}, ${durationXl})`;
     return getCss({
@@ -8960,7 +8898,7 @@ const getComponentCss$m = (color, size) => {
             div: {
                 width: dimension,
                 height: dimension,
-                fontFamily: fontPorscheNext, // needed for correct width/height definition based on ex-unit
+                fontFamily: fontPorscheNext$1, // needed for correct width/height definition based on ex-unit
                 ...buildResponsiveStyles(size, (s) => ({
                     fontSize: sizeMap$1[s], // needed for correct width/height definition based on ex-unit
                 })),
@@ -9032,18 +8970,19 @@ const getComponentCss$l = (state, disabled) => {
                 paddingBlock: '6px',
                 width: 'max-content',
                 cursor: isDisabled ? 'not-allowed' : 'pointer',
-                font: textSmallStyle.font,
-                fontSize: 'inherit', // necessary because of all: unset
+                font: `${fontWeightNormal$1} inherit / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
                 ...(isStateCurrent && {
-                    ...frostedGlassStyle,
+                    WebkitBackdropFilter: blurFrosted,
+                    backdropFilter: blurFrosted,
                     background: colorFrosted,
                 }),
                 ...(!isDisabled &&
                     hoverMediaQuery({
                         transition: getTransition('background-color'),
                         '&:hover': {
-                            ...frostedGlassStyle,
+                            WebkitBackdropFilter: blurFrosted,
+                            backdropFilter: blurFrosted,
                             background: colorFrosted,
                         },
                     })),
@@ -9060,10 +8999,9 @@ const getComponentCss$l = (state, disabled) => {
             },
         },
         icon: {
-            font: textSmallStyle.font,
-            fontSize: 'inherit', // necessary because of all: unset
-            width: fontLineHeight,
-            height: fontLineHeight,
+            font: `inherit ${fontPorscheNext$1}`, // necessary because of all: unset and to correctly calculate width/height based on ex-unit
+            width: leadingNormal$1,
+            height: leadingNormal$1,
             forcedColorAdjust: 'none',
             ...(isStateCurrentOrUndefined && {
                 display: 'grid',
@@ -9103,8 +9041,8 @@ const getComponentCss$k = (size) => {
         },
         scroller: {
             placeSelf: 'flex-start', // ensures scroller doesn't get stretched in x- or y-axis in case the stepper-horizontal is taller than the scroller (e.g. when placed in flex or grid context)
-            ...textSmallStyle,
-            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText$1[s] })),
+            font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+            ...buildResponsiveStyles(size, (s) => ({ fontSize: sizeMap$1[s] })),
         },
     });
 };
@@ -9123,12 +9061,12 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, toggleBackgroundColor, textColor } = getColors$1(isChecked, isLoading);
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
     const gap = `calc(11.2px * (var(${cssVarInternalSwitchScaling}) - 0.64285714) + 4px)`;
-    const buttonBorderWidth = borderWidthThin;
+    const buttonBorderWidth = '1px';
     const buttonWidth = `calc(var(${cssVarInternalSwitchScaling}) * 3rem)`;
     const buttonHeight = `calc(var(${cssVarInternalSwitchScaling}) * 1.75rem)`;
-    const buttonMarginBlock = `max(0px, calc((${fontLineHeight} - ${buttonHeight}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
+    const buttonMarginBlock = `max(0px, calc((${leadingNormal$1} - ${buttonHeight}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
     const buttonTouchInset = `calc(-${buttonBorderWidth} - max(0px, calc(24px - ${buttonHeight}) / 2))`; // Positions the switch ::before pseudo-element with a negative offset to align it with the touch target.
-    const labelPaddingTop = `max(0px, calc((${buttonHeight} - ${fontLineHeight}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
+    const labelPaddingTop = `max(0px, calc((${buttonHeight} - ${leadingNormal$1}) / 2))`; // Vertically centers the switch label relative to the switch size (depending on which is smaller).
     const toggleDimension = `calc(var(${cssVarInternalSwitchScaling}) * 1.25rem)`;
     const toggleTranslateX = `calc(var(${cssVarInternalSwitchScaling}) * .1875rem)`;
     return getCss({
@@ -9141,7 +9079,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 ...addImportantToEachRule({
                     ...(isDisabled && getDisabledBaseStyles()),
                     outline: 0, // custom element is able to delegate the focus
-                    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct gap definition based on ex-unit
+                    font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct gap definition based on ex-unit
                     gap,
                     ...hostHiddenStyles,
                     ...buildResponsiveStyles(isStretched, (stretchValue) => ({
@@ -9162,7 +9100,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 width: buttonWidth,
                 height: buttonHeight,
                 marginBlock: buttonMarginBlock,
-                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                font: `${typescaleSm$1} ${fontPorscheNext$1}`, // needed for correct width and height definition based on ex-unit
                 border: `${buttonBorderWidth} solid ${buttonBorderColor}`,
                 borderRadius: radiusFull,
                 background: buttonBackgroundColor,
@@ -9188,7 +9126,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 },
             },
             label: {
-                ...textSmallStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 minWidth: 0, // prevents flex child to overflow max available parent size
                 minHeight: 0, // prevents flex child to overflow max available parent size
                 cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
@@ -9265,10 +9203,10 @@ const getComponentCss$h = (isCompact, layout) => {
                     [cssVariableTableHoverColor]: colorFrosted,
                     [cssVariableTableBorderColor]: colorContrastLow,
                     ...(isCompact && {
-                        [cssVariableTablePadding]: spacingStaticSmall,
+                        [cssVariableTablePadding]: spacingStaticSm$1,
                     }),
                     ...hostHiddenStyles,
-                    ...textSmallStyle,
+                    font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     color: colorPrimary,
                     textAlign: 'start',
                 }),
@@ -9276,7 +9214,7 @@ const getComponentCss$h = (isCompact, layout) => {
             ...preventFoucOfNestedElementsStyles,
         },
         caption: {
-            marginBottom: spacingFluidMedium,
+            marginBottom: spacingFluidMd$1,
         },
         table: {
             display: 'table',
@@ -9301,7 +9239,7 @@ const getComponentCss$g = (multiline) => {
                 display: 'table-cell',
                 verticalAlign: 'middle',
                 ...addImportantToEachRule({
-                    padding: `var(${cssVariableTablePadding}, ${spacingFluidSmall})`,
+                    padding: `var(${cssVariableTablePadding}, ${spacingFluidSm})`,
                     margin: 0,
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
@@ -9325,7 +9263,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
             ':host': {
                 display: 'table-cell',
                 ...addImportantToEachRule({
-                    padding: `2px var(${cssVariableTablePadding}, ${spacingFluidSmall}) var(${cssVariableTablePadding}, ${spacingFluidSmall})`,
+                    padding: `2px var(${cssVariableTablePadding}, ${spacingFluidSm}) var(${cssVariableTablePadding}, ${spacingFluidSm})`,
                     verticalAlign: 'bottom',
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
@@ -9337,7 +9275,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                     button: {
                         position: 'relative',
                         display: 'flex',
-                        gap: spacingStaticXSmall,
+                        gap: spacingStaticXs$1,
                         width: 'auto',
                         margin: 0, // Removes default button margin on safari 15
                         padding: 0,
@@ -9351,6 +9289,9 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                         border: 0,
                         zIndex: 0,
                         cursor: 'pointer',
+                        '&:focus, &:focus-visible': {
+                            outline: 'none',
+                        },
                         // TODO: re-think if ::before is still needed
                         '&::before': {
                             content: '""',
@@ -9367,7 +9308,8 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                                 },
                             },
                             '&:hover::before': {
-                                ...frostedGlassStyle,
+                                WebkitBackdropFilter: blurFrosted,
+                                backdropFilter: blurFrosted,
                                 backgroundColor: colorFrosted,
                             },
                         }),
@@ -9410,9 +9352,7 @@ const getComponentCss$d = () => {
             ':host': {
                 display: 'table-header-group',
                 ...addImportantToEachRule({
-                    fontSize: fontSizeTextXSmall,
-                    lineHeight: fontLineHeight,
-                    fontWeight: fontWeightSemiBold,
+                    font: `${fontWeightSemibold} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
                     ...hostHiddenStyles,
                 }),
@@ -9446,13 +9386,14 @@ const getComponentCss$c = () => {
     });
 };
 
+const delayTabStyleAttribute = 'data-delay';
 const backgroundMap = {
     canvas: colorCanvas,
     surface: colorSurface,
     frosted: colorFrosted,
 };
 const fontSizeText = {
-    small: typescaleSm,
+    small: typescaleSm$1,
     medium: typescaleMd,
 };
 const getComponentCss$b = (background, size, isCompact) => {
@@ -9477,23 +9418,27 @@ const getComponentCss$b = (background, size, isCompact) => {
                         ...(background === 'none' && {
                             background: colorFrosted,
                         }),
-                        font: `${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+                        font: `${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                         ...buildResponsiveStyles(size, (sizeValue) => ({
                             fontSize: fontSizeText[sizeValue],
                         })),
                         color: colorPrimary,
-                        transition: `${getTransition('color', 'moderate')}, ${getTransition('background-color')}`,
                     },
                     '&(a:focus-visible),&(button:focus-visible)': getFocusBaseStyles(),
                     ...hoverMediaQuery({
                         '&(a:not([aria-current="true"]):hover),&(button:not([aria-selected="true"]):hover)': {
+                            // Only applied on hover since applying it globally causes the active tab to visually flash when navigating in SPAs (where the tabs-bar persist across routes but the children tabs change).
+                            transition: `${getTransition('color', 'moderate')}, ${getTransition('background-color')}`,
                             background: colorFrostedStrong,
                         },
                     }),
+                    // The data attribute is applied before the tabs switching animation runs in the utils to delay the selected tab styles until the animation is finished
+                    [`&(a[${delayTabStyleAttribute}]),&(button[${delayTabStyleAttribute}])`]: {
+                        transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd$1}`, // the background shall be changed immediately after the bar transition has finished
+                    },
                     '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
                         color: colorCanvas,
                         background: colorPrimary,
-                        transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd}`, // the background shall be changed immediately after the bar transition has finished
                     },
                     ...forcedColorsMediaQuery({
                         '&(a),&(button)': {
@@ -9609,7 +9554,7 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 background: colorFrosted,
                 color: colorPrimary,
                 textAlign: 'start',
-                ...textSmallStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 ...hoverMediaQuery({
                     '&:hover > .icon': {
                         backgroundColor: colorFrosted,
@@ -9627,7 +9572,7 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 display: 'block',
                 marginBottom: '-4px',
                 color: colorContrastHigh,
-                fontSize: fontSizeTextXSmall,
+                fontSize: typescaleXs$1,
             },
         }),
         icon: {
@@ -9688,9 +9633,9 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 position: 'relative', // necessary as relative anchor to ensure click area of optional slotted focusable element is in sync
                 display: 'flex',
                 gap: '2px',
-                padding: compact ? '1px 6px' : `${spacingStaticXSmall} 9px`,
-                borderRadius: `var(${legacyRadiusSmall}, calc(${compact ? '1px' : spacingStaticXSmall} + (${fontLineHeight} / 2)))`, // ensures pill shape has a maximum border radius to support multiline.
-                font: textXSmallStyle.font,
+                padding: compact ? '1px 6px' : `${spacingStaticXs} 9px`,
+                borderRadius: `var(${legacyRadiusSmall}, calc(${compact ? '1px' : spacingStaticXs} + (${leadingNormal$1} / 2)))`, // ensures pill shape has a maximum border radius to support multiline.
+                font: `${fontWeightNormal$1} ${typescaleXs$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 ...(variant === 'secondary' && {
                     WebkitBackdropFilter: blurFrosted,
                     backdropFilter: blurFrosted,
@@ -9766,7 +9711,7 @@ const getComponentCss$6 = (type) => {
                 }),
             },
             'ol,ul': {
-                ...textSmallStyle,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 margin: 0,
                 padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) 0`,
                 listStyleType: 'none',
@@ -9774,8 +9719,8 @@ const getComponentCss$6 = (type) => {
             },
             // css selector for text-list-item
             '::slotted(*)': addImportantToEachRule({
-                [cssVariablePaddingTop]: spacingStaticXSmall, // padding top for nested list
-                [cssVariablePaddingBottom]: spacingStaticMedium, // padding bottom for nested list, TODO: in case it's last root list item with a nested list it would result in outer spacing which is not desired
+                [cssVariablePaddingTop]: spacingStaticXs$1, // padding top for nested list
+                [cssVariablePaddingBottom]: spacingStaticMd, // padding bottom for nested list, TODO: in case it's last root list item with a nested list it would result in outer spacing which is not desired
                 [cssVariablePseudoSpace]: isOrderedList
                     ? `var(${cssVariableOrderedGridColumn},1.5rem)`
                     : `var(${cssVariableUnorderedGridColumn},.375rem)`,
@@ -9801,7 +9746,7 @@ const getComponentCss$5 = () => {
                 display: 'grid',
                 ...addImportantToEachRule({
                     gridTemplateColumns: `var(${cssVariablePseudoSpace}) 1fr`,
-                    columnGap: spacingStaticMedium,
+                    columnGap: spacingStaticMd,
                     font: 'inherit', // ensures style can't be overwritten from outside
                     color: 'inherit', // ensures style can't be overwritten from outside
                     ...hostHiddenStyles,
@@ -9836,14 +9781,14 @@ const getComponentCss$4 = (size, weight, align, color, hyphens, ellipsis) => {
                     ...hostHiddenStyles,
                 }),
             },
-            [`::slotted(:is(${TEXT_TAGS.join()}))`]: addImportantToEachRule({
+            [`::slotted(:is(${TEXT_TAGS.join()}))`]: {
                 all: 'unset',
-            }),
+            },
         },
         root: {
             all: 'unset',
             display: 'block',
-            font: `${weightMap[weight]} ${typescaleSm}/${leadingNormal} ${fontPorscheNext}`,
+            font: `${weightMap[weight]} ${typescaleSm$1}/${leadingNormal$1} ${fontPorscheNext$1}`,
             ...buildResponsiveStyles(size, (v) => ({
                 fontSize: sizeMap$1[v],
             })),
@@ -9875,7 +9820,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
     const textareaMinHeight = `calc(var(${cssVarInternalTextareaScaling}) * 3.5rem)`;
     const textareaPaddingBlock = `calc(28px * (var(${cssVarInternalTextareaScaling}) - 0.64285714) + 5px)`;
     const textareaPaddingInline = `calc(22.4px * (var(${cssVarInternalTextareaScaling}) - 0.64285714) + 8px)`;
-    const textareaPaddingBottom = `calc(${fontLineHeight} + calc(22.4px * (var(${cssVarInternalTextareaScaling}) - 0.64285714) + 4px))`;
+    const textareaPaddingBottom = `calc(${leadingNormal$1} + calc(22.4px * (var(${cssVarInternalTextareaScaling}) - 0.64285714) + 4px))`;
     const counterMarginBottom = `calc(11.2px * (var(${cssVarInternalTextareaScaling}) - 0.64285714) + 4px)`;
     const { formStateBorderColor, formStateBackgroundColor, formStateBorderHoverColor } = getThemedFormStateColors(state);
     return getCss({
@@ -9899,14 +9844,14 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
                 maxWidth: 'var(--p-textarea-max-width, unset)',
                 minHeight: `var(--p-textarea-min-height, ${textareaMinHeight})`,
                 maxHeight: 'var(--p-textarea-max-height, unset)',
-                border: `${borderWidthThin} solid ${formStateBorderColor}`,
+                border: `1px solid ${formStateBorderColor}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 background: formStateBackgroundColor,
                 color: colorPrimary,
                 // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character.
                 boxSizing: 'border-box',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                font: textSmallStyle.font,
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                 padding: hasCounter
                     ? `${textareaPaddingBlock} ${textareaPaddingInline} ${textareaPaddingBottom}`
                     : `${textareaPaddingBlock} ${textareaPaddingInline}`,
@@ -9930,7 +9875,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         wrapper: {
             display: 'grid',
@@ -9953,6 +9898,9 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
     });
 };
 
+getMediaQueryMin('s');
+getMediaQueryMax('s');
+
 /**
  * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
  */