@porsche-design-system/components-react 4.0.0-alpha.0 → 4.0.0-beta.1

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

@@ -1,61 +1,81 @@
-const borderWidthRegular = '2px';
+const blurFrosted = 'blur(32px)';
 
-const borderWidthBase = borderWidthRegular;
+/** @deprecated since v4.0.0, will be removed with next major release. Use backdropFilter: blurFrosted instead  */
+const frostedGlassStyle = {
+    WebkitBackdropFilter: blurFrosted,
+    backdropFilter: blurFrosted,
+};
 
-const borderWidthThin$1 = '1px';
+/** @deprecated since v4.0.0, will be removed with next major release. Use 2px instead. */
+const borderWidthBase = '2px';
 
-const borderWidthThin = borderWidthThin$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use 1px instead. */
+const borderWidthThin = '1px';
 
-const shadowLow = '0px 3px 8px rgba(0,0,0,.16)';
+const fontPorscheNext$1 = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
-const dropShadowLowStyle = {
-    boxShadow: shadowLow,
-};
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
+const fontFamily = fontPorscheNext$1;
 
-const shadowHigh = '0px 8px 40px rgba(0,0,0,.16)';
+const leadingNormal$1 = 'calc(6px + 2.125ex)';
 
-const dropShadowHighStyle = {
-    boxShadow: shadowHigh,
-};
+/** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
+const fontLineHeight = leadingNormal$1;
 
-const fontFamily$1 = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
+const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
-const fontFamily = fontFamily$1;
+const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
 
-const fontHyphenationStyle = {
-    overflowWrap: 'break-word',
-    // @ts-ignore
-    hyphens: 'var(--p-hyphens, auto)',
-};
+const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
 
-const fontLineHeight$1 = 'calc(6px + 2.125ex)';
+const typescaleLg = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
 
-const fontLineHeight = fontLineHeight$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleLg instead. */
+const fontSizeHeadingLarge = typescaleLg;
 
-const fontSize2Xs = '.75rem';
+const typescaleMd$1 = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
 
-const fontSizeTextXXSmall = fontSize2Xs;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
+const fontSizeHeadingMedium = typescaleMd$1;
 
-const fontSizeXs = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
+const typescaleSm$1 = '1rem';
 
-const fontSizeTextXSmall = fontSizeXs;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+const fontSizeHeadingSmall = typescaleSm$1;
 
-const fontSizeSm = '1rem';
+const typescaleXl = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
-const fontSizeTextSmall = fontSizeSm;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
+const fontSizeHeadingXLarge = typescaleXl;
 
-const fontSizeMd = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
+const typescale2Xl = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
 
-const fontSizeTextMedium = fontSizeMd;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescale2Xl instead. */
+const fontSizeHeadingXXLarge = typescale2Xl;
 
-const fontSizeLg = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleLg instead. */
+const fontSizeTextLarge = typescaleLg;
 
-const fontSizeTextLarge = fontSizeLg;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
+const fontSizeTextMedium = typescaleMd$1;
 
-const fontSizeXl = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+const fontSizeTextSmall = typescaleSm$1;
 
-const fontSizeTextXLarge = fontSizeXl;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
+const fontSizeTextXLarge = typescaleXl;
 
+const typescaleXs$1 = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
+const fontSizeTextXSmall = typescaleXs$1;
+
+const typescale2Xs = '.75rem';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescale2Xs instead. */
+const fontSizeTextXXSmall = typescale2Xs;
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescale variables instead. */
 const fontSizeText = {
     xxSmall: fontSizeTextXXSmall,
     xSmall: fontSizeTextXSmall,
@@ -65,48 +85,33 @@ const fontSizeText = {
     xLarge: fontSizeTextXLarge,
 };
 
-const fontSizeHeadingSmall = fontSizeSm;
-
-const fontSizeHeadingMedium = fontSizeMd;
-
-const fontSizeHeadingLarge = fontSizeLg;
-
-const fontSizeHeadingXLarge = fontSizeXl;
-
-const fontSize2Xl = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
-
-const fontSizeHeadingXXLarge = fontSize2Xl;
-
-const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
-
-const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+const fontStyleNormal = 'normal';
 
-const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use 'normal' instead. */
+const fontVariant = 'normal';
 
-const fontWeightRegular$1 = 400;
+const fontWeightNormal = 400;
 
-const fontWeightRegular = fontWeightRegular$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
+const fontWeightRegular = fontWeightNormal;
 
-const fontWeightSemiBold$1 = 600;
+const fontWeightSemibold$1 = 600;
 
-const fontWeightSemiBold = fontWeightSemiBold$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightSemibold instead. */
+const fontWeightSemiBold = fontWeightSemibold$1;
 
 const fontWeightBold$1 = 700;
 
 const fontWeightBold = fontWeightBold$1;
 
-const fontStyleNormal = 'normal';
-
-const fontVariant = 'normal';
-
-const blurFrosted = 'blur(32px)';
-
-const frostedGlassStyle = {
-    WebkitBackdropFilter: blurFrosted,
-    backdropFilter: blurFrosted,
+const fontHyphenationStyle = {
+    overflowWrap: 'break-word',
+    // @ts-ignore
+    hyphens: 'var(--p-hyphens, auto)',
 };
 
-const gradientFade = 'hsla(0,0%,0%,.8) 0%,' +
+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%,' +
@@ -123,36 +128,38 @@ const gradientFade = 'hsla(0,0%,0%,.8) 0%,' +
     '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, ${gradientFade});`,
+    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, ${gradientFade});`,
+    background: `linear-gradient(to top, ${gradientStopsFadeDark});`,
 };
 
 const breakpointBase = 0;
 
-const breakpointXs = 480;
-
-const breakpointXS = breakpointXs;
-
-const breakpointSm = 760;
+const breakpointLg = 1300;
 
-const breakpointS = breakpointSm;
+const breakpointL = breakpointLg;
 
 const breakpointMd = 1000;
 
 const breakpointM = breakpointMd;
 
-const breakpointLg = 1300;
+const breakpointSm = 760;
 
-const breakpointL = breakpointLg;
+const breakpointS = breakpointSm;
 
 const breakpointXl = 1760;
 
 const breakpointXL = breakpointXl;
 
+const breakpointXs = 480;
+
+const breakpointXS = breakpointXs;
+
 const breakpoint2Xl = 1920;
 
 const breakpointXXL = breakpoint2Xl;
@@ -173,6 +180,7 @@ function getMediaQueryMin(min) {
 
 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;
@@ -194,6 +202,20 @@ 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');
@@ -218,67 +240,97 @@ const gridBasicOffset = {
     xxl: gridBasicOffsetXXL,
 };
 
-const motionDurationShort$1 = '.25s';
-
-const motionDurationShort = motionDurationShort$1;
-
-const motionEaseInOut = 'cubic-bezier(.25,.1,.25,1)';
-
-const motionEasingBase = motionEaseInOut;
-
 const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
-const motionDurationLong$1 = '.6s';
+const durationLg = '.6s';
 
-const motionDurationLong = motionDurationLong$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use durationLg instead. */
+const motionDurationLong = durationLg;
 
-const motionDurationModerate$1 = '.4s';
+const durationMd = '.4s';
 
-const motionDurationModerate = motionDurationModerate$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use durationMd instead. */
+const motionDurationModerate = durationMd;
 
-const motionDurationVeryLong$1 = '1.2s';
+const durationSm = '.25s';
 
-const motionDurationVeryLong = motionDurationVeryLong$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use durationSm instead. */
+const motionDurationShort = durationSm;
 
-const motionEaseIn = 'cubic-bezier(0,0,.2,1)';
+const durationXl = '1.2s';
 
-const motionEasingIn = motionEaseIn;
+/** @deprecated since v4.0.0, will be removed with next major release. Use durationXl instead. */
+const motionDurationVeryLong = durationXl;
 
-const motionEaseOut = 'cubic-bezier(.4,0,.5,1)';
+const easeInOut = 'cubic-bezier(.25,.1,.25,1)';
 
-const motionEasingOut = motionEaseOut;
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeInOut instead. */
+const motionEasingBase = easeInOut;
 
-const spacingStaticXs$1 = '4px';
+const easeIn = 'cubic-bezier(0,0,.2,1)';
 
-const spacingStaticXSmall = spacingStaticXs$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeIn instead. */
+const motionEasingIn = easeIn;
 
-const spacingStaticSm$1 = '8px';
+const easeOut = 'cubic-bezier(.4,0,.5,1)';
 
-const spacingStaticSmall = spacingStaticSm$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use easeOut instead. */
+const motionEasingOut = easeOut;
 
-const spacingStaticMd = '16px';
+const shadowLg = '0px 8px 40px rgba(0,0,0,.16)';
 
-const spacingStaticMedium = spacingStaticMd;
+/** @deprecated since v4.0.0, will be removed with next major release. Use boxShadow: shadowLg instead. */
+const dropShadowHighStyle = {
+    boxShadow: shadowLg,
+};
 
-const spacingFluidXs = 'clamp(4px, 0.25vw + 3px, 8px)';
+const shadowSm = '0px 3px 8px rgba(0,0,0,.16)';
 
-const spacingFluidXSmall = spacingFluidXs;
+/** @deprecated since v4.0.0, will be removed with next major release. Use boxShadow: shadowSm instead. */
+const dropShadowLowStyle = {
+    boxShadow: shadowSm,
+};
+
+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 spacingFluidLg = 'clamp(32px, 2.75vw + 23px, 76px)';
+const spacingFluidXs = 'clamp(4px, 0.25vw + 3px, 8px)';
 
-const spacingFluidLarge = spacingFluidLg;
+/** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidXs instead. */
+const spacingFluidXSmall = spacingFluidXs;
+
+const spacingStaticMd = '16px';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticMd instead. */
+const spacingStaticMedium = spacingStaticMd;
+
+const spacingStaticSm$1 = '8px';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticSm instead. */
+const spacingStaticSmall = spacingStaticSm$1;
+
+const spacingStaticXs$2 = '4px';
+
+/** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticXs instead. */
+const spacingStaticXSmall = spacingStaticXs$2;
+
+const spacingStaticXs$1 = spacingStaticXs$2;
 
 const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseDisplayLg instead. */
 const displayLargeStyle = {
     font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
 };
@@ -286,18 +338,22 @@ const displayLargeStyle = {
 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}`,
 };
@@ -305,53 +361,122 @@ const headingXXLargeStyle = {
 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}`,
     ...fontHyphenationStyle,
 };
 
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextXs instead. */
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
     ...fontHyphenationStyle,
 };
 
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextSm instead. */
 const textSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
     ...fontHyphenationStyle,
 };
 
+/** @deprecated since v4.0.0, will be removed with next major release. Use proseTextMd instead. */
 const textMediumStyle = {
     font: `${_textFontPartA}${fontSizeTextMedium}${_textFontPartB}`,
     ...fontHyphenationStyle,
 };
 
+const proseTextSmStyle = {
+    font: `normal normal ${fontWeightNormal} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
+    ...fontHyphenationStyle,
+};
+
 const alphaDisabled = 0.4;
 
-const palette = {
-    dark: {
-        grey: {
-            '950': 'hsl(240, 12.5%, 96.9%)',
-            '100a': 'hsla(240, 3.7%, 26.5%, 0.154)',
-            '200a': 'hsla(240, 2.2%, 44.1%, 0.228)'},
-    },
-};
+const legacyRadiusLarge = '--_p-legacy-radius-large';
 
-const colorFrostedDark = palette.dark.grey['200a'];
+const legacyRadiusMedium = '--_p-legacy-radius-medium';
 
-const colorFrostedSoftDark = palette.dark.grey['100a'];
+const legacyRadiusSmall = '--_p-legacy-radius-small';
 
-const colorPrimaryDark = palette.dark.grey["950"];
+const radius2Xl = 'var(--p-radius-2xl)';
 
-const spacingStaticSm = '8px';
+const radius3Xl = 'var(--p-radius-3xl)';
 
-const spacingStaticXs = '4px';
+const radius4Xl = 'var(--p-radius-4xl)';
+
+const radiusFull = 'var(--p-radius-full)';
+
+const radiusLg = 'var(--p-radius-lg)';
+
+const radiusMd = 'var(--p-radius-md)';
+
+const radiusSm = 'var(--p-radius-sm)';
+
+const radiusXl = 'var(--p-radius-xl)';
+
+const colorFocus = 'var(--p-color-focus)';
+
+const colorBackdrop = 'var(--p-color-backdrop)';
 
-// src/generated/cssVariableDefinitionDark.ts
+const colorCanvas = 'var(--p-color-canvas)';
 
-// src/generated/cssVariables.ts
-var cssVariables = { "focusColor": "var(--p-color-focus)", "disabledColor": "var(--p-color-disabled)", "canvasColor": "var(--p-color-canvas)", "surfaceColor": "var(--p-color-surface)", "frostedColor": "var(--p-color-frosted)", "frostedSoftColor": "var(--p-color-frosted-soft)", "backdropColor": "var(--p-color-backdrop)", "contrastLowerColor": "var(--p-color-contrast-lower)", "contrastLowColor": "var(--p-color-contrast-low)", "contrastMediumColor": "var(--p-color-contrast-medium)", "contrastHighColor": "var(--p-color-contrast-high)", "primaryColor": "var(--p-color-primary)", "successColor": "var(--p-color-success)", "successLowColor": "var(--p-color-success-low)", "successFrostedColor": "var(--p-color-success-frosted)", "successFrostedSoftColor": "var(--p-color-success-frosted-soft)", "warningColor": "var(--p-color-warning)", "warningFrostedColor": "var(--p-color-warning-frosted)", "warningFrostedSoftColor": "var(--p-color-warning-frosted-soft)", "errorColor": "var(--p-color-error)", "errorLowColor": "var(--p-color-error-low)", "errorFrostedColor": "var(--p-color-error-frosted)", "errorFrostedSoftColor": "var(--p-color-error-frosted-soft)", "infoColor": "var(--p-color-info)", "infoFrostedColor": "var(--p-color-info-frosted)", "infoFrostedSoftColor": "var(--p-color-info-frosted-soft)"};
+const colorFrosted = 'var(--p-color-frosted)';
 
-const colors = cssVariables;
+const colorFrostedSoft = 'var(--p-color-frosted-soft)';
+
+const colorFrostedStrong = 'var(--p-color-frosted-strong)';
+
+const colorSurface = 'var(--p-color-surface)';
+
+const colorContrastHigh = 'var(--p-color-contrast-high)';
+
+const colorContrastLow = 'var(--p-color-contrast-low)';
+
+const colorContrastLower = 'var(--p-color-contrast-lower)';
+
+const colorContrastMedium = 'var(--p-color-contrast-medium)';
+
+const colorPrimary = 'var(--p-color-primary)';
+
+const colorError = 'var(--p-color-error)';
+
+const colorErrorFrosted = 'var(--p-color-error-frosted)';
+
+const colorErrorFrostedSoft = 'var(--p-color-error-frosted-soft)';
+
+const colorInfo = 'var(--p-color-info)';
+
+const colorInfoFrosted = 'var(--p-color-info-frosted)';
+
+const colorInfoFrostedSoft = 'var(--p-color-info-frosted-soft)';
+
+const colorSuccess = 'var(--p-color-success)';
+
+const colorSuccessFrosted = 'var(--p-color-success-frosted)';
+
+const colorSuccessFrostedSoft = 'var(--p-color-success-frosted-soft)';
+
+const colorSuccessLow = 'var(--p-color-success-low)';
+
+const colorWarning = 'var(--p-color-warning)';
+
+const colorWarningFrosted = 'var(--p-color-warning-frosted)';
+
+const colorWarningFrostedSoft = 'var(--p-color-warning-frosted-soft)';
+
+const fontPorscheNext = 'var(--p-font-porsche-next)';
+
+const leadingNormal = 'var(--p-leading-normal)';
+
+const typescaleMd = 'var(--p-typescale-md)';
+
+const typescaleSm = 'var(--p-typescale-sm)';
+
+const fontWeightSemibold = 'var(--p-font-weight-semibold)';
+
+const forcedColorsMediaQuery = (style) => {
+    return { '@media (forced-colors: active)': style };
+};
 
 const motionDurationMap = {
     short: motionDurationShort,
@@ -386,16 +511,22 @@ const addImportantToEachRule = (input) => {
                 typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
                 result), {});
 };
