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

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)';
@@ -415,6 +62,8 @@ const colorInfo = 'var(--p-color-info)';
 
 const colorInfoFrosted = 'var(--p-color-info-frosted)';
 
+const colorInfoFrostedSoft = 'var(--p-color-info-frosted-soft)';
+
 const colorInfoMedium = 'var(--p-color-info-medium)';
 
 const colorSuccess = 'var(--p-color-success)';
@@ -431,11 +80,13 @@ const colorWarning = 'var(--p-color-warning)';
 
 const colorWarningFrosted = 'var(--p-color-warning-frosted)';
 
+const colorWarningFrostedSoft = 'var(--p-color-warning-frosted-soft)';
+
 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 +102,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 +110,36 @@ 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 spacingStatic2Xs = 'var(--p-spacing-static-2xs)';
+
 const spacingStaticMd = 'var(--p-spacing-static-md)';
 
 const spacingStaticSm$1 = 'var(--p-spacing-static-sm)';
@@ -480,20 +151,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 +182,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 +250,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 +3433,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)`;
+}
+
+const durationMd = '.4s';
+
+/** @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)';
 
-var distExports = requireDist();
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeOut instead. */
+const motionEasingOut = easeOut;
 
-const isDisabledOrLoading = (disabled, loading) => {
-    return disabled || loading;
+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 +3773,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-rc.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-rc.2"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -4042,7 +3912,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 +3961,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 +3974,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 +3997,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 +4075,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 +4089,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 +4132,167 @@ 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,
 };
 
+const getFunctionalComponentNotificationBaseStyles = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    return {
+        '@global': {
+            ...(hasHeadingOrHeadingSlot && {
+                'slot[name="heading"],h1,h2,h3,h4,h5,h6': {
+                    all: 'unset',
+                    gridArea: '1/2',
+                    font: `${fontWeightSemibold} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                    color: colorPrimary,
+                },
+            }),
+            'slot:not([name]),slot[name="description"],p': {
+                all: 'unset',
+                gridArea: hasHeadingOrHeadingSlot ? '2/2' : '1/2',
+                marginTop: hasHeadingOrHeadingSlot ? spacingStaticXs$1 : '0px',
+                font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+                color: colorPrimary,
+            },
+        },
+        notification: {
+            display: 'grid',
+            gridTemplate: `repeat(3, auto) / auto minmax(0, 1fr) repeat(2, auto)`,
+            padding: `calc(${spacingStaticSm$1} + ${spacingFluidSm})`,
+            borderRadius: `var(${legacyRadiusMedium}, ${radius2Xl})`,
+            background: notificationBackgroundMap[state],
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
+            '&::before': {
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/1',
+                    placeSelf: hasHeadingOrHeadingSlot ? 'center' : 'flex-start',
+                    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/-1`,
+                alignSelf: 'flex-start',
+                marginBlock: `calc(-6 * ${spacingStatic2Xs})`,
+                marginInline: `${spacingStaticMd} calc(-6 * ${spacingStatic2Xs})`,
+            },
+        }),
+        ...(hasAction && {
+            action: {
+                gridArea: '3/1/auto/-1',
+                marginTop: spacingStaticMd,
+                [getMediaQueryMin('s')]: {
+                    gridArea: '1/3',
+                    marginTop: '0px',
+                    marginInlineStart: spacingStaticMd,
+                },
+            },
+        }),
+    };
+};
+
+/**
+ * @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-banner-a';
+const getComponentCss$18 = (isOpen, position, state, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    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({
+        ...mergeDeep({
+            '@global': {
+                ':host': {
+                    display: 'contents',
+                    ...addImportantToEachRule({
+                        ...hostHiddenStyles,
+                    }),
+                },
+                ...preventFoucOfNestedElementsStyles,
+                '[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`,
+                    },
+                },
+            },
+        }, {
+            notification: {
+                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),
+            },
+        }, getFunctionalComponentNotificationBaseStyles(state, false, hasDismissButton, hasHeadingOrHeadingSlot)),
+    });
+};
+
 // 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 +4333,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 +4421,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 +4480,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 +4492,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 +4511,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 +4544,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                 ? {
                     display: 'grid',
                     gridTemplateColumns: 'minmax(0,1fr) auto',
-                    columnGap: spacingStaticMedium,
+                    columnGap: spacingStaticMd,
                 }
                 : {
                     display: 'flex',
@@ -4600,7 +4564,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',
             })),
@@ -4637,9 +4601,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 verticalAlign: 'top',
                 ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
                     [`${cssVariableInternalScaling}`]: compactValue ? 0.64285714 : 1,
-                    '--p-internal-border-radius': compactValue ? radiusLg : radiusXl,
+                    '--_p-link-button-a': compactValue ? radiusLg : radiusXl,
                 })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--p-internal-border-radius)'})`),
+                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--_p-link-button-a)'})`),
                 }))),
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
@@ -4654,8 +4618,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 +4657,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
                 })),
@@ -4702,7 +4668,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     };
 };
 