-const { focusColor } = colors;
 const getFocusBaseStyles = () => {
     return {
-        outline: `${borderWidthBase} solid ${focusColor}`,
+        outline: `${borderWidthBase} solid ${colorFocus}`,
         outlineOffset: '2px',
+        ...forcedColorsMediaQuery({
+            outlineColor: 'Highlight',
+        }),
     };
 };
 const getDisabledBaseStyles = () => {
     return {
         opacity: alphaDisabled,
+        ...forcedColorsMediaQuery({
+            opacity: 1,
+            color: 'GrayText',
+        }),
     };
 };
 /**
@@ -429,10 +560,6 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
         };
 };
 
-const colorSchemeStyles = {
-    colorScheme: 'light dark',
-};
-
 const hostHiddenStyles = {
     '&([hidden])': {
         display: 'none',
@@ -3774,7 +3901,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-alpha.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-beta.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -3883,155 +4010,196 @@ const breakpointCustomizableTemplate = `value, ${internalValidateProps
     .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
     .replace(/"/g, '')}`;
 
-const legacyRadiusLarge = '--_p-legacy-radius-large';
-
-const legacyRadiusMedium = '--_p-legacy-radius-medium';
-
-const legacyRadiusSmall = '--_p-legacy-radius-small';
-
-const radius2Xl = 'var(--p-radius-2xl)';
-
-const radius3Xl = 'var(--p-radius-3xl)';
-
-const radius4Xl = 'var(--p-radius-4xl)';
-
-const radiusFull = 'var(--p-radius-full)';
-
-const radiusLg = 'var(--p-radius-lg)';
-
-const radiusMd = 'var(--p-radius-md)';
-
-const radiusSm = 'var(--p-radius-sm)';
-
-const radiusXl = 'var(--p-radius-xl)';
+const getInlineSVGBackgroundImage = (path) => {
+    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
+};
 
-const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
-const positionStickyTopFallback = '0';
-const { contrastLowColor: contrastLowColor$8, primaryColor: primaryColor$B, frostedSoftColor: frostedSoftColor$6, canvasColor: canvasColor$a } = colors;
+/**
+ * @css-variable {"name": "--p-accordion-summary-top", "description": "Controls the sticky top position when `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarSummaryTop = '--p-accordion-summary-top';
+const cssVarSummaryTopDeprecated = '--p-accordion-position-sticky-top'; // deprecated
+/**
+ * @css-variable {"name": "--p-accordion-px", "description": "Horizontal padding of the accordion.", "defaultValue": "16px"}
+ */
+const cssVarPaddingInline$1 = '--p-accordion-px';
+/**
+ * @css-variable {"name": "--p-accordion-py", "description": "Vertical padding of the accordion.", "defaultValue": "16px"}
+ */
+const cssVarPaddingBlock = '--p-accordion-py';
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$19 = (size, compact, open, sticky) => {
+const icon = getInlineSVGBackgroundImage(`<path d="m12 15.125h-.001l-.005-.006-6.494-5.476.642-.768 5.858 4.94 5.858-4.94.642.769-6.497 5.477z"/>`);
+const backgroundMap = {
+    canvas: colorCanvas,
+    surface: colorSurface,
+    frosted: colorFrosted,
+    none: 'transparent',
+};
+// as soon as CSS selector `:has-slotted` works cross-browser we can simplify the styles a lot and remove all the complexity regarding the summary-before and summary-after slots
+const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky, hasSummaryBefore, hasSummaryAfter, size) => {
+    const duration = isOpen ? 'moderate' : 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const compactFactor = isCompact ? 0.64285714 : 1;
+    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 isIconAlignedStart = alignMarker === 'start';
     return getCss({
         '@global': {
+            '@keyframes overflow-hidden': {
+                from: { overflow: 'hidden' },
+                to: { overflow: 'hidden' },
+            },
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...(compact
-                        ? { transform: 'translate3d(0,0,0)' } // relevant for custom click-area in compact variant
-                        : {
-                            borderBottom: `1px solid ${contrastLowColor$8}`,
-                        }),
-                    '&(:only-of-type)': { borderBottom: 0 },
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
-            button: {
+            slot: {
+                '&[name="summary-before"], &[name="summary"], &[name="summary-after"]': {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap,
+                },
+                '&[name="summary-before"]': {
+                    gridArea: `1/${isIconAlignedStart ? '2' : '1'}`,
+                    zIndex: 2, // ensures stacking to be above the summary section
+                },
+                '&[name="summary"]': {
+                    gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '3' : hasSummaryBefore || isIconAlignedStart ? '2' : '1'}`,
+                },
+                '&[name="summary-after"]': {
+                    gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '4' : hasSummaryBefore || isIconAlignedStart ? '3' : '2'}`,
+                    zIndex: 2, // ensures stacking to be above the summary section
+                },
+                '&:not([name])': {
+                    display: 'block',
+                    // as soon as all browsers support calc-size(auto) to be transitionable, we can remove the overflow rule and animation
+                    overflow: 'hidden',
+                    'details[open] &': {
+                        overflow: 'visible',
+                        // fix potential overflow issues
+                        animation: `overflow-hidden var(${cssVariableTransitionDuration},${motionDurationMap[duration]})`,
+                    },
+                },
+            },
+            'h1,h2,h3,h4,h5,h6': {
                 all: 'unset',
-                display: 'flex',
-                position: 'relative',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                width: '100%',
-                gap: '24px',
-                cursor: 'pointer',
-                zIndex: 0,
-                color: primaryColor$B,
-                ...textSmallStyle,
-                fontWeight: fontWeightSemiBold,
-                ...buildResponsiveStyles(size, (s) => ({
-                    fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                    padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
+                gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '3' : hasSummaryBefore || isIconAlignedStart ? '2' : '1'}`,
+                font: 'inherit',
+                fontWeight: fontWeightSemibold,
+                ...buildResponsiveStyles(size, (sizeValue) => ({
+                    fontSize: sizeValue === 'medium' ? typescaleMd : typescaleSm,
                 })),
-                // mergeDeep needed because of hoverMediaQuery in certain modes not wrapping keys and therefore overriding "&::before" key
-                ...mergeDeep({
-                    '&::before': {
-                        content: '""',
-                        zIndex: -1,
-                        position: 'absolute',
-                        borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-                        insetInline: '-4px',
-                        ...(compact
-                            ? {
-                                top: '2px',
-                                bottom: '2px',
-                            }
-                            : {
-                                top: '6px',
-                                bottom: '6px',
-                            }),
-                    },
-                }, hoverMediaQuery({
-                    '&::before': {
-                        transition: getTransition('background-color'),
+            },
+            details: {
+                all: 'unset',
+                font: `${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`, // 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 ' : ''}`,
+                columnGap: gap,
+                alignItems: 'center',
+                padding: `var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock}) var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
+                background: backgroundMap[background],
+                ...(background === 'frosted' && frostedGlassStyle),
+                borderRadius: `var(${legacyRadiusSmall}, ${radiusXl})`,
+                ...forcedColorsMediaQuery({
+                    outline: '1px solid CanvasText',
+                    outlineOffset: background === 'none' ? '0' : '-1px',
+                    padding: `var(${cssVarPaddingBlock}, ${paddingBlock}) var(${cssVarPaddingInline$1}, ${paddingInline})`,
+                }),
+                '&::details-content': addImportantToEachRule({
+                    display: 'contents', // allows <details> to be used as grid layout
+                    contentVisibility: 'visible', // we need to overwrite it to support cross-browser animation, we take care of content-visibility on our own to be a11y compliant
+                }),
+                '& > div': {
+                    gridArea: '2/1/auto/-1',
+                    zIndex: 0, // ensures stacking to be below the summary section
+                    display: 'grid',
+                    opacity: 0,
+                    marginTop: '0px',
+                    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)}`,
+                },
+                '&[open]': {
+                    '& > div': {
+                        opacity: 1,
+                        marginTop,
+                        // 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
+                        // as soon as all browsers are supporting `allow-discrete` reliable, visibility transition shouldn't be necessary anymore
+                        transition: `visibility 0s linear 0s, ${getTransition('grid-template-rows', duration, easing)}, ${getTransition('margin-top', duration, easing)}, ${getTransition('opacity', duration, easing)}`,
                     },
+                },
+            },
+            summary: {
+                all: 'unset',
+                gridArea: '1/1/auto/-1',
+                zIndex: 1, // ensures stacking to be above the details content
+                display: 'grid',
+                gridTemplateColumns: 'subgrid',
+                alignItems: 'center',
+                cursor: 'pointer',
+                padding: `var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock}) var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
+                margin: `calc(-1 * var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock})) calc(-1 * var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline}))`,
+                ...(isSticky &&
+                    (background === 'canvas' || background === 'surface') && {
+                    position: 'sticky',
+                    top: `var(${cssVarSummaryTop}, var(${cssVarSummaryTopDeprecated}, 0px))`,
+                    background: `linear-gradient(180deg,${backgroundMap[background]} 0%,${backgroundMap[background]} 90%,transparent 100%)`,
+                    borderRadius: `var(${legacyRadiusSmall}, ${radiusXl})`,
+                }),
+                '&:focus-visible::before': getFocusBaseStyles(),
+                ...hoverMediaQuery({
                     '&:hover::before': {
-                        ...frostedGlassStyle,
-                        background: frostedSoftColor$6,
+                        background: colorFrosted,
+                    },
+                }),
+                '&::before': {
+                    gridArea: `1/${isIconAlignedStart ? '1' : hasSummaryBefore && hasSummaryAfter ? '4' : hasSummaryBefore || hasSummaryAfter ? '3' : '2'}`,
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: radiusFull,
+                    background: 'transparent',
+                    transition: getTransition('background-color'),
+                    ...forcedColorsMediaQuery({
+                        backgroundColor: 'LinkText',
+                    }),
+                },
+                '&::after': {
+                    gridArea: `1/${isIconAlignedStart ? '1' : hasSummaryBefore && hasSummaryAfter ? '4' : hasSummaryBefore || hasSummaryAfter ? '3' : '2'}`,
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1rem',
+                    height: '1rem',
+                    pointerEvents: 'none',
+                    WebkitMask: `${icon} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${icon} center/contain no-repeat`,
+                    background: colorPrimary,
+                    transform: 'rotate3d(0)',
+                    transition: getTransition('transform', duration, easing),
+                    ...forcedColorsMediaQuery({
+                        backgroundColor: 'LinkText',
+                    }),
+                    'details[open] &': {
+                        transform: 'rotate3d(0,0,1,180deg)',
                     },
-                })),
-                '&:focus-visible::before': getFocusBaseStyles(),
+                },
             },
         },
-        heading: {
-            margin: 0,
-            ...(sticky && {
-                position: 'sticky',
-                top: `var(${cssVariablePositionStickyTop}, ${positionStickyTopFallback})`,
-                zIndex: 1, // to be on top of the collapsible
-                background: canvasColor$a,
-            }),
-        },
-        'icon-container': {
-            height: fontLineHeight,
-            width: fontLineHeight,
-            font: `inherit ${fontFamily}`, // needed for correct calculations based on ex-unit
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        icon: {
-            transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
-            transition: getTransition('transform'),
-        },
-        collapsible: {
-            color: primaryColor$B, // enables color inheritance for slotted content
-            display: 'grid',
-            ...(sticky && {
-                position: 'relative',
-                zIndex: 0, // to be below the heading
-            }),
-            ...(open
-                ? {
-                    gridTemplateRows: '1fr',
-                    visibility: 'inherit',
-                    transition: getTransition('grid-template-rows'),
-                    paddingBottom: compact ? spacingStaticSmall : '24px',
-                }
-                : {
-                    gridTemplateRows: '0fr',
-                    visibility: 'hidden',
-                    transition: `${getTransition('grid-template-rows')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationShort})`,
-                }),
-            '& div': {
-                overflow: open ? 'visible' : 'hidden',
-                // Fix overflow issues for overlapping content (e.g. select dropdown)
-                animation: open ? `$overflow var(${cssVariableTransitionDuration},${motionDurationShort})` : 'none',
-                // Necessary to make focus outlines fully visible
-                padding: '4px',
-                margin: '-4px',
-                // Fix scrollbar issues when slotted content includes .sr-only styles (see issue #3042)
-                transform: 'translate3d(0,0,0)',
-                zIndex: 1,
-            },
-        },
-        '@keyframes overflow': {
-            from: { overflow: 'hidden' },
-            to: { overflow: 'hidden' },
-        },
     });
 };
 
@@ -4104,7 +4272,6 @@ const getComponentCss$18 = (isOpen) => {
                     [getMediaQueryMin('xxl')]: {
                         insetInline: gridExtendedOffsetXXL,
                     },
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4142,7 +4309,6 @@ const getVisibilityJssStyle = (hideLabel) => {
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
-const { primaryColor: primaryColor$A, frostedColor: frostedColor$a } = colors;
 const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return {
@@ -4150,7 +4316,6 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             ':host': {
                 ...addImportantToEachRule({
                     transform: 'translate3d(0,0,0)', // creates new stacking context
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 ...buildResponsiveStyles(stretch, (responsiveStretch) => ({
@@ -4166,7 +4331,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             display: 'flex',
             width: '100%',
             cursor: 'pointer',
-            color: primaryColor$A,
+            color: colorPrimary,
             textDecoration: underline ? 'underline' : 'none',
             ...textSmallStyle,
             ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
@@ -4185,19 +4350,19 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
                     left: hideLabelValue ? offsetVertical : offsetHorizontal,
+                    borderRadius: `var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : radiusLg})`,
                 })),
-                borderRadius: `var(${legacyRadiusSmall}, ${radiusLg})`,
                 transition: getTransition('background-color'),
                 ...(active && {
                     ...frostedGlassStyle,
-                    backgroundColor: frostedColor$a,
+                    backgroundColor: colorFrosted,
                 }),
             },
             ...(!isDisabledOrLoading &&
                 hoverMediaQuery({
                     '&:hover::before': {
                         ...frostedGlassStyle,
-                        backgroundColor: frostedColor$a,
+                        backgroundColor: colorFrostedStrong,
                     },
                 })),
             ...(!hasSlottedAnchor && {
@@ -4247,7 +4412,7 @@ const getComponentCss$17 = (icon, iconSource, active, isDisabled, isLoading, isD
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false), {
         root: {
             ...(isDisabled && {
-                color: colors.contrastLowColor,
+                color: colorContrastLow,
             }),
             ...(isDisabledOrLoading && {
                 cursor: 'not-allowed',
@@ -4284,7 +4449,6 @@ const getFontWeight = (weight) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const { canvasColor: canvasColor$9, primaryColor: primaryColor$z } = colors;
 const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
@@ -4292,13 +4456,13 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
             ':host': {
                 display: 'flex',
                 alignItems: 'stretch',
+                colorScheme: 'dark', // dark is used in 99% of the cases (it can still be overridden by the user via `color-scheme`)
                 // Safari workaround to scale the tile properly
                 '@supports (-webkit-hyphens: auto)': {
                     alignItems: 'baseline',
                 },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4337,7 +4501,7 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                 zIndex: 3,
                 maxWidth: '34.375rem',
                 ...textMediumStyle,
-                color: primaryColor$z,
+                color: colorPrimary,
                 hyphens: 'inherit',
                 ...mergeDeep(buildResponsiveStyles(size, (sizeValue) => ({
                     fontSize: getFontSizeText(sizeValue),
@@ -4366,14 +4530,14 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
                     ...(isTopAligned
                         ? {
                             gridArea: '1/1/3/-1',
-                            background: gradientToBottomStyle.background.replaceAll('0,0%,0%,', `from ${canvasColor$9} h s l / `),
+                            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
                             borderStartStartRadius: 'inherit',
                             borderStartEndRadius: 'inherit',
                         }
                         : {
                             gridArea: '4/1/6/-1',
-                            background: gradientToTopStyle.background.replaceAll('0,0%,0%,', `from ${canvasColor$9} h s l / `),
+                            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
                             borderEndStartRadius: 'inherit',
                             borderEndEndRadius: 'inherit',
@@ -4411,8 +4575,8 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
         'link-or-button-pure': {
             zIndex: 5,
             gridColumn: 2,
-            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
-            alignSelf: 'center',
+            gridRow: `1/${hasFooterSlot ? 3 : 2}`,
+            alignSelf: isTopAligned ? 'flex-start' : 'flex-end',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -4428,18 +4592,17 @@ const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, alig
     });
 };
 
-const { primaryColor: primaryColor$y, canvasColor: canvasColor$8, contrastHighColor: contrastHighColor$9, frostedColor: frostedColor$9, frostedSoftColor: frostedSoftColor$5 } = colors;
 const getVariantColors = (variant) => {
     const colors = {
         primary: {
-            textColor: canvasColor$8,
-            backgroundColor: primaryColor$y,
-            backgroundColorHover: contrastHighColor$9,
+            textColor: colorCanvas,
+            backgroundColor: colorPrimary,
+            backgroundColorHover: colorContrastHigh,
         },
         secondary: {
-            textColor: primaryColor$y,
-            backgroundColor: frostedColor$9,
-            backgroundColorHover: frostedSoftColor$5,
+            textColor: colorPrimary,
+            backgroundColor: colorFrostedStrong,
+            backgroundColorHover: colorFrosted,
         },
     };
     return colors[variant];
@@ -4458,14 +4621,11 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 verticalAlign: 'top',
                 ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
                     [`${cssVariableInternalScaling}`]: compactValue ? 0.64285714 : 1,
-                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${compactValue ? radiusLg : radiusXl})`),
+                    '--p-internal-border-radius': compactValue ? radiusLg : radiusXl,
                 })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    ...(hideLabelValue && {
-                        borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${radiusFull})`),
-                    }),
+                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--p-internal-border-radius)'})`),
                 }))),
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4490,6 +4650,16 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
                 gap: hideLabelValue ? 0 : gap,
             })),
+            ...forcedColorsMediaQuery({
+                forcedColorAdjust: 'none',
+                background: 'Canvas',
+                color: 'LinkText',
+                boxShadow: 'inset 0 0 0 2px LinkText',
+                '&:is(button)': {
+                    boxShadow: 'inset 0 0 0 2px ButtonBorder',
+                    color: 'ButtonText',
+                },
+            }),
             ...(!hasSlottedAnchor && {
                 '&:focus-visible': getFocusBaseStyles(),
             }),
@@ -4497,6 +4667,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 hoverMediaQuery({
                     '&:hover': {
                         backgroundColor: backgroundColorHover,
+                        ...forcedColorsMediaQuery({
+                            background: 'Canvas',
+                        }),
                     },
                 })),
         },
@@ -4514,7 +4687,6 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
 };
 
 const cssVariableInternalButtonScaling = '--p-internal-button-scaling';
-const { frostedSoftColor: frostedSoftColor$4, contrastLowColor: contrastLowColor$7 } = colors;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
@@ -4525,9 +4697,9 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         root: {
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
-                backgroundColor: frostedSoftColor$4,
-                borderColor: frostedSoftColor$4,
-                color: contrastLowColor$7,
+            }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
             }),
         },
         ...(isLoading && {
@@ -4539,6 +4711,7 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
+                color: 'inherit',
             },
         }),
         label: {
@@ -4546,138 +4719,161 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
             ...(isLoading && {
                 opacity: 0, // use opacity for smooth transition between states
             }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
         },
         icon: {
             transition: getTransition('opacity'),
             ...(isLoading && {
                 opacity: 0, // use opacity for smooth transition between states
             }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
         },
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
     }));
 };
 
-// public css classes
-const cssClassGrid = '-p-canvas-grid';
-// public css variables
+const palette = {
+    dark: {
+        grey: {
+            '950': 'hsl(225, 100%, 99%)',
+            '100a': 'hsla(240, 3.7%, 26.5%, 0.154)',
+            '200a': 'hsla(240, 2%, 43%, 0.228)'},
+    },
+};
+
+const colorFrostedDark = palette.dark.grey['200a'];
+
+const colorFrostedSoftDark = palette.dark.grey['100a'];
+
+const colorPrimaryDark = palette.dark.grey["950"];
+
+const typescaleXs = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
+
+const spacingStaticSm = '8px';
+
+const spacingStaticXs = '4px';
+
+/**
+ * @css-variable {"name": "--p-canvas-sidebar-start-width", "description": "Width of the sidebar start.", "defaultValue": "320px"}
+ */
 const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
+/**
+ * @css-variable {"name": "--p-canvas-sidebar-end-width", "description": "Width of the sidebar end.", "defaultValue": "320px"}
+ */
 const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
+// public css classes
+const cssClassGrid = '-p-canvas-grid';
 // default values for public css variables
-const sidebarStartWidth = `var(${cssVarSidebarStartWidth},320px)`;
-const sidebarEndWidth = `var(${cssVarSidebarEndWidth},320px)`;
-// private css variables
-const cssVarTemplateSidebarStartWidth = '--_f';
-const cssVarTemplateSidebarEndWidth = '--_g';
+const minWidth = '320px';
+const sidebarStartWidthMobile = `min(100vw,var(${cssVarSidebarStartWidth},${minWidth}))`;
+const sidebarEndWidthMobile = `min(100vw,var(${cssVarSidebarEndWidth},${minWidth}))`;
+const sidebarStartWidthDesktop = `min(calc(100vw - ${minWidth}),var(${cssVarSidebarStartWidth},${minWidth}))`;
+const sidebarEndWidthDesktop = `min(calc(100vw - ${minWidth}),var(${cssVarSidebarEndWidth},${minWidth}))`;
 // media queries
-const mediaQueryS$1 = getMediaQueryMin('s');
-const mediaQueryM = getMediaQueryMin('m');
+const mediaQueryMinM = getMediaQueryMin('m');
+const mediaQueryMaxM = getMediaQueryMax('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const { primaryColor: primaryColor$x, canvasColor: canvasColor$7, surfaceColor: surfaceColor$3, contrastLowerColor: contrastLowerColor$3 } = colors;
-const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen, background) => {
+    const isBackgroundSurface = background === 'surface';
+    const primaryBackgroundColor = isBackgroundSurface ? colorSurface : colorCanvas;
+    const secondaryBackgroundColor = isBackgroundSurface ? colorCanvas : colorSurface;
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
+                    // prevents horizontal scroll due to sidebar transform. `overflow: clip` clips content like hidden but doesn't
+                    // establish a scrolling context, so sticky positioning still works.
+                    overflowX: 'clip',
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
             slot: {
                 '&:not([name]),&[name="footer"]': {
-                    [`&::slotted(.${cssClassGrid})`]: {
+                    [`&::slotted(.${cssClassGrid})`]: addImportantToEachRule({
                         display: 'grid',
                         gridTemplateColumns: 'repeat(12,minmax(0,1fr))',
                         columnGap: spacingBase,
                         marginInline: 'auto',
                         containerType: 'inline-size',
-                    },
-                },
-                '&[name="title"]::slotted': {
-                    '&(a)': {
-                        textDecoration: 'none',
-                        color: 'inherit',
-                        borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-                    },
-                    '&(a:focus-visible)': getFocusBaseStyles(),
+                    }),
                 },
                 '&[name="sidebar-end-header"]': {
                     display: 'block', // ensures header section of sidebar-end area is aligned correctly
                 },
                 '&[name="background"]': {
-                    zIndex: 3,
+                    zIndex: 1,
                     display: 'block',
-                    gridArea: '1/1/-1/-1',
+                    gridArea: '1/2/-1/3',
                     position: 'sticky',
                     top: 0,
-                    height: '100dvh',
+                    height: '100lvh', // viewport when Safari's UI is completely hidden (maximum space)
                     pointerEvents: 'none',
                     overflow: 'hidden',
                     transform: 'translate3d(0,0,0)', // needed for Safari to force GPU acceleration
-                    [mediaQueryS$1]: {
-                        gridColumn: '2/3',
-                    },
-                    '&::slotted(video),&::slotted(img)': {
+                    '&::slotted(video),&::slotted(img)': addImportantToEachRule({
                         width: '100%',
                         height: '100%',
                         objectFit: 'cover',
-                        transition: getTransition('opacity', 'veryLong'),
-                        pointerEvents: 'none',
-                    },
+                    }),
                 },
+                '&[name="title"]::slotted': addImportantToEachRule({
+                    '&(a)': {
+                        all: 'unset',
+                        cursor: 'pointer',
+                        color: 'inherit',
+                        borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
+                    },
+                    '&(a:focus-visible)': getFocusBaseStyles(),
+                }),
             },
             h2: {
+                all: 'unset',
+                padding: spacingStaticXs, // preserve enough spacing for focus state
                 font: textXSmallStyle.font,
+                color: colorPrimary,
                 textOverflow: 'ellipsis',
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
-                margin: 0,
-                padding: '4px', // preserve enough spacing for focus state
                 textTransform: 'uppercase',
                 letterSpacing: '2px',
             },
         },
         root: {
-            [cssVarTemplateSidebarStartWidth]: isSidebarStartOpen ? sidebarStartWidth : '0px',
-            [cssVarTemplateSidebarEndWidth]: isSidebarEndOpen ? sidebarEndWidth : '0px',
             display: 'grid',
-            gridTemplateRows: 'auto minmax(0,1fr) auto',
-            gridTemplateAreas: '"header" "main" "footer"',
-            minWidth: '320px',
-            minHeight: '100dvh',
-            font: textSmallStyle.font,
-            color: primaryColor$x,
-            background: canvasColor$7,
-            transition: getTransition('grid-template-columns'),
-            [mediaQueryS$1]: {
-                gridTemplateColumns: `var(${cssVarTemplateSidebarStartWidth}) minmax(0,1fr)`,
-                gridTemplateAreas: '"sidebar-start header" "sidebar-start main" "sidebar-start footer"',
-            },
-            [mediaQueryM]: {
-                gridTemplateColumns: `var(${cssVarTemplateSidebarStartWidth}) minmax(0,1fr) var(${cssVarTemplateSidebarEndWidth})`,
-                gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
-            },
-            '&::after': {
-                [mediaQueryM]: {
-                    content: '""',
-                    zIndex: 2,
-                    gridArea: '1/2/-1/3',
-                    boxShadow: `1px 0 0 0 ${contrastLowerColor$3}`,
-                    background: canvasColor$7,
-                    pointerEvents: 'none',
+            gridTemplate: `auto minmax(0,1fr) auto / ${sidebarStartWidthMobile} 100vw ${sidebarEndWidthMobile}`,
+            gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            minHeight: '100lvh', // viewport when Safari's UI is completely hidden (maximum space)
+            [mediaQueryMaxM]: {
+                transition: getTransition('transform'),
+                transform: `translate3d(${isSidebarEndOpen ? `calc(-1 * ${sidebarStartWidthMobile} - ${sidebarEndWidthMobile})` : isSidebarStartOpen ? '0' : `calc(-1 * ${sidebarStartWidthMobile})`},0,0)`,
+                '&:dir(rtl)': {
+                    transform: `translate3d(${isSidebarEndOpen ? `calc(${sidebarStartWidthMobile} + ${sidebarEndWidthMobile})` : isSidebarStartOpen ? '0' : sidebarEndWidthMobile},0,0)`,
                 },
             },
-            '&:dir(rtl)::after': {
-                [mediaQueryM]: {
-                    boxShadow: `-1px 0 0 0 ${contrastLowerColor$3}`,
-                },
+            [mediaQueryMinM]: {
+                transition: getTransition('grid-template-columns'),
+                gridTemplateColumns: `${isSidebarStartOpen ? sidebarStartWidthDesktop : '0px'} minmax(${minWidth},1fr) ${isSidebarEndOpen ? sidebarEndWidthDesktop : '0px'}`,
+            },
+            '&::before': {
+                content: '""',
+                zIndex: 0,
+                gridArea: '1/2/-1/3',
+                background: primaryBackgroundColor,
+                pointerEvents: 'none',
+                borderEndStartRadius: isSidebarStartOpen ? radius3Xl : 0,
+                transition: getTransition('border-radius'),
             },
         },
         header: {
-            zIndex: 6,
+            zIndex: 4,
             gridArea: 'header',
             containerType: 'inline-size',
             position: 'sticky',
@@ -4688,8 +4884,10 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
             gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1fr)',
             gap: spacingBase,
             alignItems: 'center',
-            paddingBlock: spacingStaticSmall,
-            paddingInline: spacingBase,
+            padding: `${spacingStaticSmall} ${spacingBase}`,
+            '&:focus-visible': {
+                outline: 'none',
+            },
             '&__area': {
                 display: 'flex',
                 gap: spacingStaticSmall,
@@ -4712,9 +4910,6 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
                     display: 'none',
                 },
             },
-            '&:focus': {
-                outline: 'none',
-            },
         },
         blur: {
             zIndex: -1,
@@ -4726,64 +4921,67 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
                 inset: 0,
             },
             '& > div:nth-of-type(1)': {
-                zIndex: 1,
                 WebkitBackdropFilter: 'blur(64px)',
                 backdropFilter: 'blur(64px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,100%) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,100%) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)',
             },
             '& > div:nth-of-type(2)': {
-                zIndex: 2,
                 WebkitBackdropFilter: 'blur(32px)',
                 backdropFilter: 'blur(32px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)',
             },
             '& > div:nth-of-type(3)': {
-                zIndex: 3,
                 WebkitBackdropFilter: 'blur(16px)',
                 backdropFilter: 'blur(16px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)',
             },
             '& > div:nth-of-type(4)': {
-                zIndex: 4,
                 WebkitBackdropFilter: 'blur(8px)',
                 backdropFilter: 'blur(8px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)',
             },
             '& > div:nth-of-type(5)': {
-                zIndex: 5,
                 WebkitBackdropFilter: 'blur(4px)',
                 backdropFilter: 'blur(4px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)',
             },
             '& > div:nth-of-type(6)': {
-                zIndex: 6,
                 WebkitBackdropFilter: 'blur(2px)',
                 backdropFilter: 'blur(2px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)',
             },
             '& > div:nth-of-type(7)': {
-                zIndex: 7,
                 WebkitBackdropFilter: 'blur(1px)',
                 backdropFilter: 'blur(1px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)',
             },
             '& > div:nth-of-type(8)': {
-                zIndex: 8,
                 WebkitBackdropFilter: 'blur(.5px)',
                 backdropFilter: 'blur(.5px)',
                 WebkitMaskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)',
                 maskImage: 'linear-gradient(to bottom,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)',
             },
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                top: 0,
+                insetInlineStart: 0,
+                width: radius3Xl,
+                height: `calc(2 * ${radius3Xl})`,
+                borderStartStartRadius: isSidebarStartOpen ? radius3Xl : 0,
+                boxShadow: `0 calc(-1 * ${radius3Xl}) 0 0 ${secondaryBackgroundColor}`,
+                transition: getTransition('border-radius'),
+            },
         },
         main: {
-            zIndex: 4,
+            zIndex: 3,
             gridArea: 'main',
             padding: spacingBase,
         },