-const cssVariableInternalButtonScaling = '--p-internal-button-scaling';
+const cssVariableInternalButtonScaling = '--_p-button-a';
 const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, isLoading, isCompact) => {
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, isCompact, cssVariableInternalButtonScaling), {
@@ -4720,9 +4686,6 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         },
         ...(isLoading && {
             spinner: {
-                width: fontLineHeight,
-                height: fontLineHeight,
-                pointerEvents: 'none',
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
@@ -4756,11 +4719,249 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
 };
 
 const palette = {
+    light: {
+        green: {
+            '50': 'hsl(115 29.7% 92.7%)',
+            '100': 'hsl(114 30.3% 87.1%)',
+            '200': 'hsl(116 29.2% 81.2%)',
+            '300': 'hsl(115 29.6% 75.5%)',
+            '400': 'hsl(116 29.9% 69.8%)',
+            '500': 'hsl(116 30.1% 64.1%)',
+            '600': 'hsl(115 30% 56.9%)',
+            '700': 'hsl(115 30.4% 49.6%)',
+            '800': 'hsl(115 40.7% 42.4%)',
+            '900': 'hsl(115 55.3% 35.1%)',
+            '950': 'hsl(115 77.5% 27.8%)',
+            '50a': 'hsl(115 77.5% 27.8% / 0.1)',
+            '100a': 'hsl(115 77.5% 27.8% / 0.18)',
+            '200a': 'hsl(115 77.5% 27.8% / 0.26)',
+            '300a': 'hsl(115 77.5% 27.8% / 0.34)',
+            '400a': 'hsl(115 77.5% 27.8% / 0.42)',
+            '500a': 'hsl(115 77.5% 27.8% / 0.5)',
+            '600a': 'hsl(115 77.5% 27.8% / 0.6)',
+            '700a': 'hsl(115 77.5% 27.8% / 0.7)',
+            '800a': 'hsl(115 77.5% 27.8% / 0.8)',
+            '900a': 'hsl(115 77.5% 27.8% / 0.9)',
+            '950a': 'hsl(115 77.5% 27.8%)',
+        },
+        red: {
+            '50': 'hsl(0 53.3% 94.1%)',
+            '100': 'hsl(358 55.6% 89.4%)',
+            '200': 'hsl(359 53.8% 84.7%)',
+            '300': 'hsl(358 54.9% 80%)',
+            '400': 'hsl(358 54% 75.3%)',
+            '500': 'hsl(357 54.7% 70.6%)',
+            '600': 'hsl(358 54.4% 64.7%)',
+            '700': 'hsl(357 54.3% 58.8%)',
+            '800': 'hsl(357 54.4% 52.7%)',
+            '900': 'hsl(357 61.5% 46.9%)',
+            '950': 'hsl(357 78% 41%)',
+            '50a': 'hsl(357 78% 41% / 0.1)',
+            '100a': 'hsl(357 78% 41% / 0.18)',
+            '200a': 'hsl(357 78% 41% / 0.26)',
+            '300a': 'hsl(357 78% 41% / 0.34)',
+            '400a': 'hsl(357 78% 41% / 0.42)',
+            '500a': 'hsl(357 78% 41% / 0.5)',
+            '600a': 'hsl(357 78% 41% / 0.6)',
+            '700a': 'hsl(357 78% 41% / 0.7)',
+            '800a': 'hsl(357 78% 41% / 0.8)',
+            '900a': 'hsl(357 78% 41% / 0.9)',
+            '950a': 'hsl(357 78% 41%)',
+        },
+        yellow: {
+            '50': 'hsl(25 51.5% 93.5%)',
+            '100': 'hsl(27 50.8% 88%)',
+            '200': 'hsl(27 50% 82.7%)',
+            '300': 'hsl(27 50.9% 77.6%)',
+            '400': 'hsl(27 50.4% 72.4%)',
+            '500': 'hsl(28 50.9% 67.3%)',
+            '600': 'hsl(28 50.5% 60.4%)',
+            '700': 'hsl(28 50.6% 53.9%)',
+            '800': 'hsl(27 56.2% 47.5%)',
+            '900': 'hsl(28 73.9% 40.6%)',
+            '950': 'hsl(28 97.7% 34.1%)',
+            '50a': 'hsl(28 97.7% 34.1% / 0.1)',
+            '100a': 'hsl(28 97.7% 34.1% / 0.18)',
+            '200a': 'hsl(28 97.7% 34.1% / 0.26)',
+            '300a': 'hsl(28 97.7% 34.1% / 0.34)',
+            '400a': 'hsl(28 97.7% 34.1% / 0.42)',
+            '500a': 'hsl(28 97.7% 34.1% / 0.5)',
+            '600a': 'hsl(28 97.7% 34.1% / 0.6)',
+            '700a': 'hsl(28 97.7% 34.1% / 0.7)',
+            '800a': 'hsl(28 97.7% 34.1% / 0.8)',
+            '900a': 'hsl(28 97.7% 34.1% / 0.9)',
+            '950a': 'hsl(28 97.7% 34.1%)',
+        },
+        blue: {
+            '50': 'hsl(229 84% 95.1%)',
+            '100': 'hsl(229 82.2% 91.2%)',
+            '200': 'hsl(228 84.6% 87.3%)',
+            '300': 'hsl(228 83.5% 83.3%)',
+            '400': 'hsl(228 82.9% 79.4%)',
+            '500': 'hsl(228 83.9% 75.7%)',
+            '600': 'hsl(228 82.7% 70.6%)',
+            '700': 'hsl(228 82.9% 65.7%)',
+            '800': 'hsl(228 83% 60.8%)',
+            '900': 'hsl(228 83.1% 55.9%)',
+            '950': 'hsl(228 83.2% 51%)',
+            '50a': 'hsl(228 83.2% 51% / 0.1)',
+            '100a': 'hsl(228 83.2% 51% / 0.18)',
+            '200a': 'hsl(228 83.2% 51% / 0.26)',
+            '300a': 'hsl(228 83.2% 51% / 0.34)',
+            '400a': 'hsl(228 83.2% 51% / 0.42)',
+            '500a': 'hsl(228 83.2% 51% / 0.5)',
+            '600a': 'hsl(228 83.2% 51% / 0.6)',
+            '700a': 'hsl(228 83.2% 51% / 0.7)',
+            '800a': 'hsl(228 83.2% 51% / 0.8)',
+            '900a': 'hsl(228 83.2% 51% / 0.9)',
+            '950a': 'hsl(228 83.2% 51%)',
+        },
+        grey: {
+            '50': 'hsl(240 10% 95%)',
+            '100': 'hsl(240 8.1% 92.7%)',
+            '200': 'hsl(225 5.7% 86.3%)',
+            '300': 'hsl(240 2.7% 78.2%)',
+            '400': 'hsl(240 1.9% 68.8%)',
+            '500': 'hsl(240 0.9% 57.6%)',
+            '600': 'hsl(240 0.8% 47.8%)',
+            '700': 'hsl(240 1.6% 37.8%)',
+            '800': 'hsl(240 2.2% 27.3%)',
+            '900': 'hsl(240 4.8% 16.5%)',
+            '950': 'hsl(225 66.7% 1.2%)',
+            '50a': 'hsl(234 9.8% 60% / 0.06)',
+            '100a': 'hsl(240 5% 70% / 0.148)',
+            '200a': 'hsl(236 6.5% 42% / 0.236)',
+            '300a': 'hsl(234 6% 32.9% / 0.324)',
+            '400a': 'hsl(233 6.6% 23.9% / 0.412)',
+            '500a': 'hsl(240 5.3% 14.9% / 0.5)',
+            '600a': 'hsl(240 6.1% 7% / 0.6)',
+            '700a': 'hsl(240 7.1% 11% / 0.7)',
+            '800a': 'hsl(240 8.7% 9% / 0.8)',
+            '900a': 'hsl(240 11.1% 7.1% / 0.9)',
+            '950a': 'hsl(240 15.4% 5.1%)',
+        },
+    },
     dark: {
+        green: {
+            '50': 'hsl(157 33.3% 10.6%)',
+            '100': 'hsl(158 47.1% 13.3%)',
+            '200': 'hsl(157 58% 15.9%)',
+            '300': 'hsl(157 64.6% 18.8%)',
+            '400': 'hsl(157 69.1% 21.6%)',
+            '500': 'hsl(157 72.6% 24.3%)',
+            '600': 'hsl(157 76.1% 27.8%)',
+            '700': 'hsl(157 78.7% 31.4%)',
+            '800': 'hsl(157 81.8% 34.5%)',
+            '900': 'hsl(157 83.5% 38%)',
+            '950': 'hsl(157 84.9% 41.6%)',
+            '50a': 'hsl(157 84.9% 41.6% / 0.1)',
+            '100a': 'hsl(157 84.9% 41.6% / 0.18)',
+            '200a': 'hsl(157 84.9% 41.6% / 0.26)',
+            '300a': 'hsl(157 84.9% 41.6% / 0.34)',
+            '400a': 'hsl(157 84.9% 41.6% / 0.42)',
+            '500a': 'hsl(157 84.9% 41.6% / 0.5)',
+            '600a': 'hsl(157 84.9% 41.6% / 0.6)',
+            '700a': 'hsl(157 84.9% 41.6% / 0.7)',
+            '800a': 'hsl(157 84.9% 41.6% / 0.8)',
+            '900a': 'hsl(157 84.9% 41.6% / 0.9)',
+            '950a': 'hsl(157 84.9% 41.6%)',
+        },
+        red: {
+            '50': 'hsl(0 28.1% 12.5%)',
+            '100': 'hsl(0 39.5% 16.9%)',
+            '200': 'hsl(0 45% 21.4%)',
+            '300': 'hsl(0 48.5% 25.9%)',
+            '400': 'hsl(0 51.6% 30%)',
+            '500': 'hsl(0 53.4% 34.5%)',
+            '600': 'hsl(0 54.9% 40%)',
+            '700': 'hsl(0 56.9% 45.5%)',
+            '800': 'hsl(0 60% 51%)',
+            '900': 'hsl(0 76.6% 56.5%)',
+            '950': 'hsl(0 96.9% 62%)',
+            '50a': 'hsl(0 96.9% 62% / 0.1)',
+            '100a': 'hsl(0 96.9% 62% / 0.18)',
+            '200a': 'hsl(0 96.9% 62% / 0.26)',
+            '300a': 'hsl(0 96.9% 62% / 0.34)',
+            '400a': 'hsl(0 96.9% 62% / 0.42)',
+            '500a': 'hsl(0 96.9% 62% / 0.5)',
+            '600a': 'hsl(0 96.9% 62% / 0.6)',
+            '700a': 'hsl(0 96.9% 62% / 0.7)',
+            '800a': 'hsl(0 96.9% 62% / 0.8)',
+            '900a': 'hsl(0 96.9% 62% / 0.9)',
+            '950a': 'hsl(0 96.9% 62%)',
+        },
+        yellow: {
+            '50': 'hsl(29 34.4% 12%)',
+            '100': 'hsl(28 45.7% 15.9%)',
+            '200': 'hsl(28 52.5% 19.8%)',
+            '300': 'hsl(28 57% 23.7%)',
+            '400': 'hsl(28 60.3% 27.6%)',
+            '500': 'hsl(28 62.7% 31.6%)',
+            '600': 'hsl(28 65.6% 36.5%)',
+            '700': 'hsl(28 66.8% 41.4%)',
+            '800': 'hsl(28 68.6% 46.3%)',
+            '900': 'hsl(28 72.7% 51.2%)',
+            '950': 'hsl(28 90.2% 56.1%)',
+            '50a': 'hsl(28 90.2% 56.1% / 0.1)',
+            '100a': 'hsl(28 90.2% 56.1% / 0.18)',
+            '200a': 'hsl(28 90.2% 56.1% / 0.26)',
+            '300a': 'hsl(28 90.2% 56.1% / 0.34)',
+            '400a': 'hsl(28 90.2% 56.1% / 0.42)',
+            '500a': 'hsl(28 90.2% 56.1% / 0.5)',
+            '600a': 'hsl(28 90.2% 56.1% / 0.6)',
+            '700a': 'hsl(28 90.2% 56.1% / 0.7)',
+            '800a': 'hsl(28 90.2% 56.1% / 0.8)',
+            '900a': 'hsl(28 90.2% 56.1% / 0.9)',
+            '950a': 'hsl(28 90.2% 56.1%)',
+        },
+        blue: {
+            '50': 'hsl(211 37.7% 12%)',
+            '100': 'hsl(210 52.5% 15.7%)',
+            '200': 'hsl(210 61.6% 19.4%)',
+            '300': 'hsl(210 66.4% 23.3%)',
+            '400': 'hsl(210 71% 27.1%)',
+            '500': 'hsl(210 73.4% 31%)',
+            '600': 'hsl(210 76.8% 35.5%)',
+            '700': 'hsl(210 78.6% 40.4%)',
+            '800': 'hsl(210 80.9% 45.1%)',
+            '900': 'hsl(210 81.9% 49.8%)',
+            '950': 'hsl(210 100% 54.5%)',
+            '50a': 'hsl(210 100% 54.5% / 0.1)',
+            '100a': 'hsl(210 100% 54.5% / 0.18)',
+            '200a': 'hsl(210 100% 54.5% / 0.26)',
+            '300a': 'hsl(210 100% 54.5% / 0.34)',
+            '400a': 'hsl(210 100% 54.5% / 0.42)',
+            '500a': 'hsl(210 100% 54.5% / 0.5)',
+            '600a': 'hsl(210 100% 54.5% / 0.6)',
+            '700a': 'hsl(210 100% 54.5% / 0.7)',
+            '800a': 'hsl(210 100% 54.5% / 0.8)',
+            '900a': 'hsl(210 100% 54.5% / 0.9)',
+            '950a': 'hsl(210 100% 54.5%)',
+        },
         grey: {
+            '50': 'hsl(225 66.7% 1.2%)',
+            '100': 'hsl(240 2% 10%)',
+            '200': 'hsl(240 1.3% 15.5%)',
+            '300': 'hsl(240 0.8% 23.7%)',
+            '400': 'hsl(240 0.6% 34.3%)',
+            '500': 'hsl(240 0.4% 47.6%)',
+            '600': 'hsl(240 0.5% 57.5%)',
+            '700': 'hsl(240 0.6% 67.3%)',
+            '800': 'hsl(240 0.9% 77.1%)',
+            '900': 'hsl(240 3% 87.1%)',
             '950': 'hsl(225 100% 99%)',
+            '50a': 'hsl(225 66.7% 1.2% / 0.08)',
             '100a': 'hsl(240 3.7% 26.5% / 0.154)',
-            '200a': 'hsl(240 2% 43% / 0.228)'},
+            '200a': 'hsl(240 2% 43% / 0.228)',
+            '300a': 'hsl(240 1.5% 61.8% / 0.302)',
+            '400a': 'hsl(240 2.9% 79.4% / 0.376)',
+            '500a': 'hsl(240 12.5% 96.9% / 0.45)',
+            '600a': 'hsl(240 12.5% 96.9% / 0.56)',
+            '700a': 'hsl(240 12.5% 96.9% / 0.67)',
+            '800a': 'hsl(240 12.5% 96.9% / 0.78)',
+            '900a': 'hsl(240 12.5% 96.9% / 0.89)',
+            '950a': 'hsl(225 100% 99%)',
+        },
     },
 };
 
@@ -4770,8 +4971,6 @@ const colorFrostedSoftDark = palette.dark.grey['100a'];
 
 const colorPrimaryDark = palette.dark.grey["950"];
 
-const typescaleXs = '.875rem';
-
 const spacingStaticSm = '8px';
 
 const spacingStaticXs = '4px';
@@ -4855,7 +5054,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 +5101,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 +5205,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 +5253,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': {
@@ -5098,6 +5297,10 @@ const cssVarPaddingInlineStart = '--p-carousel-ps';
  * @css-variable {"name": "--p-carousel-pe", "description": "Defines the logical inline end padding of the carousel, the extra space is used to show parts of the next/previous slide. Needs to be used in combination with `--p-carousel-px` or `--p-carousel-ps`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
  */
 const cssVarPaddingInlineEnd = '--p-carousel-pe';
+/**
+ * @css-variable {"name": "--p-carousel-prev-next-color-scheme", "description": "Color Scheme applied to the navigation (prev/next buttons)"}
+ */
+const cssVariablePrevNextColorScheme = '--p-carousel-prev-next-color-scheme';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -5140,7 +5343,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 +5384,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 +5410,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 +5423,13 @@ 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
             },
+            colorScheme: `var(${cssVariablePrevNextColorScheme})`,
         },
         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.
@@ -5426,14 +5630,14 @@ const cssVarCheckboxIconColor = '--p-checkbox-icon-color';
 /**
  * Internal CSS variables
  */
-const cssVarInternalCheckboxScaling = '--__p-checkbox-scaling';
+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 +5646,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 +5740,8 @@ const getFunctionalComponentLabelAfterStyles = () => {
             verticalAlign: 'top',
             '&::slotted(*)': {
                 ...addImportantToEachRule({
-                    marginInlineStart: spacingStaticXs$2,
-                })
+                    marginInlineStart: spacingStaticXs$1,
+                }),
             },
         },
     };
@@ -5553,7 +5757,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 +5774,15 @@ 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})`,
+            },
+            '& > slot[name="label"]::slotted(*)': {
+                ...addImportantToEachRule({
+                    display: 'inline',
+                }),
             },
             ...additionalDefaultJssStyle,
         },
@@ -5586,8 +5795,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 +5817,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 +5839,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         },
         root: {
             display: 'grid',
-            rowGap: spacingStaticXSmall,
+            rowGap: spacingStaticXs$1,
         },
         wrapper: {
             position: 'relative',
@@ -5642,7 +5851,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()),
         },
@@ -5677,9 +5886,9 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
-const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
+const cssVarInternalInputBaseScaling = '--_p-input-base-a';
 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 +5921,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 +5988,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 +6004,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 +6021,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})`,
 };
 