@@ -4799,67 +4997,63 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
                 position: 'absolute',
                 inset: '-140px 0 0',
                 pointerEvents: 'none',
-                background: `linear-gradient(to bottom,hsl(from ${canvasColor$7} h s l / 0) 0%,hsl(from ${canvasColor$7} h s l / 0.013) 8.1%,hsl(from ${canvasColor$7} h s l / 0.049) 15.5%,hsl(from ${canvasColor$7} h s l / 0.104) 22.5%,hsl(from ${canvasColor$7} h s l / 0.175) 29%,hsl(from ${canvasColor$7} h s l / 0.259) 35.3%,hsl(from ${canvasColor$7} h s l / 0.352) 41.2%,hsl(from ${canvasColor$7} h s l / 0.45) 47.1%,hsl(from ${canvasColor$7} h s l / 0.55) 52.9%,hsl(from ${canvasColor$7} h s l / 0.648) 58.8%,hsl(from ${canvasColor$7} h s l / 0.741) 64.7%,hsl(from ${canvasColor$7} h s l / 0.825) 71%,hsl(from ${canvasColor$7} h s l / 0.896) 77.5%,hsl(from ${canvasColor$7} h s l / 0.951) 84.5%,hsl(from ${canvasColor$7} h s l / 0.987) 91.9%,${canvasColor$7} 100%)`,
+                background: `linear-gradient(to bottom,hsl(from ${primaryBackgroundColor} h s l / 0) 0%,hsl(from ${primaryBackgroundColor} h s l / 0.013) 8.1%,hsl(from ${primaryBackgroundColor} h s l / 0.049) 15.5%,hsl(from ${primaryBackgroundColor} h s l / 0.104) 22.5%,hsl(from ${primaryBackgroundColor} h s l / 0.175) 29%,hsl(from ${primaryBackgroundColor} h s l / 0.259) 35.3%,hsl(from ${primaryBackgroundColor} h s l / 0.352) 41.2%,hsl(from ${primaryBackgroundColor} h s l / 0.45) 47.1%,hsl(from ${primaryBackgroundColor} h s l / 0.55) 52.9%,hsl(from ${primaryBackgroundColor} h s l / 0.648) 58.8%,hsl(from ${primaryBackgroundColor} h s l / 0.741) 64.7%,hsl(from ${primaryBackgroundColor} h s l / 0.825) 71%,hsl(from ${primaryBackgroundColor} h s l / 0.896) 77.5%,hsl(from ${primaryBackgroundColor} h s l / 0.951) 84.5%,hsl(from ${primaryBackgroundColor} h s l / 0.987) 91.9%,${primaryBackgroundColor} 100%)`,
+                borderEndStartRadius: isSidebarStartOpen ? radius3Xl : 0,
+                transition: getTransition('border-radius'),
             },
         },
         sidebar: {
+            zIndex: 2,
             position: 'sticky',
             top: 0,
-            height: '100dvh',
+            height: '100dvh', // transitions between svh (viewport when Safari's address bar and bottom bar are visible (~60-90px less)) and lvh (viewport when Safari's UI is completely hidden (maximum space)) as you scroll (causes reflows)
+            padding: spacingBase,
+            boxSizing: 'border-box',
+            overflow: 'hidden auto',
+            overscrollBehaviorY: 'contain',
+            '&:focus-visible': {
+                outline: 'none',
+            },
             '&--start': {
-                zIndex: 7,
                 gridArea: 'sidebar-start',
                 justifySelf: 'flex-end',
-                width: sidebarStartWidth,
-                background: surfaceColor$3,
-                '&::before': {
-                    content: '""',
-                    zIndex: -1,
-                    position: 'absolute',
-                    canvasColor: 'transparent',
-                    right: '-16px',
-                    height: '32px',
-                    width: '16px',
-                    pointerEvents: 'none',
-                    top: 0,
-                    borderTopLeftRadius: '16px',
-                    boxShadow: `0 -16px 0 0 ${surfaceColor$3}`,
+                background: secondaryBackgroundColor,
+                width: sidebarStartWidthMobile,
+                [mediaQueryMinM]: {
+                    width: sidebarStartWidthDesktop,
                 },
             },
             '&--end': {
-                zIndex: 1,
                 gridArea: 'sidebar-end',
-                justifySelf: 'flex-end',
-                width: sidebarEndWidth,
-                background: canvasColor$7,
-            },
-            '&__scroller': {
-                position: 'absolute',
-                inset: 0,
-                overflow: 'hidden auto',
-                overscrollBehaviorY: 'contain',
-                background: 'inherit', // ensures correct scrollbar coloring in light / dark mode
+                justifySelf: 'flex-start',
+                borderInlineStart: `1px solid ${colorContrastLower}`,
+                background: primaryBackgroundColor,
+                width: sidebarEndWidthMobile,
+                [mediaQueryMinM]: {
+                    width: sidebarEndWidthDesktop,
+                },
             },
             '&__header': {
-                zIndex: 1,
+                zIndex: 9999999,
                 display: 'flex',
                 gap: spacingStaticSmall,
                 alignItems: 'center',
                 position: 'sticky',
-                top: 0,
+                top: `calc(-1 * ${spacingBase})`,
+                margin: `calc(-1 * ${spacingBase}) calc(-1 * ${spacingBase}) ${spacingBase}`,
                 padding: `${spacingStaticSmall} ${spacingBase}`,
                 minHeight: '56px',
                 boxSizing: 'border-box',
                 '&--start': {
                     justifyContent: 'flex-start',
                     '&::before': {
-                        background: `linear-gradient(180deg,${surfaceColor$3} 0%,${surfaceColor$3} 65%,transparent 100%)`,
+                        background: `linear-gradient(180deg,${secondaryBackgroundColor} 0%,${secondaryBackgroundColor} 65%,transparent 100%)`,
                     },
                 },
                 '&--end': {
                     justifyContent: 'space-between',
                     '&::before': {
-                        background: `linear-gradient(180deg,${canvasColor$7} 0%,${canvasColor$7} 65%,transparent 100%)`,
+                        background: `linear-gradient(180deg,${primaryBackgroundColor} 0%,${primaryBackgroundColor} 65%,transparent 100%)`,
                     },
                 },
                 '&::before': {
@@ -4870,27 +5064,22 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
                     pointerEvents: 'none',
                 },
             },
-            '&__content': {
-                position: 'relative', // needed for z-index to work
-                zIndex: 0, // ensures slotted dom nodes can't be on top of sidebar header
-                display: 'block',
-                padding: spacingBase,
-            },
-            '&:focus': {
-                outline: 'none',
-            },
-        },
-        'flyout-start': {
-            '--p-flyout-width': '100dvw',
-            '--p-flyout-max-width': sidebarStartWidth,
-        },
-        'flyout-end': {
-            '--p-flyout-width': '100dvw',
-            '--p-flyout-max-width': sidebarEndWidth,
         },
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-px", "description": "Defines the logical inline start and end padding of the carousel, the extra space is used to show parts of the next/previous slide. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+const cssVarPaddingInline = '--p-carousel-px';
+/**
+ * @css-variable {"name": "--p-carousel-ps", "description": "Defines the logical inline start 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-pe`. When used then the prop `width` has no effect anymore.", "defaultValue": ""}
+ */
+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';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -4914,12 +5103,17 @@ const mediaQueryPointerCoarse = '@media (pointer: coarse)';
 const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
+    wide: gridWideOffset,
+    full: {
+        base: gridFullOffset,
+        s: gridFullOffset,
+        xxl: gridFullOffset,
+    },
 };
 const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const { primaryColor: primaryColor$w, contrastMediumColor: contrastMediumColor$a } = colors;
 const gradientMask = `linear-gradient(90deg,transparent 20%,#000 var(${cssVariableGradientColorWidth},33%) calc(100% - var(${cssVariableGradientColorWidth},33%)),transparent 80%)`;
 // CSS Variable defined in fontHyphenationStyle
 /**
@@ -4935,7 +5129,6 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                     gap: spacingFluidMedium, // 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
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4964,7 +5157,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 ...((hasHeading || hasDescription) && {
                     [`${selectorHeading},${selectorDescription}`]: {
                         gridColumn: '1/-1',
-                        color: primaryColor$w,
+                        color: colorPrimary,
                         ...(isHeaderAlignCenter && {
                             textAlign: 'center', // relevant in case heading or description becomes multiline
                             justifySelf: 'center', // relevant for horizontal alignment of heading and description in case max-width applies
@@ -4994,14 +5187,17 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
         },
         header: {
             display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
+            paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+            paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
             [mediaQueryS]: {
-                gridTemplateColumns: 'minmax(0px, 1fr) auto',
-                padding: `0 ${spacingMap[width].s}`,
+                gridTemplateColumns: 'minmax(0px,1fr) auto',
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                 ...(hasNavigation && { columnGap: spacingStaticMedium }),
             },
             [mediaQueryXXL]: {
-                padding: `0 ${spacingMap[width].xxl}`,
+                paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
             },
         },
         nav: {
@@ -5036,12 +5232,16 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 }),
                 // !important is necessary to override inline styles set by splide library
                 ...addImportantToEachRule({
-                    padding: `0 ${spacingMap[width].base}`,
+                    paddingBlock: '0px',
+                    paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
+                    paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].base}))`,
                     [mediaQueryS]: {
-                        padding: `0 ${spacingMap[width].s}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].s}))`,
                     },
                     [mediaQueryXXL]: {
-                        padding: `0 ${spacingMap[width].xxl}`,
+                        paddingInlineStart: `var(${cssVarPaddingInlineStart},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
+                        paddingInlineEnd: `var(${cssVarPaddingInlineEnd},var(${cssVarPaddingInline},${spacingMap[width].xxl}))`,
                     },
                 }),
                 '&--draggable': {
@@ -5110,7 +5310,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                     position: 'relative',
                 },
                 borderRadius: radiusFull,
-                background: contrastMediumColor$a,
+                background: colorContrastMedium,
                 ...(isInfinitePagination
                     ? {
                         width: '0px',
@@ -5150,7 +5350,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 },
             }),
             [bulletActiveClass]: {
-                background: primaryColor$w,
+                background: colorPrimary,
                 height: paginationBulletSize,
                 width: addImportantToRule(paginationActiveBulletSize),
                 ...(isInfinitePagination && {
@@ -5168,25 +5368,24 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
     });
 };
 
-const { successColor: successColor$3, errorColor: errorColor$2, primaryColor: primaryColor$v, successLowColor: successLowColor$1, errorLowColor, contrastLowerColor: contrastLowerColor$2, successFrostedSoftColor: successFrostedSoftColor$2, errorFrostedSoftColor: errorFrostedSoftColor$1, frostedSoftColor: frostedSoftColor$3, } = colors;
 const colorBackgroundMap$1 = {
-    success: successFrostedSoftColor$2,
-    error: errorFrostedSoftColor$1,
-    none: frostedSoftColor$3,
+    success: colorSuccessFrostedSoft,
+    error: colorErrorFrostedSoft,
+    none: colorFrosted,
 };
 const colorBorderMap = {
-    success: successLowColor$1,
-    error: errorLowColor,
-    none: contrastLowerColor$2,
+    success: colorSuccess,
+    error: colorError,
+    none: colorContrastLower,
 };
 const colorBorderHoverMap = {
-    success: successColor$3,
-    error: errorColor$2,
-    none: primaryColor$v,
+    success: colorSuccess,
+    error: colorError,
+    none: colorPrimary,
 };
 const colorMap$4 = {
-    success: successColor$3,
-    error: errorColor$2,
+    success: colorSuccess,
+    error: colorError,
     none: undefined,
 };
 const getThemedFormStateColors = (state) => {
@@ -5198,7 +5397,17 @@ const getThemedFormStateColors = (state) => {
     };
 };
 
-const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
+/**
+ * External CSS variables
+ */
+const cssVarCheckboxBorderColor = '--p-checkbox-border-color';
+const cssVarCheckboxBackgroundColor = '--p-checkbox-background-color';
+const cssVarCheckboxIconColor = '--p-checkbox-icon-color';
+/**
+ * Internal CSS variables
+ */
+const cssVarInternalCheckboxScaling = '--__p-checkbox-scaling';
+
 const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
     const { formStateBackgroundColor, formStateBorderColor } = getThemedFormStateColors(state);
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
@@ -5214,9 +5423,13 @@ const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
         marginBlock: checkboxMarginBlock,
         boxSizing: 'border-box',
         font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
-        background: formStateBackgroundColor,
+        background: `var(${cssVarCheckboxBackgroundColor},${formStateBackgroundColor})`,
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-        border: `${checkboxBorderWidth} solid ${formStateBorderColor}`,
+        border: `${checkboxBorderWidth} solid var(${cssVarCheckboxBorderColor},${formStateBorderColor})`,
+        ...(disabledOrLoading &&
+            forcedColorsMediaQuery({
+                borderColor: 'GrayText',
+            })),
         borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusMd : radiusLg})`,
         ...(disabledOrLoading && {
             pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
@@ -5236,36 +5449,34 @@ const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
     };
 };
 
-const getInlineSVGBackgroundImage = (path) => {
-    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
-};
-
-const { primaryColor: primaryColor$u } = colors;
 const checkedIcon$1 = getInlineSVGBackgroundImage(`<path d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