@@ -5851,14 +6060,14 @@ const getIconJssStyle = (isOpen) => {
 const getOptionJssStyle = (componentName, cssVarScalingName) => {
     const gap = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
     const paddingBlock = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
-    const paddingInline = `var(--p-internal-${componentName}-padding-left, calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)) calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)`;
+    const paddingInline = `var(--_p-${componentName}-b, calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)) calc(16.8px * (var(${cssVarScalingName}) - 0.64285714) + 6px)`;
     return {
         display: 'flex',
         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 +6135,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 +6249,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],
             })),
@@ -6088,11 +6297,11 @@ const getComponentCss$$ = (color, orientation) => {
 const cssVariableGridTemplate = '--p-drilldown-grid-template';
 const cssVariableGap = '--p-drilldown-gap';
 // private css variables
-const cssVarColorPrimary = '--_p-a';
-const cssVarColorBackgroundBase = '--_p-b';
-const cssVarColorBackgroundSurface = '--_p-c';
-const cssVarColorBackgroundShading = '--_p-d';
-const cssVarColorBackgroundScroller = '--_p-f';
+const cssVarColorPrimary = '--_p-drilldown-a';
+const cssVarColorBackgroundBase = '--_p-drilldown-b';
+const cssVarColorBackgroundSurface = '--_p-drilldown-c';
+const cssVarColorBackgroundShading = '--_p-drilldown-d';
+const cssVarColorBackgroundScroller = '--_p-drilldown-f';
 const scrollerWidthDesktop = 'clamp(338px, 210px + 18vw, 640px)';
 const mediaQueryMobile = getMediaQueryMax('s');
 const mediaQueryDesktop = getMediaQueryMin('s');
@@ -6106,14 +6315,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 +6340,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 +6351,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 +6372,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 +6389,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 +6434,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 +6529,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 +6540,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 +6555,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 +6603,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 +6621,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 +6644,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 +6675,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 +6693,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 +6752,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 +6771,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 +6787,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 +6846,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 +6866,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 +6887,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
                 })),