-const getCheckboxCheckedBaseStyles = (isLoading) => {
+const getCheckboxCheckedBaseStyles = (isLoading, state) => {
+    const { formStateBorderColor } = getThemedFormStateColors(state);
     if (isLoading) {
         return {};
     }
     return {
         '&::before': {
+            forcedColorAdjust: 'none',
             WebkitMask: `${checkedIcon$1} center/contain no-repeat`, // necessary for Sogou browser support :-)
             mask: `${checkedIcon$1} center/contain no-repeat`,
-            backgroundColor: primaryColor$u,
+            backgroundColor: `var(${cssVarCheckboxIconColor}, ${state === 'none' ? colorPrimary : formStateBorderColor})`,
         },
     };
 };
 
-const { primaryColor: primaryColor$t } = colors;
 const indeterminateIcon = getInlineSVGBackgroundImage(`<path d="m20,11v2H4v-2h16Z"/>`);
-const getCheckboxIndeterminateBaseStyles = (isLoading) => {
+const getCheckboxIndeterminateBaseStyles = (isLoading, state) => {
+    const { formStateBorderColor } = getThemedFormStateColors(state);
     if (isLoading) {
         return {};
     }
     return {
         '&::before': {
+            forcedColorAdjust: 'none',
             WebkitMask: `${indeterminateIcon} center/contain no-repeat`,
             mask: `${indeterminateIcon} center/contain no-repeat`,
-            backgroundColor: primaryColor$t,
+            backgroundColor: state === 'none' ? colorPrimary : formStateBorderColor,
         },
     };
 };
@@ -5278,27 +5489,51 @@ const getFunctionalComponentRequiredStyles = () => {
     };
 };
 
-const { primaryColor: primaryColor$s, contrastHighColor: contrastHighColor$8 } = colors;
-const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, additionalDefaultJssStyle, additionalIsShownJssStyle) => {
+const getFunctionalComponentLabelAfterStyles = () => {
+    return {
+        'slot[name="label-after"]': {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            '&::slotted(*)': {
+                ...addImportantToEachRule({
+                    marginInlineStart: spacingStaticXs$1,
+                })
+            },
+        },
+    };
+};
+const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
+    const isDisabledOrLoading = isDisabled || isLoading;
     return {
+        'label-wrapper': {
+            ...buildResponsiveStyles(hideLabel, (isHidden) => ({
+                ...(!isHidden && { minWidth: 'fit-content' }), // ensures label contents don't shrink to zero in grid containers
+                ...getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle),
+            })),
+            ...additionalLabelWrapperJssStyle,
+        },
         label: {
-            ...textSmallStyle,
+            ...proseTextSmStyle,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+            color: colorPrimary,
             ...(isDisabledOrLoading && {
                 pointerEvents: 'none', // prevents label interaction when disabled or loading
             }),
-            justifySelf: 'flex-start', // ensures label is not getting stretched by flex or grid context of its parent
-            color: primaryColor$s,
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
             transition: getTransition('color'), // for smooth transitions between e.g. disabled state
-            ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, additionalIsShownJssStyle)),
+            display: 'inline',
             '&:empty': {
                 display: 'none', // prevents outer spacing caused by parents grid gap, in case no label value is defined (although it has to be set to be a11y compliant)
             },
-            '&+&': {
+            // styling for the description
+            '&:is(span)': {
                 cursor: 'unset',
-                marginTop: `-${spacingStaticXSmall}`,
-                fontSize: fontSizeTextXSmall,
-                color: contrastHighColor$8,
+                fontSize: typescaleXs,
+                color: colorContrastHigh,
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXs$1}` })),
+                marginTop: `-${spacingStaticXs$1}`,
             },
             ...additionalDefaultJssStyle,
         },
@@ -5328,6 +5563,12 @@ const getFunctionalComponentStateMessageStyles = (state, additionalDefaultJssSty
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
+// CSS Variables defined in checkbox-css-vars.ts
+/**
+ * @css-variable {"name": "--p-checkbox-border-color", "description": "🧪Experimental: Border colors of Checkbox. Should be used to override the default border color in different states (e.g., hover, focus, error), e.g. when the Checkbox is wrapped inside a custom label."}
+ * @css-variable {"name": "--p-checkbox-background-color", "description": "🧪Experimental: Background color of Checkbox."}
+ * @css-variable {"name": "--p-checkbox-icon-color", "description": "🧪Experimental: Checkmark icon color of Checkbox."}
+ */
 const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact) => {
     const { formStateBorderHoverColor } = getThemedFormStateColors(state);
     const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
@@ -5339,38 +5580,42 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
                 [`${cssVarInternalCheckboxScaling}`]: isCompact ? 0.64285714 : 1,
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 ...getCheckboxBaseStyles(isDisabled, isLoading, isCompact, state),
-                '&:checked': getCheckboxCheckedBaseStyles(isLoading),
-                '&:indeterminate': getCheckboxIndeterminateBaseStyles(isLoading),
+                '&:checked': getCheckboxCheckedBaseStyles(isLoading, state),
+                '&:indeterminate': getCheckboxIndeterminateBaseStyles(isLoading, state),
                 '&:focus-visible': getFocusBaseStyles(),
                 ...(!disabledOrLoading &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~.wrapper>&': {
-                            borderColor: formStateBorderHoverColor,
+                        '&:hover': {
+                            borderColor: `var(${cssVarCheckboxBorderColor}, ${formStateBorderHoverColor})`,
                         },
                     })),
             },
         },
         root: {
             display: 'grid',
-            gridTemplateColumns: 'auto minmax(0, 1fr)',
             rowGap: spacingStaticXSmall,
         },
         wrapper: {
             position: 'relative',
-            display: 'flex',
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+        },
+        'input-wrapper': {
+            position: 'relative',
             alignItems: 'center',
+            display: 'grid',
             alignSelf: 'flex-start',
             minHeight: fontLineHeight, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+            ...(isDisabled && getDisabledBaseStyles()),
         },
         ...(isLoading && {
             spinner: {
@@ -5384,16 +5629,14 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, {
-            gridArea: '1/2',
-        }, {
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel, {
+            cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+        }, null, {
             paddingTop: labelPaddingTop,
             paddingInlineStart: labelPaddingInlineStart,
         }),
         // .message
-        ...getFunctionalComponentStateMessageStyles(state, {
-            gridColumn: '1/-1',
-        }),
+        ...getFunctionalComponentStateMessageStyles(state),
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
     });
@@ -5408,8 +5651,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
-const { primaryColor: primaryColor$r, contrastMediumColor: contrastMediumColor$9, frostedColor: frostedColor$8 } = colors;
-const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle) => {
+const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle, additionalHostJssStyle) => {
     const wrapperBorderWidth = borderWidthThin;
     const wrapperHeight = `calc(var(${cssVarInternalInputBaseScaling}) * 3.5rem)`;
     const wrapperPaddingInline = `calc(22.4px * (var(${cssVarInternalInputBaseScaling}) - 0.64285714) + 8px)`;
@@ -5425,15 +5667,22 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                 ...addImportantToEachRule({
                     [`${cssVarButtonPurePadding}`]: buttonPadding,
                     [`${cssVarButtonPureMargin}`]: buttonMargin,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
+                '&(:dir(rtl)) input::placeholder': {
+                    direction: 'rtl',
+                    textAlign: 'end',
+                },
+                ...additionalHostJssStyle,
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
+                display: 'flex',
                 flex: 1,
+                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
@@ -5455,22 +5704,36 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
             border: `${wrapperBorderWidth} solid ${formStateBorderColor}`,
             borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
             background: formStateBackgroundColor,
-            color: primaryColor$r,
+            color: colorPrimary,
             cursor: isDisabled ? 'not-allowed' : 'text',
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
             ...(readOnly && {
                 borderColor: 'transparent',
-                background: frostedColor$8,
-                color: contrastMediumColor$9,
+                background: colorFrosted,
+                color: colorContrastMedium,
             }),
-            '&:focus-within': {
+            '&:not(:has(input:disabled)):focus-within': {
                 borderColor: formStateBorderHoverColor,
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid Highlight',
+                    outlineOffset: '2px',
+                }),
             },
+            ...(isDisabled && {
+                ...mergeDeep({ ...getDisabledBaseStyles() }, {
+                    ...forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    }),
+                }),
+                '& > *': {
+                    ...getDisabledBaseStyles(),
+                },
+            }),
             ...(!isDisabled &&
                 !readOnly &&
                 !isLoading &&
                 hoverMediaQuery({
-                    '&:hover:not(.button:hover),label:hover~&': {
+                    '&:hover:not(.button:hover),.label-wrapper:hover~&': {
                         borderColor: formStateBorderHoverColor,
                     },
                 })),
@@ -5483,7 +5746,7 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -5491,7 +5754,6 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
     };
 };
 
-const { primaryColor: primaryColor$q } = colors;
 const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact, cssVarScalingName) => {
     const cssVarBackgroundColor = `--p-${componentName}-background-color`;
     const cssVarTextColor = `--p-${componentName}-text-color`;
@@ -5514,8 +5776,9 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact,
         borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
         background: `var(${cssVarBackgroundColor}, ${formStateBackgroundColor})`,
         font: textSmallStyle.font,
-        color: `var(${cssVarTextColor}, ${primaryColor$q})`,
+        color: `var(${cssVarTextColor}, ${colorPrimary})`,
         cursor: isDisabled ? 'not-allowed' : 'pointer',
+        ...(isDisabled && getDisabledBaseStyles()),
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
         ...(!isDisabled && {
             ...hoverMediaQuery({
@@ -5542,7 +5805,6 @@ const getButtonLabelJssStyle = {
     whiteSpace: 'nowrap',
 };
 
-const { canvasColor: canvasColor$6 } = colors;
 const getFilterJssStyle = (scalingVarName) => {
     const padding = `calc(11.2px * (var(${scalingVarName}) - 0.64285714) + 4px)`;
     const margin = `calc(${padding} * -1)`;
@@ -5552,7 +5814,7 @@ const getFilterJssStyle = (scalingVarName) => {
         top,
         padding,
         margin,
-        background: canvasColor$6,
+        background: colorCanvas,
         zIndex: 1,
     };
 };
@@ -5566,7 +5828,6 @@ const getIconJssStyle = (isOpen) => {
     };
 };
 
-const { primaryColor: primaryColor$p, frostedSoftColor: frostedSoftColor$2, contrastHighColor: contrastHighColor$7 } = colors;
 const getOptionJssStyle = (componentName, cssVarScalingName) => {
     const gap = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
     const paddingBlock = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
@@ -5578,7 +5839,7 @@ const getOptionJssStyle = (componentName, cssVarScalingName) => {
         paddingInline,
         minHeight: fontLineHeight, // preserves height for empty option
         ...textSmallStyle,
-        color: contrastHighColor$7,
+        color: colorContrastHigh,
         cursor: 'pointer',
         textAlign: 'start',
         wordBreak: 'break-word',
@@ -5586,13 +5847,21 @@ const getOptionJssStyle = (componentName, cssVarScalingName) => {
         borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
         transition: `${getTransition('background-color')}, ${getTransition('color')}`,
         '&--highlighted': {
-            background: frostedSoftColor$2,
+            background: colorFrosted,
+            ...forcedColorsMediaQuery({
+                forcedColorAdjust: 'none',
+                outline: '2px solid Highlight',
+                outlineOffset: '-2px',
+            }),
         },
         '&--highlighted, &--selected': {
-            color: primaryColor$p,
+            color: colorPrimary,
         },
         '&--disabled': {
             cursor: 'not-allowed',
+            ...forcedColorsMediaQuery({
+                color: 'GrayText',
+            }),
         },
         '&--hidden': {
             display: 'none',
@@ -5620,7 +5889,6 @@ const getPopoverKeyframesStyles = {
         },
     },
 };
-const { contrastLowColor: contrastLowColor$6, canvasColor: canvasColor$5 } = colors;
 const getPopoverJssStyle = (isOpen, cssVarScalingName, optionHeight) => {
     const minHeightOptionList = `calc(${4.5 * (optionHeight + 8) + 6 + 2}px)`; // 4.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
     const padding = `calc(11.2px * (var(${cssVarScalingName}) - 0.64285714) + 4px)`;
@@ -5640,8 +5908,8 @@ const getPopoverJssStyle = (isOpen, cssVarScalingName, optionHeight) => {
         scrollbarColor: 'auto', // firefox
         animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) ${keyframesName} ${motionEasingBase} forwards`,
         filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.15))',