@@ -6687,11 +6896,11 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const cssVarBackgroundColor = '--_a';
+const cssVarBackgroundColor = '--_p-dialog-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 +6942,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
@@ -6751,8 +6963,12 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
 const getScrollerJssStyle = (position) => {
     // ensures scrollbar color is set correctly (e.g. when scrollbar is shown on backdrop, on flyout/modal surface or with Auto Dark Mode)
     const backgroundLight = 'rgba(255,255,255,.01)';
+    const backgroundDark = 'rgba(0,0,0,.01)';
     const background = {
-        light: backgroundLight};
+        light: backgroundLight,
+        dark: backgroundDark,
+        auto: backgroundLight,
+    };
     return {
         position: 'absolute',
         isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
@@ -6772,15 +6988,15 @@ 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',
@@ -6818,20 +7034,11 @@ 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`,
-            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%)`,
-        },
+        boxShadow: `0px 0px 30px hsla(from var(${cssVarBackgroundColor}) h s l / 0.35)`
     };
 };
 const getSlotJssStyle = () => {
@@ -6844,7 +7051,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 +7086,8 @@ const getSlotFooterJssStyle = () => {
             inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
             background: colorFrosted,
             borderRadius: radius3Xl,
-            ...frostedGlassStyle,
+            WebkitBackdropFilter: blurFrosted,
+            backdropFilter: blurFrosted,
         },
     };
 };
@@ -7006,7 +7214,7 @@ const getComponentCss$U = (size, weight, align, color, hyphens, ellipsis) => {
         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 +7281,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 +7304,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,97 +7324,18 @@ 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) => {
-    return getCss({
+const getComponentCss$S = (state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot) => {
+    return getCss(mergeDeep({
         '@global': {
             ':host': {
-                display: 'grid',
+                display: 'block',
                 ...addImportantToEachRule({
-                    ...getNotificationRootJssStyle(state, hasAction, hasClose),
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            [`::slotted(:is(${INLINE_NOTIFICATION_HEADING_TAGS.join()}))`]: addImportantToEachRule({
-                all: 'unset',
-            }),
-            'slot[name="heading"]': getHeadingJssStyle,
-        },
-        heading: getHeadingJssStyle,
-        description: {
-            ...textSmallStyle,
-            ...getTextJssStyle,
         },
-        icon: getNotificationIconJssStyle(),
-        content: getNotificationContentJssStyle(),
-        ...(hasAction && {
-            action: {
-                marginTop: borderWidthBase, // To visually align with close button
-                [mediaQueryMaxS$1]: {
-                    gridRowStart: 2,
-                },
-            },
-        }),
-        close: dismissButtonJssStyle,
-    });
+    }, getFunctionalComponentNotificationBaseStyles(state, hasAction, hasDismissButton, hasHeadingOrHeadingSlot)));
 };
 
 // CSS Variables defined in base input
@@ -7359,16 +7488,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 +7507,7 @@ const getUnitCounterJssStyle = () => {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        font: textSmallStyle.font,
+        font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
         color: colorContrastHigh,
     };
 };
@@ -7474,9 +7603,9 @@ const getComponentCss$G = (icon, iconSource, active, stretch, size, color, hideL
                     content: '""',
                     position: 'fixed',
                     insetBlock: offsetVertical,
-                    borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
                     ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                         insetInline: hideLabelValue ? offsetVertical : offsetHorizontal,
+                        borderRadius: `var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : radiusLg})`,
                     })),
                 },
                 '&(a:focus-visible)::before': getFocusBaseStyles(),
@@ -7530,7 +7659,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                     [`&([slot="${headerSlot}"])`]: {
                         display: 'flex',
                         flexWrap: 'wrap',
-                        gap: spacingFluidXSmall,
+                        gap: spacingFluidXs,
                     },
                 },
                 '::slotted(:is(img,picture))': {
@@ -7555,7 +7684,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 +7699,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
         }),
         header: {
             display: 'flex',
-            gap: spacingFluidSmall,
+            gap: spacingFluidSm,
             justifyContent: 'space-between',
             alignItems: 'flex-start',
         },
@@ -7582,11 +7711,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 +7731,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 +7809,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 +7821,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 +7839,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 +7871,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 +7891,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',
             })),
@@ -7770,7 +7899,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
     });
 };
 
-const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
+const cssVariableInternalLinkScaling = '--_p-link-a';
 const getComponentCss$D = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, isCompact) => {
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, isCompact, cssVariableInternalLinkScaling), {
         label: {
@@ -7894,7 +8023,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 +8038,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',
                     }),
@@ -7937,10 +8065,10 @@ const getComponentCss$B = (model, safeZone, size, color) => {
     });
 };
 
-const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
+const cssVarInternalMultiSelectOptionScaling = '--_p-multi-select-option-a';
 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': {
@@ -7965,7 +8093,7 @@ const getComponentCss$A = (isDisabled, selected) => {
     });
 };
 
-const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
+const cssVarInternalOptgroupScaling = '--_p-optgroup-a';
 const paddingBlock = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 4px)`;
 const paddingInline = `calc(16.8px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 6px)`;
 const gap = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 4px)`;
@@ -7977,8 +8105,8 @@ const getComponentCss$z = (isDisabled) => {
                 ...hostHiddenStyles,
             }),
             '::slotted(*)': {
-                '--p-internal-select-option-padding-left': paddingSlottedInlineStart,
-                '--p-internal-multi-select-option-padding-left': paddingSlottedInlineStart,
+                '--_p-select-option-b': paddingSlottedInlineStart,
+                '--_p-multi-select-option-b': paddingSlottedInlineStart,
             },
             '[role="group"]': {
                 display: 'flex',
@@ -7988,7 +8116,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()),
             },
@@ -7996,7 +8124,7 @@ const getComponentCss$z = (isDisabled) => {
     });
 };
 
-const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
+const cssVarInternalMultiSelectScaling = '--_p-multi-select-a';
 const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     return getCss({
         '@global': {
@@ -8023,9 +8151,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),
@@ -8063,11 +8191,11 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
             },
             ul: {
                 display: 'flex',
-                gap: spacingStaticXSmall,
+                gap: spacingStaticXs$1,
                 margin: 0,
                 padding: 0,
                 [mediaQueryMinS]: {
-                    gap: spacingStaticSmall,
+                    gap: spacingStaticSm$1,
                 },
             },
             li: {
@@ -8117,7 +8245,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 +8255,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',
@@ -8159,11 +8288,11 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
     });
 };
 
-const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
+const cssVarInternalPinCodeScaling = '--_p-pin-code-a';
 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 +8319,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 +8341,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 +8395,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 +8423,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 +8447,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',
@@ -8331,16 +8461,16 @@ const getComponentCss$v = () => {
     });
 };
 
-const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-scaling';
+const cssVarInternalRadioGroupOptionScaling = '--_p-radio-group-option-a';
 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 +8489,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 +8535,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()),
         },
@@ -8435,7 +8565,7 @@ const getComponentCss$u = (disabled, loading, state) => {
     });
 };
 
-const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
+const cssVarInternalRadioGroupScaling = '--_p-radio-group-a';
 const groupRadioGroupDirectionJssStyles = {
     column: {
         flexFlow: 'column nowrap',
@@ -8473,7 +8603,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 +8697,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 +8744,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 +8776,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: {
@@ -8665,7 +8812,7 @@ isSticky, hasScrollbar, isCompact) => {
     });
 };
 
-const cssVarInternalSegmentedControlScaling = '--p-internal-segmented-control-scaling';
+const cssVarInternalSegmentedControlScaling = '--_p-segmented-control-a';
 const getScalingVar = (compact) => `var(${cssVarInternalSegmentedControlScaling}, ${compact ? 0.5 : 1})`;
 const ICON_OFFSET = '4px';
 const ICON_SIZE = '1.5rem';
@@ -8677,7 +8824,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 +8849,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,
@@ -8750,7 +8897,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
         }),
     });
 };
-const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, state) => {
+
+const MIN_ITEM_WIDTH = 46;
+const MAX_ITEM_WIDTH = 220;
+const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, state, noWrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8763,18 +8913,20 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
-                ...buildResponsiveStyles(columns, (col) => ({
-                    gridTemplateColumns: col === 'auto'
-                        ? `repeat(auto-fit, ${maxWidth}px)`
-                        : `repeat(${col}, minmax(0, 1fr))`,
-                })),
+                ...(noWrap
+                    ? { gridAutoFlow: 'column', gridAutoColumns: 'max-content' }
+                    : buildResponsiveStyles(columns, (col) => ({
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${(maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && minWidth) || maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
+                    }))),
                 gap: '6px',
             },
         },
         root: {
             all: 'unset',
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         // .label / .required
         ...getFunctionalComponentLabelStyles(disabled, false, hideLabel, {
@@ -8782,10 +8934,15 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
+        ...(noWrap && {
+            scroller: {
+                margin: `-${spacingStaticXs$1} 0`,
+            },
+        }),
     });
 };
 
-const cssVarInternalSelectOptionScaling = '--p-internal-select-option-scaling';
+const cssVarInternalSelectOptionScaling = '--_p-select-option-a';
 const getComponentCss$p = (isDisabled) => {
     return getCss({
         '@global': {
@@ -8810,7 +8967,7 @@ const getComponentCss$p = (isDisabled) => {
     });
 };
 
-const cssVarInternalSelectScaling = '--p-internal-select-scaling';
+const cssVarInternalSelectScaling = '--_p-select-a';
 const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
     return getCss({
         '@global': {
@@ -8838,9 +8995,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 +9054,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 +9080,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 +9117,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 +9189,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 +9218,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,13 +9260,13 @@ 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] })),
         },
     });
 };
 