-        background: canvasColor$5,
-        border: `1px solid ${contrastLowColor$6}`,
+        background: colorCanvas,
+        border: `1px solid ${colorContrastLow}`,
         borderRadius: `var(${legacyRadiusMedium}, ${radiusXl})`,
         '&:not(:popover-open)': {
             display: 'none',
@@ -5656,7 +5924,6 @@ const getSelectedSlotJssStyle = {
     overflow: 'hidden',
 };
 
-const { contrastMediumColor: contrastMediumColor$8 } = colors;
 const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScalingName) => {
     return {
         'no-results': {
@@ -5664,7 +5931,7 @@ const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScalin
             '&[role=option]': {
                 cursor: 'not-allowed',
             },
-            color: contrastMediumColor$8,
+            color: colorContrastMedium,
         },
         'sr-only': getHiddenTextJssStyle(),
     };
@@ -5698,7 +5965,6 @@ const getComponentCss$11 = () => {
                 ...addImportantToEachRule({
                     boxSizing: 'content-box', // needed for correct height calculation when padding is set on host (e.g. custom click area)
                     ...getDimensionStyle,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5730,16 +5996,15 @@ const getComponentCss$11 = () => {
     });
 };
 
-const { primaryColor: primaryColor$o, contrastLowColor: contrastLowColor$5, contrastMediumColor: contrastMediumColor$7, contrastHighColor: contrastHighColor$6, successColor: successColor$2, warningColor: warningColor$1, errorColor: errorColor$1, infoColor: infoColor$1, } = colors;
 const colorMap$3 = {
-    primary: primaryColor$o,
-    'contrast-high': contrastHighColor$6,
-    'contrast-medium': contrastMediumColor$7,
-    'contrast-low': contrastLowColor$5,
-    success: successColor$2,
-    warning: warningColor$1,
-    error: errorColor$1,
-    info: infoColor$1,
+    primary: colorPrimary,
+    'contrast-high': colorContrastHigh,
+    'contrast-medium': colorContrastMedium,
+    'contrast-low': colorContrastLow,
+    success: colorSuccess,
+    warning: colorWarning,
+    error: colorError,
+    info: colorInfo,
     inherit: 'currentColor',
 };
 const getThemedTypographyColor = (textColor) => {
@@ -5786,7 +6051,6 @@ const getComponentCss$10 = (size, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5798,12 +6062,11 @@ const getComponentCss$10 = (size, align, color, ellipsis) => {
     });
 };
 
-const { contrastLowerColor: contrastLowerColor$1, contrastLowColor: contrastLowColor$4, contrastMediumColor: contrastMediumColor$6, contrastHighColor: contrastHighColor$5 } = colors;
 const colorMap$2 = {
-    'contrast-lower': contrastLowerColor$1,
-    'contrast-low': contrastLowColor$4,
-    'contrast-medium': contrastMediumColor$6,
-    'contrast-high': contrastHighColor$5,
+    'contrast-lower': colorContrastLower,
+    'contrast-low': colorContrastLow,
+    'contrast-medium': colorContrastMedium,
+    'contrast-high': colorContrastHigh,
 };
 const getComponentCss$$ = (color, orientation) => {
     return getCss({
@@ -5811,7 +6074,6 @@ const getComponentCss$$ = (color, orientation) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5843,7 +6105,6 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const { primaryColor: primaryColor$n, canvasColor: canvasColor$4, surfaceColor: surfaceColor$2, backdropColor: backdropColor$1 } = colors;
 const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
     return getCss({
         '@global': {
@@ -5861,13 +6122,12 @@ const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    [cssVarColorPrimary]: primaryColor$n,
-                    [cssVarColorBackgroundBase]: canvasColor$4,
-                    [cssVarColorBackgroundSurface]: surfaceColor$2,
-                    [cssVarColorBackgroundShading]: backdropColor$1,
+                    [cssVarColorPrimary]: colorPrimary,
+                    [cssVarColorBackgroundBase]: colorCanvas,
+                    [cssVarColorBackgroundSurface]: colorSurface,
+                    [cssVarColorBackgroundShading]: colorBackdrop,
                     // [cssVarColorBackgroundScroller]: theme === 'dark' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)', // ensures that the scrollbar color is mostly set correctly
                     [cssVarColorBackgroundScroller]: 'rgba(255,255,255,.01)', // ensures that the scrollbar color is mostly set correctly
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6103,7 +6363,6 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
             ':host': {
                 display: 'contents',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6337,7 +6596,6 @@ const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
             ':host': {
                 display: 'grid',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6365,14 +6623,12 @@ const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const { primaryColor: primaryColor$m } = colors;
 const getComponentCss$X = (state, labelSize, hasLabel) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6385,7 +6641,7 @@ const getComponentCss$X = (state, labelSize, hasLabel) => {
                 legend: {
                     all: 'unset',
                     marginBottom: spacingStaticMedium,
-                    color: primaryColor$m,
+                    color: colorPrimary,
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
                 },
             }),
@@ -6414,7 +6670,6 @@ const getComponentCss$W = (size) => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6439,7 +6694,6 @@ const getComponentCss$W = (size) => {
     });
 };
 
-const { backdropColor, primaryColor: primaryColor$l, canvasColor: canvasColor$3, surfaceColor: surfaceColor$1, frostedColor: frostedColor$7 } = colors;
 const cssVarBackgroundColor = '--_a';
 const dialogHostJssStyle = (background) => {
     return {
@@ -6447,7 +6701,7 @@ const dialogHostJssStyle = (background) => {
         '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
         '--pds-internal-grid-width-min': 'auto',
         '--pds-internal-grid-width-max': 'none',
-        [cssVarBackgroundColor]: background === 'surface' ? surfaceColor$1 : canvasColor$3,
+        [cssVarBackgroundColor]: background === 'surface' ? colorSurface : colorCanvas,
     };
 };
 const getDialogJssStyle = (isVisible, backdrop = 'blur') => {
@@ -6485,7 +6739,7 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
             ? {
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                background: backdropColor,
+                background: colorBackdrop,
                 ...(isBackdropBlur && frostedGlassStyle),
             }
             : {
@@ -6541,7 +6795,7 @@ const dialogGridJssStyle = () => {
 };
 const getDialogColorJssStyle = () => {
     return {
-        color: primaryColor$l, // enables color inheritance for slots
+        color: colorPrimary, // enables color inheritance for slots
         background: `var(${cssVarBackgroundColor})`,
     };
 };
@@ -6630,7 +6884,7 @@ const getSlotFooterJssStyle = () => {
             zIndex: -1,
             position: 'absolute',
             inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
-            background: frostedColor$7,
+            background: colorFrosted,
             borderRadius: radius3Xl,
             ...frostedGlassStyle,
         },
@@ -6673,7 +6927,6 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     [`${cssVarRefPaddingBottom$2}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline$2}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6722,10 +6975,17 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
                     borderEndEndRadius: dialogBorderRadius,
+                    ...forcedColorsMediaQuery({
+                        borderInlineEnd: '2px solid CanvasText',
+                    }),
                 }
                 : {
                     borderStartStartRadius: dialogBorderRadius,
                     borderEndStartRadius: dialogBorderRadius,
+                    // TODO: Fix needs to be implemented for Fullscreen (which is not available as prop for Flyout yet)
+                    ...forcedColorsMediaQuery({
+                        borderInlineStart: '2px solid CanvasText',
+                    }),
                 }),
             ...(isFooterFixed && {
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
@@ -6748,7 +7008,6 @@ const getComponentCss$U = (size, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6756,7 +7015,7 @@ const getComponentCss$U = (size, align, color, ellipsis) => {
         },
         root: getTypographyRootJssStyle(headingXXLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
             fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$3[sizeValue],
-            fontWeight: sizeValue === 'small' ? fontWeightSemiBold : fontWeightRegular
+            fontWeight: sizeValue === 'small' ? fontWeightSemiBold : fontWeightRegular,
         })), align, color, ellipsis),
     });
 };
@@ -6777,16 +7036,15 @@ const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
     return buildIconUrl(DEFAULT_ICON_NAME);
 };
 
-const { primaryColor: primaryColor$k, contrastLowColor: contrastLowColor$3, contrastMediumColor: contrastMediumColor$5, contrastHighColor: contrastHighColor$4, successColor: successColor$1, errorColor, warningColor, infoColor, } = colors;
 const colorMap$1 = {
-    primary: primaryColor$k,
-    'contrast-high': contrastHighColor$4,
-    'contrast-medium': contrastMediumColor$5,
-    'contrast-low': contrastLowColor$3,
-    success: successColor$1,
-    warning: warningColor,
-    error: errorColor,
-    info: infoColor,
+    primary: colorPrimary,
+    'contrast-high': colorContrastHigh,
+    'contrast-medium': colorContrastMedium,
+    'contrast-low': colorContrastLow,
+    success: colorSuccess,
+    warning: colorWarning,
+    error: colorError,
+    info: colorInfo,
     inherit: 'inherit',
 };
 const sizeMap$2 = {
@@ -6834,16 +7092,18 @@ const getComponentCss$T = (name, source, color, size) => {
                 font: `${isSizeInherit ? sizeMap$2.small : sizeMap$2[size]} ${fontFamily}`,
                 color: colorMap$1[color],
                 ...addImportantToEachRule({
-                    WebkitMask: `url(${buildIconUrl(source || name)}) center/contain no-repeat`, // necessary for Sogou browser support :-)
-                    mask: `url(${buildIconUrl(source || name)}) center/contain no-repeat`,
+                    WebkitMask: `url("${buildIconUrl(source || name)}") center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `url("${buildIconUrl(source || name)}") center/contain no-repeat`,
                     aspectRatio: '1/1',
                     background: 'currentcolor', // necessary for proper color inheritance
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
                     ...(isFlippableIcon(name, source) && {
-                        '&:dir(rtl)': {
+                        '&(:dir(rtl))': {
                             transform: 'scaleX(-1)',
                         },
                     }),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6862,13 +7122,12 @@ const getComponentCss$T = (name, source, color, size) => {
 
 const mediaQueryMinS$1 = getMediaQueryMin('s');
 const mediaQueryMaxS$2 = getMediaQueryMax('s');
-const { infoFrostedColor: infoFrostedColor$1, successFrostedColor: successFrostedColor$1, errorFrostedColor: errorFrostedColor$1, warningFrostedColor: warningFrostedColor$1 } = colors;
 const getBackgroundColor = (state) => {
     const colorMap = {
-        info: infoFrostedColor$1,
-        warning: warningFrostedColor$1,
-        success: successFrostedColor$1,
-        error: errorFrostedColor$1,
+        info: colorInfoFrosted,
+        warning: colorWarningFrosted,
+        success: colorSuccessFrosted,
+        error: colorErrorFrosted,
     };
     return colorMap[state];
 };
@@ -6887,6 +7146,10 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose) => {
             // 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 = () => ({
@@ -6905,10 +7168,9 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS$1 = getMediaQueryMax('s');
-const { primaryColor: primaryColor$j } = colors;
 const getTextJssStyle = {
     margin: 0,
-    color: primaryColor$j,
+    color: colorPrimary,
 };
 const getHeadingJssStyle = {
     ...headingSmallStyle,
@@ -6925,7 +7187,6 @@ const getComponentCss$S = (state, hasAction, hasClose) => {
                 display: 'grid',
                 ...addImportantToEachRule({
                     ...getNotificationRootJssStyle(state, hasAction, hasClose),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6989,7 +7250,15 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
 // CSS Variables defined in base input
@@ -7109,10 +7378,17 @@ const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$L = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
-const { contrastMediumColor: contrastMediumColor$4 } = colors;
 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;
@@ -7135,7 +7411,7 @@ const getUnitCounterJssStyle = () => {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         font: textSmallStyle.font,
-        color: contrastMediumColor$4,
+        color: colorContrastHigh,
     };
 };
 
@@ -7197,7 +7473,15 @@ const getComponentCss$J = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$I = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
 // CSS Variables defined in base input
@@ -7272,7 +7556,6 @@ const getMultilineEllipsis = (lineClamp) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const { primaryColor: primaryColor$i, contrastHighColor: contrastHighColor$3, contrastMediumColor: contrastMediumColor$3, surfaceColor } = colors;
 const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio) => {
     return getCss({
         '@global': {
@@ -7280,7 +7563,6 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                 display: 'block',
                 position: 'relative', // needed for ::slotted(a) to overlay correctly
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7314,7 +7596,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
             }),
             ...(hasPriceOriginal && {
                 s: {
-                    color: contrastMediumColor$3,
+                    color: colorContrastMedium,
                 },
             }),
         },
@@ -7326,8 +7608,8 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
             boxSizing: 'border-box',
             borderRadius: `var(${legacyRadiusLarge}, ${radius4Xl})`,
             padding: spacingFluidSmall,
-            color: primaryColor$i,
-            backgroundColor: surfaceColor,
+            color: colorPrimary,
+            backgroundColor: colorSurface,
             ...buildResponsiveStyles(aspectRatio, (ratio) => ({
                 aspectRatio: ratio,
             })),
@@ -7391,7 +7673,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                 margin: 0, // ua-style reset
                 ...textXXSmallStyle,
                 ...getMultilineEllipsis(2),
-                color: contrastHighColor$3,
+                color: colorContrastHigh,
             },
         }),
         ...(hasPriceOriginal && {
@@ -7404,7 +7686,6 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const { canvasColor: canvasColor$2, primaryColor: primaryColor$h } = colors;
 const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
@@ -7412,13 +7693,13 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
             ':host': {
                 display: 'flex',
                 alignItems: 'stretch',
+                colorScheme: 'dark', // dark is used in 99% of the cases (it can still be overridden by the user via `color-scheme`)
                 // Safari workaround to scale the tile properly
                 '@supports (-webkit-hyphens: auto)': {
                     alignItems: 'baseline',
                 },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7457,7 +7738,7 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
                 zIndex: 3,
                 maxWidth: '34.375rem',
                 ...textMediumStyle,
-                color: primaryColor$h,
+                color: colorPrimary,
                 hyphens: 'inherit',
                 ...mergeDeep(buildResponsiveStyles(size, (sizeValue) => ({
                     fontSize: getFontSizeText(sizeValue),
@@ -7485,14 +7766,14 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
                     ...(isTopAligned
                         ? {
                             gridArea: '1/1/3/-1',
-                            background: gradientToBottomStyle.background.replaceAll('0,0%,0%,', `from ${canvasColor$2} h s l / `),
+                            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
                             borderStartStartRadius: 'inherit',
                             borderStartEndRadius: 'inherit',
                         }
                         : {
                             gridArea: '4/1/6/-1',
-                            background: gradientToTopStyle.background.replaceAll('0,0%,0%,', `from ${canvasColor$2} h s l / `),
+                            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
                             borderEndStartRadius: 'inherit',
                             borderEndEndRadius: 'inherit',
@@ -7529,8 +7810,8 @@ const getComponentCss$E = (aspectRatio, size, weight, align, compact, hasGradien
         'link-or-button-pure': {
             zIndex: 5,
             gridColumn: 2,
-            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
-            alignSelf: 'center',
+            gridRow: `1/${hasFooterSlot ? 3 : 2}`,
+            alignSelf: isTopAligned ? 'flex-start' : 'flex-end',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -7610,7 +7891,6 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     [`${cssVarRefPaddingBottom$1}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline$1}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7651,6 +7931,10 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'center',
                     margin: `var(${cssVariableSpacingTop},clamp(16px, 10vh, 192px)) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},clamp(16px, 10vh, 192px))`, // horizontal margin is needed to ensure modal is placed on "Porsche Grid" when slotted content is wider than the viewport width
                     borderRadius: dialogBorderRadius,
+                    ...forcedColorsMediaQuery({
+                        outline: '2px solid CanvasText',
+                        outlineOffset: '-2px',
+                    }),
                 }),
         },
         ...(hasDismissButton && {
@@ -7666,12 +7950,11 @@ const getSvgUrl = (model) => {
 const cssVariableWidth = '--p-model-signature-width';
 const cssVariableHeight = '--p-model-signature-height';
 const cssVariableColor = '--p-model-signature-color';
-const { primaryColor: primaryColor$g, contrastLowColor: contrastLowColor$2, contrastMediumColor: contrastMediumColor$2, contrastHighColor: contrastHighColor$2 } = colors;
 const colorMap = {
-    primary: primaryColor$g,
-    'contrast-low': contrastLowColor$2,
-    'contrast-medium': contrastMediumColor$2,
-    'contrast-high': contrastHighColor$2,
+    primary: colorPrimary,
+    'contrast-low': colorContrastLow,
+    'contrast-medium': colorContrastMedium,
+    'contrast-high': colorContrastHigh,
     inherit: 'inherit',
 };
 const getComponentCss$B = (model, safeZone, size, color) => {
@@ -7692,7 +7975,9 @@ const getComponentCss$B = (model, safeZone, size, color) => {
                     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
-                    ...colorSchemeStyles,
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
                     ...hostHiddenStyles,
                 }),
             },
@@ -7739,7 +8024,9 @@ const getComponentCss$A = (isDisabled, selected) => {
             },
         },
         option: getOptionJssStyle('multi-select-option', cssVarInternalMultiSelectOptionScaling),
-        checkbox: mergeDeep(getCheckboxBaseStyles(isDisabled, false, true, 'none'), selected ? getCheckboxCheckedBaseStyles(false) : {}),
+        checkbox: mergeDeep(getCheckboxBaseStyles(isDisabled, false, true, 'none'), selected ? getCheckboxCheckedBaseStyles(false, 'none') : {}, {
+            flexShrink: 0,
+        }),
     });
 };
 
@@ -7748,14 +8035,11 @@ const paddingBlock = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.6
 const paddingInline = `calc(16.8px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 6px)`;
 const gap = `calc(11.2px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 4px)`;
 const paddingSlottedInlineStart = `calc(44.8px * (var(${cssVarInternalOptgroupScaling}) - 0.64285714) + 12px)`;
-const { primaryColor: primaryColor$f } = colors;
 const getComponentCss$z = (isDisabled) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
-                ...colorSchemeStyles,
                 ...hostHiddenStyles,
-                ...(isDisabled && getDisabledBaseStyles()),
             }),
             '::slotted(*)': {
                 '--p-internal-select-option-padding-left': paddingSlottedInlineStart,
@@ -7770,7 +8054,8 @@ const getComponentCss$z = (isDisabled) => {
                 paddingBlock,
                 paddingInline,
                 font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
-                color: primaryColor$f,
+                color: colorPrimary,
+                ...(isDisabled && getDisabledBaseStyles()),
             },
         },
     });
@@ -7792,11 +8077,10 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
                     [`${cssVarInternalMultiSelectScaling}`]: isCompact ? 0.64285714 : 1,
                     [`${cssVarInternalMultiSelectOptionScaling}`]: isCompact ? 0.64285714 : 1,
                     [`${cssVarInternalOptgroupScaling}`]: isCompact ? 0.64285714 : 1,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, isCompact, cssVarInternalMultiSelectScaling),
@@ -7818,7 +8102,7 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         // .no-results / .sr-only
         ...getFunctionalComponentNoResultsOptionStyles('multi-select-option', cssVarInternalMultiSelectScaling),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });
@@ -7835,13 +8119,11 @@ const disabledCursorStyle = {
 };
 const hiddenStyle = { display: 'none' };
 const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
-    const { primaryColor, disabledColor, frostedColor } = colors;
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7913,24 +8195,24 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
                 ...textSmallStyle,
                 whiteSpace: 'nowrap',
                 cursor: 'pointer',
-                color: primaryColor,
+                color: colorPrimary,
                 borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
                 borderColor: 'transparent', // default value is needed for smooth transition
                 outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style
                 ...hoverMediaQuery({
                     '&:not([aria-disabled]):not(.ellipsis):hover': {
                         ...frostedGlassStyle,
-                        background: frostedColor,
+                        background: colorFrosted,
                     },
                 }),
                 '&[aria-current]': {
                     ...disabledCursorStyle,
-                    color: primaryColor,
-                    border: `${borderWidthBase} solid ${primaryColor}`,
+                    color: colorPrimary,
+                    border: `${borderWidthBase} solid ${colorPrimary}`,
                 },
                 '&[aria-disabled]': {
+                    ...getDisabledBaseStyles(),
                     ...disabledCursorStyle,
-                    color: disabledColor,
                 },
                 // TODO :not(.ellipsis) is only needed for VRT states tests to work properly
                 '&:not(.ellipsis):focus-visible': getFocusBaseStyles(),
@@ -7946,7 +8228,6 @@ const getComponentCss$x = (activePage, pageTotal, showLastPage) => {
 };
 
 const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
-const { primaryColor: primaryColor$e } = colors;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
@@ -7964,11 +8245,10 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 display: 'block',
                 [`${cssVarInternalPinCodeScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -7983,28 +8263,26 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 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
-                color: primaryColor$e,
+                color: colorPrimary,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
                 textOverflow: 'ellipsis',
-                cursor: isDisabled ? 'not-allowed' : 'text',
+                cursor: isDisabled || isLoading ? 'not-allowed' : 'text',
                 textAlign: 'center',
-                ...(isLoading && {
-                    opacity: 0.2, // TODO: not in sync with e.g. checkbox/radio-button loading style
-                    cursor: 'not-allowed',
-                }),
+                ...((isDisabled || isLoading) && getDisabledBaseStyles()),
                 '&:focus-visible': {
                     borderColor: formStateBorderHoverColor,
                 },
                 ...(!isLoading &&
                     !isDisabled &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~&': {
+                        '&:hover': {
                             borderColor: formStateBorderHoverColor,
                         },
                     })),
             },
         },
         root: {
+            all: 'unset',
             display: 'grid',
             gap: spacingStaticXSmall,
         },
@@ -8027,7 +8305,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -8042,7 +8320,6 @@ const POPOVER_SAFE_ZONE = 8;
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$v = () => {
-    const { frostedSoftColor, frostedColor, canvasColor, primaryColor } = colors;
     const shadowColor = 'rgba(0,0,0,0.3)';
     return getCss({
         '@global': {
@@ -8059,7 +8336,6 @@ const getComponentCss$v = () => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8079,12 +8355,12 @@ const getComponentCss$v = () => {
                 height: fontLineHeight, // height needed to improve ssr support
                 borderRadius: radiusFull,
                 cursor: 'pointer',
-                backgroundColor: frostedColor,
+                backgroundColor: colorFrosted,
                 transition: getTransition('background-color'),
                 ...frostedGlassStyle,
                 ...hoverMediaQuery({
                     '&:hover': {
-                        backgroundColor: frostedSoftColor,
+                        backgroundColor: colorFrostedSoft,
                     },
                 }),
                 '&:focus-visible': getFocusBaseStyles(),
@@ -8110,7 +8386,10 @@ const getComponentCss$v = () => {
             width: '24px',
             height: '12px',
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
-            background: canvasColor,
+            background: colorCanvas,
+            ...forcedColorsMediaQuery({
+                background: 'CanvasText',
+            }),
         },
         content: {
             maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
@@ -8120,15 +8399,18 @@ const getComponentCss$v = () => {
             pointerEvents: 'auto',
             borderRadius: `var(${legacyRadiusSmall}, ${radiusLg})`,
             ...textSmallStyle,
-            background: canvasColor,
-            color: primaryColor,
+            background: colorCanvas,
+            color: colorPrimary,
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
         },
     });
 };
 
 const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-scaling';
 const checkedIcon = getInlineSVGBackgroundImage(`<circle cx="12" cy="12" r="6"/>`);
-const { primaryColor: primaryColor$d } = colors;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
@@ -8147,11 +8429,10 @@ const getComponentCss$u = (disabled, loading, state) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(disabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -8167,11 +8448,14 @@ const getComponentCss$u = (disabled, loading, state) => {
                 borderRadius: radiusFull,
                 ...(disabledOrLoading && {
                     pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+                    ...forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    }),
                 }),
                 '&:focus-visible': getFocusBaseStyles(),
                 ...(!disabledOrLoading &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~.wrapper>&': {
+                        '&:hover': {
                             borderColor: formStateBorderHoverColor,
                         },
                     })),
@@ -8181,9 +8465,10 @@ const getComponentCss$u = (disabled, loading, state) => {
                     gridArea: '1/1',
                 },
                 '&:checked::before': {
+                    forcedColorAdjust: 'none',
                     WebkitMask: `${checkedIcon} center/contain no-repeat`, // necessary for Sogou browser support :-)
                     mask: `${checkedIcon} center/contain no-repeat`,
-                    backgroundColor: primaryColor$d,
+                    backgroundColor: state === 'none' ? colorPrimary : formStateBorderColor,
                 },
                 '&::after': {
                     // Ensures the touch target is at least 24px, even if the checkbox is smaller than the minimum touch target size.
@@ -8206,6 +8491,7 @@ const getComponentCss$u = (disabled, loading, state) => {
             alignSelf: 'flex-start',
             minHeight: fontLineHeight, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+            ...(disabled && getDisabledBaseStyles()),
         },
         ...(loading && {
             spinner: {
@@ -8219,9 +8505,7 @@ const getComponentCss$u = (disabled, loading, state) => {
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled || loading, false, {
-            gridArea: '1/2',
-        }, {
+        ...getFunctionalComponentLabelStyles(disabled, loading, false, null, {
             paddingTop: labelPaddingTop,
             paddingInlineStart: labelPaddingInlineStart,
         }),
@@ -8256,15 +8540,17 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
         '@global': {
             ':host': {
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
                 [`${cssVarInternalRadioGroupScaling}`]: isCompact ? 0.64285714 : 1,
                 [`${cssVarInternalRadioGroupOptionScaling}`]: isCompact ? 0.64285714 : 1,
             },
-            '::slotted(*)': {
-                ...(isLoading && getDisabledBaseStyles()),
-            },
+            ...getFunctionalComponentLabelAfterStyles(),
+            ...(isLoading && {
+                '::slotted(*:not([slot]))': {
+                    ...addImportantToEachRule(getDisabledBaseStyles()),
+                },
+            }),
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
@@ -8293,11 +8579,8 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, {
-            cursor: 'inherit',
-            '&:is(legend)': {
-                marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
-            },
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel, {
+            ...(isDisabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
@@ -8325,7 +8608,6 @@ const getComponentCss$s = (isNextHidden, isPrevHidden, alignScrollIndicator, has
                 display: 'block',
                 ...addImportantToEachRule({
                     height: 'inherit',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8411,11 +8693,6 @@ const getComponentCss$s = (isNextHidden, isPrevHidden, alignScrollIndicator, has
             ...dismissButtonJssStyle,
             ...dropShadowLowStyle,
         },
-        icon: {
-            '&:dir(rtl)': {
-                transform: 'scaleX(-1)',
-            },
-        },
     });
 };
 
@@ -8425,7 +8702,6 @@ const ICON_OFFSET = '4px';
 const { font: BUTTON_FONT } = textSmallStyle;
 const ICON_SIZE = '1.5rem';
 const ICON_MARGIN = '.25rem';
-const { primaryColor: primaryColor$c, contrastMediumColor: contrastMediumColor$1 } = colors;
 const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
     const scalingVar = getScalingVar(compact);
     const verticalPadding = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
@@ -8465,11 +8741,15 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 border: `${borderWidthThin} solid ${isSelected ? formStateBorderHoverColor : formStateBorderColor}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 background: formStateBackgroundColor,
-                color: primaryColor$c,
+                color: colorPrimary,
                 ...textSmallStyle,
                 ...(isDisabled
                     ? {
                         cursor: 'not-allowed',
+                        ...forcedColorsMediaQuery({
+                            color: 'GrayText',
+                            borderColor: 'GrayText',
+                        }),
                     }
                     : {
                         cursor: 'pointer',
@@ -8488,7 +8768,11 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 display: 'block',
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
-                color: contrastMediumColor$1,
+                color: colorContrastMedium,
+                ...(isDisabled &&
+                    forcedColorsMediaQuery({
+                        color: 'GrayText',
+                    })),
             },
         },
         ...(hasIcon && {
@@ -8507,11 +8791,10 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         '@global': {
             ':host': {
                 ...addImportantToEachRule({
-                    ...(disabled && getDisabledBaseStyles()),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             'slot:not([name])': {
                 display: 'grid',
@@ -8530,11 +8813,8 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             gap: spacingStaticXSmall,
         },
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, {
-            cursor: 'inherit',
-            '&:is(legend)': {
-                marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
-            },
+        ...getFunctionalComponentLabelStyles(disabled, false, hideLabel, {
+            ...(disabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
@@ -8586,10 +8866,10 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
                     [`${cssVarInternalSelectScaling}`]: isCompact ? 0.64285714 : 1,
                     [`${cssVarInternalSelectOptionScaling}`]: isCompact ? 0.64285714 : 1,
                     [`${cssVarInternalOptgroupScaling}`]: isCompact ? 0.64285714 : 1,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('select', isOpen, isDisabled, state, isCompact, cssVarInternalSelectScaling),
@@ -8612,7 +8892,7 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         // .no-results / .sr-only
         ...getFunctionalComponentNoResultsOptionStyles('select-option', cssVarInternalSelectScaling),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });
@@ -8640,7 +8920,6 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     [`${cssVarRefPaddingBottom}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8665,6 +8944,9 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             marginBlockStart: spacingFluidLarge, // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
             borderTopLeftRadius: dialogBorderRadius,
             borderTopRightRadius: dialogBorderRadius,
+            ...forcedColorsMediaQuery({
+                borderTop: '2px solid CanvasText',
+            }),
         },
         ...(hasDismissButton && {
             dismiss: getDialogDismissButtonJssStyle(),
@@ -8681,7 +8963,6 @@ const sizeMap$1 = {
     large: { height: sizeLarge, width: sizeLarge },
     inherit: { height: 'inherit', width: 'inherit' },
 };
-const { primaryColor: primaryColor$b, contrastLowerColor } = colors;
 const getComponentCss$m = (size) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = `var(${cssVariableAnimationDuration}, ${motionDurationVeryLong})`;
@@ -8711,9 +8992,9 @@ const getComponentCss$m = (size) => {
             },
             ':host': {
                 display: 'inline-flex',
+                color: colorPrimary,
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8724,11 +9005,11 @@ const getComponentCss$m = (size) => {
             },
             circle: {
                 '&:first-child': {
-                    stroke: contrastLowerColor,
+                    stroke: colorContrastLower,
                 },
                 '&:last-child': {
                     animation: `$dash ${animationDuration} steps(50) infinite`,
-                    stroke: primaryColor$b,
+                    stroke: 'currentcolor', // necessary for proper color inheritance
                     strokeDasharray: strokeDasharray
                         ,
                     strokeLinecap: 'round',
@@ -8755,7 +9036,6 @@ const svgNumber = [
     '<path d="m10.47 11.94c-.65-.33-1.13-.92-1.13-2.01 0-1.53.85-2.47 2.66-2.47s2.66.94 2.66 2.47c0 1.08-.47 1.68-1.15 2.01.92.35 1.34 1.07 1.34 2.11 0 1.73-.99 2.49-2.86 2.49s-2.86-.76-2.86-2.49c0-1.04.41-1.76 1.33-2.11zm1.53 3.78c1.27 0 1.85-.51 1.85-1.69 0-1.1-.58-1.61-1.85-1.61s-1.85.52-1.85 1.61c0 1.18.58 1.69 1.85 1.69zm1.65-5.76c0-1.1-.56-1.56-1.65-1.56s-1.65.47-1.65 1.56c0 1 .46 1.6 1.65 1.6s1.65-.6 1.65-1.6z"/>',
     '<path d="m9.16 10.33c0-2.03 1.02-2.86 2.83-2.86s2.82.81 2.82 2.85c0 1.11-.3 1.82-.81 2.64l-2.18 3.44h-1.1l2.18-3.37c-.31.14-.65.2-1.01.2-1.82 0-2.74-.99-2.74-2.9zm4.65 0c0-1.23-.47-1.92-1.81-1.92s-1.81.69-1.81 1.92c0 1.37.49 2.05 1.81 2.05s1.81-.68 1.81-2.05z"/>',
 ];
-const { primaryColor: primaryColor$a, canvasColor: canvasColor$1, frostedColor: frostedColor$6 } = colors;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
@@ -8782,7 +9062,7 @@ const getComponentCss$l = (state, disabled) => {
                 display: 'grid',
                 gridTemplateColumns: 'auto minmax(0,1fr)',
                 gap: spacingStaticXs,
-                color: primaryColor$a,
+                color: colorPrimary,
                 paddingInline: `${spacingStaticSm} 12px`,
                 paddingBlock: '6px',
                 width: 'max-content',
@@ -8792,14 +9072,14 @@ const getComponentCss$l = (state, disabled) => {
                 borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
                 ...(isStateCurrent && {
                     ...frostedGlassStyle,
-                    background: frostedColor$6,
+                    background: colorFrosted,
                 }),
                 ...(!isDisabled &&
                     hoverMediaQuery({
                         transition: getTransition('background-color'),
                         '&:hover': {
                             ...frostedGlassStyle,
-                            background: frostedColor$6,
+                            background: colorFrosted,
                         },
                     })),
                 '&:focus-visible': getFocusBaseStyles(),
@@ -8812,7 +9092,7 @@ const getComponentCss$l = (state, disabled) => {
             height: fontLineHeight,
             ...(isStateCurrentOrUndefined && {
                 display: 'grid',
-                backgroundImage: `radial-gradient(circle, ${primaryColor$a} 60%, transparent 62%)`,
+                backgroundImage: `radial-gradient(circle, ${colorPrimary} 60%, transparent 62%)`,
                 '&::before': {
                     content: '""',
                     ...Array.from(new Array(9)).reduce((result, _, i) => ({
@@ -8820,7 +9100,7 @@ const getComponentCss$l = (state, disabled) => {
                         [`:host(:nth-of-type(${i + 1})) &`]: {
                             WebkitMask: `${getInlineSVGBackgroundImage(svgNumber[i])} center/contain no-repeat`, // necessary for Sogou browser support :-)
                             mask: `${getInlineSVGBackgroundImage(svgNumber[i])} center/contain no-repeat`,
-                            backgroundColor: canvasColor$1,
+                            backgroundColor: colorCanvas,
                         },
                     }), {}),
                 },
@@ -8836,7 +9116,6 @@ const getComponentCss$k = (size) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8850,14 +9129,13 @@ const getComponentCss$k = (size) => {
 };
 
 const cssVarInternalSwitchScaling = '--p-internal-switch-scaling';
-const { primaryColor: primaryColor$9, contrastLowColor: contrastLowColor$1, successColor, frostedSoftColor: frostedSoftColor$1, successFrostedSoftColor: successFrostedSoftColor$1, successLowColor } = colors;
 const getColors$1 = (checked, loading) => {
     return {
-        buttonBorderColor: checked ? successLowColor : contrastLowColor$1,
-        buttonBorderColorHover: checked ? successColor : primaryColor$9,
-        buttonBackgroundColor: checked ? successFrostedSoftColor$1 : frostedSoftColor$1,
-        toggleBackgroundColor: loading ? 'transparent' : checked ? successColor : primaryColor$9,
-        textColor: primaryColor$9,
+        buttonBorderColor: checked ? colorSuccessLow : colorContrastLow,
+        buttonBorderColorHover: checked ? colorSuccess : colorPrimary,
+        buttonBackgroundColor: checked ? colorSuccessFrostedSoft : colorFrostedSoft,
+        toggleBackgroundColor: loading ? 'transparent' : checked ? colorSuccess : colorPrimary,
+        textColor: colorPrimary,
     };
 };
 // CSS Variable defined in fontHyphenationStyle
@@ -8866,6 +9144,7 @@ const getColors$1 = (checked, loading) => {
  */
 const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisabled, isLoading, isCompact) => {
     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 buttonWidth = `calc(var(${cssVarInternalSwitchScaling}) * 3rem)`;
@@ -8888,7 +9167,6 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                     outline: 0, // custom element is able to delegate the focus
                     font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct gap definition based on ex-unit
                     gap,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...buildResponsiveStyles(isStretched, (stretchValue) => ({
                         justifyContent: stretchValue ? 'space-between' : 'flex-start',
@@ -8912,9 +9190,13 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 border: `${buttonBorderWidth} solid ${buttonBorderColor}`,
                 borderRadius: radiusFull,
                 background: buttonBackgroundColor,
-                cursor: isDisabledOrLoading(isDisabled, isLoading) ? 'not-allowed' : 'pointer',
+                cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                ...(!isDisabledOrLoading(isDisabled, isLoading) &&
+                ...(disabledOrLoading &&
+                    forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    })),
+                ...(!disabledOrLoading &&
                     hoverMediaQuery({
                         '&:hover': {
                             borderColor: buttonBorderColorHover,
@@ -8933,8 +9215,12 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 ...textSmallStyle,
                 minWidth: 0, // prevents flex child to overflow max available parent size
                 minHeight: 0, // prevents flex child to overflow max available parent size
-                cursor: isDisabledOrLoading(isDisabled, isLoading) ? 'not-allowed' : 'pointer',
+                cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 color: textColor,
+                ...(disabledOrLoading &&
+                    forcedColorsMediaQuery({
+                        color: 'GrayText',
+                    })),
                 ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                     order: alignLabelValue === 'start' ? -1 : 0,
                 })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
@@ -8943,6 +9229,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
             },
         },
         toggle: {
+            forcedColorAdjust: 'none',
             display: 'flex',
             placeItems: 'center',
             placeContent: 'center',
@@ -8982,20 +9269,18 @@ const cssVariableTablePadding = '--_a';
 const cssVariableTableHoverColor = '--_b';
 const cssVariableTableBorderColor = '--_c';
 const cssVariableTableBorderWidth = '--_d';
-const { primaryColor: primaryColor$8, frostedColor: frostedColor$5, contrastLowColor } = colors;
 const getComponentCss$h = (compact, layout) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    [cssVariableTableHoverColor]: frostedColor$5,
-                    [cssVariableTableBorderColor]: contrastLowColor,
+                    [cssVariableTableHoverColor]: colorFrosted,
+                    [cssVariableTableBorderColor]: colorContrastLow,
                     ...(compact && { [cssVariableTablePadding]: spacingStaticSmall }),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...textSmallStyle,
-                    color: primaryColor$8,
+                    color: colorPrimary,
                     textAlign: 'start',
                 }),
             },
@@ -9042,7 +9327,6 @@ const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
 
-const { frostedColor: frostedColor$4 } = colors;
 const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
 const getComponentCss$f = (active, direction, hideLabel, multiline) => {
@@ -9095,7 +9379,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                             },
                             '&:hover::before': {
                                 ...frostedGlassStyle,
-                                backgroundColor: frostedColor$4,
+                                backgroundColor: colorFrosted,
                             },
                         }),
                         '&:focus-visible::before': getFocusBaseStyles(),
@@ -9176,12 +9460,14 @@ const getComponentCss$c = () => {
 const scrollerAnimatedCssClass = 'scroller--animated';
 const targetSelectors = ['a', 'button'];
 const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
-const { primaryColor: primaryColor$7, frostedColor: frostedColor$3 } = colors;
 const barJssStyle = {
     position: 'absolute',
     height: '2px',
     left: 0,
-    background: primaryColor$7,
+    background: colorPrimary,
+    ...forcedColorsMediaQuery({
+        background: 'ActiveBorder',
+    }),
 };
 const getComponentCss$b = (size, weight) => {
     return getCss({
@@ -9190,7 +9476,6 @@ const getComponentCss$b = (size, weight) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     position: 'relative',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9209,7 +9494,7 @@ const getComponentCss$b = (size, weight) => {
                     whiteSpace: 'nowrap',
                     boxSizing: 'border-box',
                     textAlign: 'start',
-                    color: primaryColor$7,
+                    color: colorPrimary,
                     cursor: 'pointer',
                     borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
                     zIndex: 0, // needed for ::before pseudo-element to be visible
@@ -9227,7 +9512,7 @@ const getComponentCss$b = (size, weight) => {
                 ...hoverMediaQuery({
                     [transformSelector('::slotted([role]:hover)::before')]: {
                         ...frostedGlassStyle,
-                        background: frostedColor$3,
+                        background: colorFrosted,
                     },
                 }),
                 // basic invisible bar, that will be delayed via transition: visibility
@@ -9275,14 +9560,13 @@ const getComponentCss$b = (size, weight) => {
     });
 };
 
-const { primaryColor: primaryColor$6 } = colors;
 const getComponentCss$a = () => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    color: primaryColor$6, // enables color inheritance for e.g. slotted anchor
+                    color: colorPrimary, // enables color inheritance for e.g. slotted anchor
                     borderRadius: '2px',
                     ...hostHiddenStyles,
                     '&(:focus-visible)': getFocusBaseStyles(),
@@ -9298,7 +9582,6 @@ const getComponentCss$9 = () => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9310,7 +9593,6 @@ const getComponentCss$9 = () => {
     });
 };
 
-const { primaryColor: primaryColor$5, frostedColor: frostedColor$2, contrastHighColor: contrastHighColor$1 } = colors;
 const cssVarInternalTagDismissibleScaling = '--p-internal-tag-dismissible-scaling';
 // CSS Variable defined in fontHyphenationStyle
 /**
@@ -9331,7 +9613,6 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9345,15 +9626,19 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 padding: `${buttonPaddingBlock} ${buttonPaddingInline}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 cursor: 'pointer',
-                background: frostedColor$2,
-                color: primaryColor$5,
+                background: colorFrosted,
+                color: colorPrimary,
                 textAlign: 'start',
                 ...textSmallStyle,
                 ...hoverMediaQuery({
                     '&:hover > .icon': {
-                        backgroundColor: frostedColor$2,
+                        backgroundColor: colorFrosted,
                     },
                 }),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                }),
                 '&:focus-visible': getFocusBaseStyles(),
             },
         },
@@ -9361,7 +9646,7 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
             label: {
                 display: 'block',
                 marginBottom: '-4px',
-                color: contrastHighColor$1,
+                color: colorContrastHigh,
                 fontSize: fontSizeTextXSmall,
             },
         }),
@@ -9375,30 +9660,29 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
     });
 };
 
-const { canvasColor, frostedColor: frostedColor$1, frostedSoftColor, primaryColor: primaryColor$4, infoFrostedColor, contrastHighColor, infoFrostedSoftColor, successFrostedColor, successFrostedSoftColor, errorFrostedColor, errorFrostedSoftColor, warningFrostedColor, warningFrostedSoftColor, } = colors;
 const colorTextMap = {
-    primary: canvasColor,
-    secondary: primaryColor$4,
-    info: primaryColor$4,
-    success: primaryColor$4,
-    warning: primaryColor$4,
-    error: primaryColor$4,
+    primary: colorCanvas,
+    secondary: colorPrimary,
+    info: colorPrimary,
+    success: colorPrimary,
+    warning: colorPrimary,
+    error: colorPrimary,
 };
 const colorBackgroundMap = {
-    primary: primaryColor$4,
-    secondary: frostedColor$1,
-    info: infoFrostedColor,
-    success: successFrostedColor,
-    warning: warningFrostedColor,
-    error: errorFrostedColor,
+    primary: colorPrimary,
+    secondary: colorFrostedStrong,
+    info: colorInfoFrosted,
+    success: colorSuccessFrosted,
+    warning: colorWarningFrosted,
+    error: colorErrorFrosted,
 };
 const colorBackgroundHoverMap = {
-    primary: contrastHighColor,
-    secondary: frostedSoftColor,
-    info: infoFrostedSoftColor,
-    success: successFrostedSoftColor,
-    warning: warningFrostedSoftColor,
-    error: errorFrostedSoftColor,
+    primary: colorContrastHigh,
+    secondary: colorFrosted,
+    info: colorInfoFrostedSoft,
+    success: colorSuccessFrostedSoft,
+    warning: colorWarningFrostedSoft,
+    error: colorErrorFrostedSoft,
 };
 const getColors = (variant) => {
     return {
@@ -9416,7 +9700,6 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 verticalAlign: 'top', // TODO: should we set this CSS style at all?
                 whiteSpace: 'nowrap', // TODO: should either be exposed by a controlled CSS variable or a component prop or whitelist as supported custom styles
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9426,7 +9709,7 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 display: 'flex',
                 gap: '2px',
                 padding: compact ? '1px 6px' : `${spacingStaticXSmall} 9px`,
-                borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
+                borderRadius: `var(${legacyRadiusSmall}, calc(${compact ? '1px' : spacingStaticXSmall} + (${fontLineHeight} / 2)))`, // ensures pill shape has a maximum border radius to support multiline.
                 font: textXSmallStyle.font,
                 ...frostedGlassStyle,
                 color: textColor,
@@ -9438,6 +9721,11 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                             background: backgroundHoverColor,
                         },
                     })),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                    backgroundColor: 'Canvas',
+                }),
             },
             '::slotted': addImportantToEachRule({
                 '&(a),&(button)': {
@@ -9482,7 +9770,6 @@ const cssVariableUnorderedPseudoContent = '--p-internal-text-list-unordered-pseu
 const cssVariableOrderedGridColumn = '--p-internal-text-list-ordered-grid-column';
 const cssVariableOrderedPseudoSuffix = '--p-internal-text-list-ordered-pseudo-suffix';
 const counter = 'p-text-list-counter';
-const { primaryColor: primaryColor$3 } = colors;
 const getComponentCss$6 = (type) => {
     const isOrderedList = isListTypeOrdered(type);
     return getCss({
@@ -9491,7 +9778,6 @@ const getComponentCss$6 = (type) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     counterReset: counter,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9500,7 +9786,7 @@ const getComponentCss$6 = (type) => {
                 margin: 0,
                 padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) 0`,
                 listStyleType: 'none',
-                color: primaryColor$3,
+                color: colorPrimary,
             },
             // css selector for text-list-item
             '::slotted(*)': addImportantToEachRule({
@@ -9575,7 +9861,6 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9588,11 +9873,15 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis) => {
     });
 };
 
-const { primaryColor: primaryColor$2, contrastMediumColor, frostedColor } = colors;
 const cssVarInternalTextareaScaling = '--p-internal-textarea-scaling';
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ * @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"}
+ * @css-variable {"name":"--p-textarea-max-width","description":"Maximum width of the textarea.","defaultValue":"unset"}
+ * @css-variable {"name":"--p-textarea-min-height","description":"Minimum height of the textarea.","defaultValue":"unset"}
+ * @css-variable {"name":"--p-textarea-max-height","description":"Maximum height of the textarea.","defaultValue":"unset"}
  */
 const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact, hasCounter, resize) => {
     const textareaMinHeight = `calc(var(${cssVarInternalTextareaScaling}) * 3.5rem)`;
@@ -9607,24 +9896,26 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
                 display: 'block',
                 [`${cssVarInternalTextareaScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             textarea: {
                 all: 'unset',
                 gridArea: '1/1',
                 display: 'block',
                 resize,
+                fieldSizing: 'var(--p-textarea-field-sizing, unset)',
+                minWidth: `var(--p-textarea-min-width, 2ch)`, // to show at least 2 characters in very narrow containers
+                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}`,
                 borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusLg : radiusXl})`,
                 background: formStateBackgroundColor,
-                color: primaryColor$2,
+                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.
-                minWidth: '2ch', // to show at least 2 characters in very narrow containers
-                minHeight: textareaMinHeight,
                 boxSizing: 'border-box',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
                 font: textSmallStyle.font,
@@ -9637,13 +9928,13 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
                 cursor: isDisabled ? 'not-allowed' : 'text',
                 ...(isReadonly && {
                     borderColor: 'transparent',
-                    background: frostedColor,
-                    color: contrastMediumColor,
+                    background: colorFrosted,
+                    color: colorContrastMedium,
                 }),
                 ...(!isDisabled &&
                     !isReadonly &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~&': {
+                        '&:hover,.label-wrapper:hover~&': {
                             borderColor: formStateBorderHoverColor,
                         },
                     })),
@@ -9655,6 +9946,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         wrapper: {
             display: 'grid',
+            ...(isDisabled && getDisabledBaseStyles()),
         },
         ...(hasCounter && {
             counter: {
@@ -9667,7 +9959,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
             'sr-only': getHiddenTextJssStyle(),
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });
@@ -9716,7 +10008,6 @@ const getComponentCss$1 = () => {
                     inset: `auto auto var(${cssVariablePositionBottomInternal}) 64px`,
                     maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
                 },
-                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             ...preventFoucOfNestedElementsStyles,
@@ -9732,8 +10023,13 @@ const getComponentCss$1 = () => {
     });
 };
 
-const { primaryColor } = colors;
 const getComponentCss = (size) => {
+    const sizingStyles = {
+        display: 'block',
+        maxWidth: '100%',
+        maxHeight: '100%',
+        height: 'inherit',
+    };
     return getCss({
         '@global': {
             ':host': {
@@ -9751,18 +10047,12 @@ const getComponentCss = (size) => {
                             height: 'round(down, clamp(0.63rem, 0.42vw + 0.5rem, 1rem), 1px)',
                         },
                     }),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            'a, svg': {
-                display: 'block',
-                maxWidth: '100%',
-                maxHeight: '100%',
-                height: 'inherit',
-            },
             a: {
                 all: 'unset',
+                ...sizingStyles,
                 cursor: 'pointer',
                 '&::before': {
                     // needs to be defined always to have correct custom click area
@@ -9774,10 +10064,11 @@ const getComponentCss = (size) => {
                 '&:focus-visible::before': getFocusBaseStyles(),
             },
             svg: {
-                fill: primaryColor,
+                ...sizingStyles,
+                fill: colorPrimary,
             },
         },
     });
 };
 
-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, 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, 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 };