-const cssVarInternalSwitchScaling = '--p-internal-switch-scaling';
+const cssVarInternalSwitchScaling = '--_p-switch-a';
 const getColors$1 = (checked, loading) => {
     return {
         buttonBorderColor: checked ? colorSuccessLow : colorContrastLow,
@@ -9123,12 +9280,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 +9298,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 +9319,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 +9345,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',
@@ -9250,10 +9407,10 @@ const cssVarScrollIndicatorTop = '--p-table-scroll-indicator-top';
  * @css-variable {"name": "--p-table-scroll-indicator-bottom", "description": "Defines the distance from the bottom of the viewport at which the scroll indicator sticks when scrolling up and `sticky` is enabled.", "defaultValue": "0px"}
  */
 const cssVarScrollIndicatorBottom = '--p-table-scroll-indicator-bottom';
-const cssVariableTablePadding = '--_a';
-const cssVariableTableHoverColor = '--_b';
-const cssVariableTableBorderColor = '--_c';
-const cssVariableTableBorderWidth = '--_d';
+const cssVariableTablePadding = '--_p-table-a';
+const cssVariableTableHoverColor = '--_p-table-b';
+const cssVariableTableBorderColor = '--_p-table-c';
+const cssVariableTableBorderWidth = '--_p-table-d';
 const getComponentCss$h = (isCompact, layout) => {
     return getCss({
         '@global': {
@@ -9264,11 +9421,10 @@ const getComponentCss$h = (isCompact, layout) => {
                     '--p-scroller-indicator-bottom': `var(${cssVarScrollIndicatorBottom},0px)`,
                     [cssVariableTableHoverColor]: colorFrosted,
                     [cssVariableTableBorderColor]: colorContrastLow,
-                    ...(isCompact && {
-                        [cssVariableTablePadding]: spacingStaticSmall,
-                    }),
+                    [cssVariableTablePadding]: isCompact ? spacingStaticSm$1 : spacingFluidSm,
+                    [cssVariableTableBorderWidth]: '1px',
                     ...hostHiddenStyles,
-                    ...textSmallStyle,
+                    font: `${fontWeightNormal$1} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
                     color: colorPrimary,
                     textAlign: 'start',
                 }),
@@ -9276,7 +9432,7 @@ const getComponentCss$h = (isCompact, layout) => {
             ...preventFoucOfNestedElementsStyles,
         },
         caption: {
-            marginBottom: spacingFluidMedium,
+            marginBottom: spacingFluidMd$1,
         },
         table: {
             display: 'table',
@@ -9301,7 +9457,7 @@ const getComponentCss$g = (multiline) => {
                 display: 'table-cell',
                 verticalAlign: 'middle',
                 ...addImportantToEachRule({
-                    padding: `var(${cssVariableTablePadding}, ${spacingFluidSmall})`,
+                    padding: `var(${cssVariableTablePadding})`,
                     margin: 0,
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
@@ -9325,7 +9481,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 +9493,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 +9507,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 +9526,8 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                                 },
                             },
                             '&:hover::before': {
-                                ...frostedGlassStyle,
+                                WebkitBackdropFilter: blurFrosted,
+                                backdropFilter: blurFrosted,
                                 backgroundColor: colorFrosted,
                             },
                         }),
@@ -9410,9 +9570,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,
                 }),
@@ -9431,7 +9589,7 @@ const getComponentCss$c = () => {
             ':host': {
                 display: 'table-row',
                 ...addImportantToEachRule({
-                    borderBottom: `var(${cssVariableTableBorderWidth},1px) solid var(${cssVariableTableBorderColor})`,
+                    borderBottom: `var(${cssVariableTableBorderWidth}) solid var(${cssVariableTableBorderColor})`,
                     transition: getTransition('background'),
                     ...hostHiddenStyles,
                     ...hoverMediaQuery({
@@ -9446,16 +9604,25 @@ const getComponentCss$c = () => {
     });
 };
 
+const animatingAttribute = 'data-animating';
+
 const backgroundMap = {
     canvas: colorCanvas,
     surface: colorSurface,
     frosted: colorFrosted,
 };
 const fontSizeText = {
-    small: typescaleSm,
+    small: typescaleSm$1,
     medium: typescaleMd,
 };
-const getComponentCss$b = (background, size, isCompact) => {
+const getComponentCss$b = (background, size, isCompact, activeTabIndex) => {
+    const hasActive = activeTabIndex !== undefined;
+    // :nth-child is 1-based
+    const nth = hasActive ? activeTabIndex + 1 : 0;
+    const activeSelector = `&(a:nth-child(${nth})),&(button:nth-child(${nth}))`;
+    const notActiveHoverSelector = hasActive
+        ? `&(a:not(:nth-child(${nth})):hover),&(button:not(:nth-child(${nth})):hover)`
+        : '&(a:hover),&(button:hover)';
     return getCss({
         '@global': {
             ':host': {
@@ -9477,24 +9644,33 @@ 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)': {
+                        [notActiveHoverSelector]: {
+                            // 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,
                         },
                     }),
-                    '&(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
-                    },
+                    ...(hasActive && {
+                        [activeSelector]: {
+                            color: colorCanvas,
+                        },
+                        // Transition color and background when animation is playing
+                        [`&(a:nth-child(${nth})[${animatingAttribute}]),&(button:nth-child(${nth})[${animatingAttribute}])`]: {
+                            transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd$1}`,
+                        },
+                        // Apply background only when no active animation is playing
+                        [`&(a:nth-child(${nth}):not([${animatingAttribute}])),&(button:nth-child(${nth}):not([${animatingAttribute}]))`]: {
+                            background: colorPrimary,
+                        },
+                    }),
                     ...forcedColorsMediaQuery({
                         '&(a),&(button)': {
                             forcedColorAdjust: 'none',
@@ -9508,9 +9684,11 @@ const getComponentCss$b = (background, size, isCompact) => {
                             color: 'ButtonText',
                             boxShadow: 'inset 0 0 0 2px ButtonBorder',
                         },
-                        '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
-                            transition: 'unset',
-                        },
+                        ...(hasActive && {
+                            [activeSelector]: {
+                                transition: 'unset',
+                            },
+                        }),
                     }),
                 },
             }),
@@ -9577,7 +9755,7 @@ const getComponentCss$9 = () => {
     });
 };
 
-const cssVarInternalTagDismissibleScaling = '--p-internal-tag-dismissible-scaling';
+const cssVarInternalTagDismissibleScaling = '--_p-tag-dismissible-a';
 const getComponentCss$8 = (hasLabel, isCompact) => {
     const buttonPaddingBlock = hasLabel
         ? `calc(16.8px * (var(${cssVarInternalTagDismissibleScaling}) - 0.64285714))`
@@ -9609,7 +9787,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 +9805,7 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 display: 'block',
                 marginBottom: '-4px',
                 color: colorContrastHigh,
-                fontSize: fontSizeTextXSmall,
+                fontSize: typescaleXs$1,
             },
         }),
         icon: {
@@ -9644,25 +9822,37 @@ const colorTextMap = {
     primary: colorCanvas,
     secondary: colorPrimary,
     info: colorCanvas,
+    'info-frosted': colorPrimary,
     success: colorCanvas,
+    'success-frosted': colorPrimary,
     warning: colorCanvas,
+    'warning-frosted': colorPrimary,
     error: colorCanvas,
+    'error-frosted': colorPrimary,
 };
 const colorBackgroundMap = {
     primary: colorPrimary,
     secondary: colorFrostedStrong,
     info: colorInfo,
+    'info-frosted': colorInfoFrosted,
     success: colorSuccess,
+    'success-frosted': colorSuccessFrosted,
     warning: colorWarning,
+    'warning-frosted': colorWarningFrosted,
     error: colorError,
+    'error-frosted': colorErrorFrosted,
 };
 const colorBackgroundHoverMap = {
     primary: colorContrastHigh,
     secondary: colorFrosted,
     info: colorInfoMedium,
+    'info-frosted': colorInfoFrostedSoft,
     success: colorSuccessMedium,
+    'success-frosted': colorSuccessFrostedSoft,
     warning: colorWarningMedium,
+    'warning-frosted': colorWarningFrostedSoft,
     error: colorErrorMedium,
+    'error-frosted': colorErrorFrostedSoft,
 };
 const getColors = (variant) => {
     return {
@@ -9688,10 +9878,16 @@ 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,
-                ...(variant === 'secondary' && {
+                padding: compact
+                    ? `${spacingStatic2Xs} ${spacingStaticSm$1}`
+                    : `${spacingStaticXs} calc(12 * ${spacingStatic2Xs})`,
+                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' ||
+                    variant === 'info-frosted' ||
+                    variant === 'success-frosted' ||
+                    variant === 'warning-frosted' ||
+                    variant === 'error-frosted') && {
                     WebkitBackdropFilter: blurFrosted,
                     backdropFilter: blurFrosted,
                 }),
@@ -9746,13 +9942,13 @@ const isListTypeNumbered = (type) => {
     return type === 'numbered';
 };
 
-const cssVariablePaddingTop = '--p-internal-text-list-padding-top';
-const cssVariablePaddingBottom = '--p-internal-text-list-padding-bottom';
-const cssVariablePseudoSpace = '--p-internal-text-list-pseudo-space';
-const cssVariableUnorderedGridColumn = '--p-internal-text-list-unordered-grid-column';
-const cssVariableUnorderedPseudoContent = '--p-internal-text-list-unordered-pseudo-content';
-const cssVariableOrderedGridColumn = '--p-internal-text-list-ordered-grid-column';
-const cssVariableOrderedPseudoSuffix = '--p-internal-text-list-ordered-pseudo-suffix';
+const cssVariableOrderedGridColumn = '--_p-text-list-a';
+const cssVariableOrderedPseudoSuffix = '--_p-text-list-b';
+const cssVariablePaddingBottom = '--_p-text-list-c';
+const cssVariablePaddingTop = '--_p-text-list-d';
+const cssVariablePseudoSpace = '--_p-text-list-e';
+const cssVariableUnorderedGridColumn = '--_p-text-list-f';
+const cssVariableUnorderedPseudoContent = '--_p-text-list-g';
 const counter = 'p-text-list-counter';
 const getComponentCss$6 = (type) => {
     const isOrderedList = isListTypeOrdered(type);
@@ -9766,7 +9962,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 +9970,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 +9997,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,
@@ -9843,7 +10039,7 @@ const getComponentCss$4 = (size, weight, align, color, hyphens, ellipsis) => {
         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],
             })),
@@ -9863,7 +10059,7 @@ const getComponentCss$4 = (size, weight, align, color, hyphens, ellipsis) => {
     });
 };
 
-const cssVarInternalTextareaScaling = '--p-internal-textarea-scaling';
+const cssVarInternalTextareaScaling = '--_p-textarea-a';
 /**
  * @css-variable {"name":"--p-textarea-field-sizing","description":"Controls CSS `field-sizing` for textarea.","defaultValue":"unset"}
  * @css-variable {"name":"--p-textarea-min-width","description":"Minimum width of the textarea.","defaultValue":"52px"}
@@ -9875,7 +10071,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 +10095,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 +10126,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         root: {
             display: 'grid',
-            gap: spacingStaticXSmall,
+            gap: spacingStaticXs$1,
         },
         wrapper: {
             display: 'grid',
@@ -9957,11 +10153,11 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
  * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
  */
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
-const cssVariablePositionBottomInternal = '--_p-a';
+const cssVariablePositionBottomInternal = '--_p-toast-a';
 const ANIMATION_DURATION = motionDurationModerate;
 const duration = ANIMATION_DURATION;
 const getKeyframes = (direction, outsideStyle) => {
-    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
+    const insideStyle = { transform: 'translate3d(0,0,0)' };
     return direction === 'in'
         ? {
             from: outsideStyle,
@@ -9973,7 +10169,6 @@ const getKeyframes = (direction, outsideStyle) => {
         };
 };
 const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
-    opacity: 0,
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
 const toastCloseClassName = 'close';
@@ -10058,4 +10253,4 @@ const getComponentCss = (size) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$19 as getAccordionCss, getComponentCss$18 as getBannerCss, getComponentCss$15 as getButtonCss, getComponentCss$17 as getButtonPureCss, getComponentCss$16 as getButtonTileCss, getComponentCss$14 as getCanvasCss, getComponentCss$13 as getCarouselCss, getComponentCss$12 as getCheckboxCss, getComponentCss$11 as getCrestCss, getComponentCss$10 as getDisplayCss, getComponentCss$$ as getDividerCss, getComponentCss$_ as getDrilldownCss, getComponentCss$Z as getDrilldownItemCss, getComponentCss$Y as getDrilldownLinkCss, getComponentCss$X as getFieldsetCss, getComponentCss$W as getFlagCss, getComponentCss$V as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelAfterStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentNotificationBaseStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getHeadingCss, getComponentCss$T as getIconCss, getComponentCss$S as getInlineNotificationCss, getComponentCss$R as getInputDateCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputMonthCss, getComponentCss$O as getInputNumberCss, getComponentCss$N as getInputPasswordCss, getComponentCss$M as getInputSearchCss, getComponentCss$L as getInputTelCss, getComponentCss$K as getInputTextCss, getComponentCss$J as getInputTimeCss, getComponentCss$I as getInputUrlCss, getComponentCss$H as getInputWeekCss, getComponentCss$D as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$E as getLinkTileCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$y as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$z as getOptgroupCss, getComponentCss$x as getPaginationCss, getComponentCss$w as getPinCodeCss, getComponentCss$v as getPopoverCss, getComponentCss$t as getRadioGroupCss, getComponentCss$u as getRadioGroupOptionCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$n as getSheetCss, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$g as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };