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

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 = "'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;
 
-const shadowHigh = '0px 8px 40px rgba(0,0,0,.16)';
+const leadingNormal = '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;
+
+const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
-const fontFamily$1 = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
+const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
 
-const fontFamily = fontFamily$1;
+const fontSizeDisplaySmall = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
 
-const fontHyphenationStyle = {
-    overflowWrap: 'break-word',
-    // @ts-ignore
-    hyphens: 'var(--p-hyphens, auto)',
-};
+const typescaleLg = '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 fontSizeHeadingLarge = typescaleLg;
+
+const typescaleMd = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
 
-const fontLineHeight$1 = 'calc(6px + 2.125ex)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
+const fontSizeHeadingMedium = typescaleMd;
 
-const fontLineHeight = fontLineHeight$1;
+const typescaleSm = '1rem';
 
-const fontSize2Xs = '.75rem';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+const fontSizeHeadingSmall = typescaleSm;
 
-const fontSizeTextXXSmall = fontSize2Xs;
+const typescaleXl = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
-const fontSizeXs = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
+const fontSizeHeadingXLarge = typescaleXl;
 
-const fontSizeTextXSmall = fontSizeXs;
+const typescale2Xl = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
 
-const fontSizeSm = '1rem';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescale2Xl instead. */
+const fontSizeHeadingXXLarge = typescale2Xl;
 
-const fontSizeTextSmall = fontSizeSm;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleLg instead. */
+const fontSizeTextLarge = typescaleLg;
 
-const fontSizeMd = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
+const fontSizeTextMedium = typescaleMd;
 
-const fontSizeTextMedium = fontSizeMd;
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
+const fontSizeTextSmall = typescaleSm;
 
-const fontSizeLg = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
+const fontSizeTextXLarge = typescaleXl;
 
-const fontSizeTextLarge = fontSizeLg;
+const typescaleXs$1 = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
 
-const fontSizeXl = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
+/** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXs instead. */
+const fontSizeTextXSmall = typescaleXs$1;
 
-const fontSizeTextXLarge = fontSizeXl;
+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 = 600;
 
-const fontWeightSemiBold = fontWeightSemiBold$1;
+/** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightSemibold instead. */
+const fontWeightSemiBold = fontWeightSemibold;
 
 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,108 @@ 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} / ${leadingNormal} ${fontPorscheNext}`,
+    ...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)';
 
-// src/generated/cssVariableDefinitionDark.ts
+const colorFocus = 'var(--p-color-focus)';
 
-// 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 colorBackdrop = 'var(--p-color-backdrop)';
 
-const colors = cssVariables;
+const colorCanvas = 'var(--p-color-canvas)';
+
+const colorFrosted = 'var(--p-color-frosted)';
+
+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 motionDurationMap = {
     short: motionDurationShort,
@@ -386,10 +497,9 @@ 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',
     };
 };
@@ -429,10 +539,6 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
         };
 };
 
-const colorSchemeStyles = {
-    colorScheme: 'light dark',
-};
-
 const hostHiddenStyles = {
     '&([hidden])': {
         display: 'none',
@@ -3774,7 +3880,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.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -3883,31 +3989,8 @@ 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 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 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"}
@@ -3921,10 +4004,9 @@ const getComponentCss$19 = (size, compact, open, sticky) => {
                     ...(compact
                         ? { transform: 'translate3d(0,0,0)' } // relevant for custom click-area in compact variant
                         : {
-                            borderBottom: `1px solid ${contrastLowColor$8}`,
+                            borderBottom: `1px solid ${colorContrastLower}`,
                         }),
                     '&(:only-of-type)': { borderBottom: 0 },
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -3939,7 +4021,7 @@ const getComponentCss$19 = (size, compact, open, sticky) => {
                 gap: '24px',
                 cursor: 'pointer',
                 zIndex: 0,
-                color: primaryColor$B,
+                color: colorPrimary,
                 ...textSmallStyle,
                 fontWeight: fontWeightSemiBold,
                 ...buildResponsiveStyles(size, (s) => ({
@@ -3970,7 +4052,7 @@ const getComponentCss$19 = (size, compact, open, sticky) => {
                     },
                     '&:hover::before': {
                         ...frostedGlassStyle,
-                        background: frostedSoftColor$6,
+                        background: colorFrostedSoft,
                     },
                 })),
                 '&:focus-visible::before': getFocusBaseStyles(),
@@ -3982,7 +4064,7 @@ const getComponentCss$19 = (size, compact, open, sticky) => {
                 position: 'sticky',
                 top: `var(${cssVariablePositionStickyTop}, ${positionStickyTopFallback})`,
                 zIndex: 1, // to be on top of the collapsible
-                background: canvasColor$a,
+                background: colorCanvas,
             }),
         },
         'icon-container': {
@@ -3998,7 +4080,7 @@ const getComponentCss$19 = (size, compact, open, sticky) => {
             transition: getTransition('transform'),
         },
         collapsible: {
-            color: primaryColor$B, // enables color inheritance for slotted content
+            color: colorPrimary, // enables color inheritance for slotted content
             display: 'grid',
             ...(sticky && {
                 position: 'relative',
@@ -4104,7 +4186,6 @@ const getComponentCss$18 = (isOpen) => {
                     [getMediaQueryMin('xxl')]: {
                         insetInline: gridExtendedOffsetXXL,
                     },
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4142,7 +4223,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 +4230,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 +4245,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) => ({
@@ -4190,14 +4269,14 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 transition: getTransition('background-color'),
                 ...(active && {
                     ...frostedGlassStyle,
-                    backgroundColor: frostedColor$a,
+                    backgroundColor: colorFrosted,
                 }),
             },
             ...(!isDisabledOrLoading &&
                 hoverMediaQuery({
                     '&:hover::before': {
                         ...frostedGlassStyle,
-                        backgroundColor: frostedColor$a,
+                        backgroundColor: colorFrostedStrong,
                     },
                 })),
             ...(!hasSlottedAnchor && {
@@ -4247,7 +4326,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 +4363,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 +4370,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 +4415,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 +4444,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 +4489,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 +4506,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];
@@ -4465,7 +4542,6 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                     }),
                 }))),
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -4514,7 +4590,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 +4600,9 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         root: {
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
-                backgroundColor: frostedSoftColor$4,
-                borderColor: frostedSoftColor$4,
-                color: contrastLowColor$7,
+                backgroundColor: colorFrostedSoft,
+                borderColor: colorFrostedSoft,
+                color: colorContrastLow,
             }),
         },
         ...(isLoading && {
@@ -4558,126 +4633,143 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
     }));
 };
 
-// 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 +4780,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 +4806,6 @@ const getComponentCss$14 = (isSidebarStartOpen, isSidebarEndOpen) => {
                     display: 'none',
                 },
             },
-            '&:focus': {
-                outline: 'none',
-            },
         },
         blur: {
             zIndex: -1,
@@ -4726,64 +4817,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 +4893,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 +4960,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 +4999,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 +5025,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 +5053,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 +5083,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 +5128,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 +5206,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                     position: 'relative',
                 },
                 borderRadius: radiusFull,
-                background: contrastMediumColor$a,
+                background: colorContrastMedium,
                 ...(isInfinitePagination
                     ? {
                         width: '0px',
@@ -5150,7 +5246,7 @@ const getComponentCss$13 = (gradient, hasHeading, hasDescription, hasControlsSlo
                 },
             }),
             [bulletActiveClass]: {
-                background: primaryColor$w,
+                background: colorPrimary,
                 height: paginationBulletSize,
                 width: addImportantToRule(paginationActiveBulletSize),
                 ...(isInfinitePagination && {
@@ -5168,25 +5264,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 +5293,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 +5319,9 @@ 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})`,
         borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusMd : radiusLg})`,
         ...(disabledOrLoading && {
             pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
@@ -5240,9 +5345,9 @@ 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 {};
     }
@@ -5250,14 +5355,14 @@ const getCheckboxCheckedBaseStyles = (isLoading) => {
         '&::before': {
             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 {};
     }
@@ -5265,7 +5370,7 @@ const getCheckboxIndeterminateBaseStyles = (isLoading) => {
         '&::before': {
             WebkitMask: `${indeterminateIcon} center/contain no-repeat`,
             mask: `${indeterminateIcon} center/contain no-repeat`,
-            backgroundColor: primaryColor$t,
+            backgroundColor: state === 'none' ? colorPrimary : formStateBorderColor,
         },
     };
 };
@@ -5278,27 +5383,46 @@ const getFunctionalComponentRequiredStyles = () => {
     };
 };
 
-const { primaryColor: primaryColor$s, contrastHighColor: contrastHighColor$8 } = colors;
-const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, additionalDefaultJssStyle, additionalIsShownJssStyle) => {
+const getFunctionalComponentLabelAfterStyles = (isDisabledOrLoading, additionalIsDisabledJssStyle) => {
     return {
+        'slot[name="label-after"]': {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            ...(isDisabledOrLoading && {
+                pointerEvents: 'none',
+                ...additionalIsDisabledJssStyle,
+            }),
+        },
+    };
+};
+const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
+    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',
             ...(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,
+            color: colorPrimary,
             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 +5452,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,35 +5469,39 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...(isDisabled && getDisabledBaseStyles()),
                 }),
                 [`${cssVarInternalCheckboxScaling}`]: isCompact ? 0.64285714 : 1,
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             ...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',
@@ -5385,15 +5519,13 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
         }),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, {
-            gridArea: '1/2',
-        }, {
+            cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+        }, null, {
             paddingTop: labelPaddingTop,
             paddingInlineStart: labelPaddingInlineStart,
         }),
         // .message
-        ...getFunctionalComponentStateMessageStyles(state, {
-            gridColumn: '1/-1',
-        }),
+        ...getFunctionalComponentStateMessageStyles(state),
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
     });
@@ -5408,7 +5540,6 @@ 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 wrapperBorderWidth = borderWidthThin;
     const wrapperHeight = `calc(var(${cssVarInternalInputBaseScaling}) * 3.5rem)`;
@@ -5425,11 +5556,11 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                 ...addImportantToEachRule({
                     [`${cssVarButtonPurePadding}`]: buttonPadding,
                     [`${cssVarButtonPureMargin}`]: buttonMargin,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -5455,13 +5586,13 @@ 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': {
                 borderColor: formStateBorderHoverColor,
@@ -5470,7 +5601,7 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                 !readOnly &&
                 !isLoading &&
                 hoverMediaQuery({
-                    '&:hover:not(.button:hover),label:hover~&': {
+                    '&:hover:not(.button:hover),.label-wrapper:hover~&': {
                         borderColor: formStateBorderHoverColor,
                     },
                 })),
@@ -5491,7 +5622,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,7 +5644,7 @@ 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',
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
         ...(!isDisabled && {
@@ -5542,7 +5672,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 +5681,7 @@ const getFilterJssStyle = (scalingVarName) => {
         top,
         padding,
         margin,
-        background: canvasColor$6,
+        background: colorCanvas,
         zIndex: 1,
     };
 };
@@ -5566,7 +5695,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 +5706,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,10 +5714,10 @@ const getOptionJssStyle = (componentName, cssVarScalingName) => {
         borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
         transition: `${getTransition('background-color')}, ${getTransition('color')}`,
         '&--highlighted': {
-            background: frostedSoftColor$2,
+            background: colorFrosted,
         },
         '&--highlighted, &--selected': {
-            color: primaryColor$p,
+            color: colorPrimary,
         },
         '&--disabled': {
             cursor: 'not-allowed',
@@ -5620,7 +5748,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 +5767,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 +5783,6 @@ const getSelectedSlotJssStyle = {
     overflow: 'hidden',
 };
 
-const { contrastMediumColor: contrastMediumColor$8 } = colors;
 const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScalingName) => {
     return {
         'no-results': {
@@ -5664,7 +5790,7 @@ const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScalin
             '&[role=option]': {
                 cursor: 'not-allowed',
             },
-            color: contrastMediumColor$8,
+            color: colorContrastMedium,
         },
         'sr-only': getHiddenTextJssStyle(),
     };
@@ -5698,7 +5824,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 +5855,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 +5910,6 @@ const getComponentCss$10 = (size, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5798,12 +5921,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 +5933,6 @@ const getComponentCss$$ = (color, orientation) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -5843,7 +5964,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 +5981,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 +6222,6 @@ const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
             ':host': {
                 display: 'contents',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6337,7 +6455,6 @@ const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
             ':host': {
                 display: 'grid',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6365,14 +6482,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 +6500,7 @@ const getComponentCss$X = (state, labelSize, hasLabel) => {
                 legend: {
                     all: 'unset',
                     marginBottom: spacingStaticMedium,
-                    color: primaryColor$m,
+                    color: colorPrimary,
                     ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
                 },
             }),
@@ -6414,7 +6529,6 @@ const getComponentCss$W = (size) => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6439,7 +6553,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 +6560,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 +6598,7 @@ const getDialogBackdropTransitionJssStyle = (isVisible, backdrop = 'blur') => {
             ? {
                 visibility: 'inherit',
                 pointerEvents: 'auto',
-                background: backdropColor,
+                background: colorBackdrop,
                 ...(isBackdropBlur && frostedGlassStyle),
             }
             : {
@@ -6541,7 +6654,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 +6743,7 @@ const getSlotFooterJssStyle = () => {
             zIndex: -1,
             position: 'absolute',
             inset: `calc(${paddingBlock} - ${offset}) calc(${dialogPaddingInline} - ${offset})`,
-            background: frostedColor$7,
+            background: colorFrosted,
             borderRadius: radius3Xl,
             ...frostedGlassStyle,
         },
@@ -6673,7 +6786,6 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                     [`${cssVarRefPaddingBottom$2}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline$2}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6748,7 +6860,6 @@ const getComponentCss$U = (size, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6756,7 +6867,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 +6888,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 +6944,15 @@ 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
                     ...(isFlippableIcon(name, source) && {
-                        '&:dir(rtl)': {
+                        '&(:dir(rtl))': {
                             transform: 'scaleX(-1)',
                         },
                     }),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -6862,13 +6971,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];
 };
@@ -6905,10 +7013,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 +7032,6 @@ const getComponentCss$S = (state, hasAction, hasClose) => {
                 display: 'grid',
                 ...addImportantToEachRule({
                     ...getNotificationRootJssStyle(state, hasAction, hasClose),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7112,7 +7218,6 @@ const getComponentCss$L = (disabled, loading, hideLabel, state, compact, readOnl
     return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
 };
 
-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 +7240,7 @@ const getUnitCounterJssStyle = () => {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         font: textSmallStyle.font,
-        color: contrastMediumColor$4,
+        color: colorContrastHigh,
     };
 };
 
@@ -7272,7 +7377,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 +7384,6 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                 display: 'block',
                 position: 'relative', // needed for ::slotted(a) to overlay correctly
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7314,7 +7417,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
             }),
             ...(hasPriceOriginal && {
                 s: {
-                    color: contrastMediumColor$3,
+                    color: colorContrastMedium,
                 },
             }),
         },
@@ -7326,8 +7429,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 +7494,7 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
                 margin: 0, // ua-style reset
                 ...textXXSmallStyle,
                 ...getMultilineEllipsis(2),
-                color: contrastHighColor$3,
+                color: colorContrastHigh,
             },
         }),
         ...(hasPriceOriginal && {
@@ -7404,7 +7507,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 +7514,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 +7559,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 +7587,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 +7631,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 +7712,6 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     [`${cssVarRefPaddingBottom$1}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline$1}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7666,12 +7767,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 +7792,6 @@ 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,
                     ...hostHiddenStyles,
                 }),
             },
@@ -7739,7 +7838,7 @@ 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') : {}),
     });
 };
 
@@ -7748,12 +7847,10 @@ 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()),
             }),
@@ -7770,7 +7867,7 @@ const getComponentCss$z = (isDisabled) => {
                 paddingBlock,
                 paddingInline,
                 font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
-                color: primaryColor$f,
+                color: colorPrimary,
             },
         },
     });
@@ -7792,11 +7889,11 @@ 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(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, isCompact, cssVarInternalMultiSelectScaling),
@@ -7835,13 +7932,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 +8008,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 +8041,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 +8058,11 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 display: 'block',
                 [`${cssVarInternalPinCodeScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -7983,28 +8077,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',
-                }),
+                ...(isLoading && getDisabledBaseStyles()),
                 '&:focus-visible': {
                     borderColor: formStateBorderHoverColor,
                 },
                 ...(!isLoading &&
                     !isDisabled &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~&': {
+                        '&:hover': {
                             borderColor: formStateBorderHoverColor,
                         },
                     })),
             },
         },
         root: {
+            all: 'unset',
             display: 'grid',
             gap: spacingStaticXSmall,
         },
@@ -8042,7 +8134,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 +8150,6 @@ const getComponentCss$v = () => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8079,12 +8169,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 +8200,7 @@ const getComponentCss$v = () => {
             width: '24px',
             height: '12px',
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
-            background: canvasColor,
+            background: colorCanvas,
         },
         content: {
             maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
@@ -8120,15 +8210,14 @@ const getComponentCss$v = () => {
             pointerEvents: 'auto',
             borderRadius: `var(${legacyRadiusSmall}, ${radiusLg})`,
             ...textSmallStyle,
-            background: canvasColor,
-            color: primaryColor,
+            background: colorCanvas,
+            color: colorPrimary,
         },
     });
 };
 
 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 +8236,11 @@ const getComponentCss$u = (disabled, loading, state) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
-                    ...(disabled && getDisabledBaseStyles()),
+                    ...(disabledOrLoading && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -8171,7 +8260,7 @@ const getComponentCss$u = (disabled, loading, state) => {
                 '&:focus-visible': getFocusBaseStyles(),
                 ...(!disabledOrLoading &&
                     hoverMediaQuery({
-                        '&:hover,label:hover~.wrapper>&': {
+                        '&:hover': {
                             borderColor: formStateBorderHoverColor,
                         },
                     })),
@@ -8183,7 +8272,7 @@ const getComponentCss$u = (disabled, loading, state) => {
                 '&:checked::before': {
                     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.
@@ -8219,9 +8308,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 +8343,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(isDisabled, getDisabledBaseStyles()),
+            ...(isLoading && {
+                '::slotted(*:not([slot]))': {
+                    ...addImportantToEachRule(getDisabledBaseStyles()),
+                },
+            }),
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
@@ -8294,10 +8383,7 @@ 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
-            },
+            ...(isDisabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
@@ -8325,7 +8411,6 @@ const getComponentCss$s = (isNextHidden, isPrevHidden, alignScrollIndicator, has
                 display: 'block',
                 ...addImportantToEachRule({
                     height: 'inherit',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8425,7 +8510,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,7 +8549,7 @@ 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
                     ? {
@@ -8488,7 +8572,7 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 display: 'block',
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
-                color: contrastMediumColor$1,
+                color: colorContrastMedium,
             },
         },
         ...(hasIcon && {
@@ -8507,12 +8591,15 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         '@global': {
             ':host': {
                 ...addImportantToEachRule({
-                    ...(disabled && getDisabledBaseStyles()),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(disabled),
             ...preventFoucOfNestedElementsStyles,
+            ...getFunctionalComponentLabelAfterStyles(disabled, getDisabledBaseStyles()),
+            ...(disabled && {
+                '::slotted(*:not([slot]))': addImportantToEachRule(getDisabledBaseStyles()),
+            }),
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
@@ -8531,10 +8618,7 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
         },
         // .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
-            },
+            ...(disabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
@@ -8586,10 +8670,11 @@ 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,
                 }),
+                ...(isDisabled && getDisabledBaseStyles()),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('select', isOpen, isDisabled, state, isCompact, cssVarInternalSelectScaling),
@@ -8640,7 +8725,6 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
                     [`${cssVarRefPaddingBottom}`]: dialogPaddingBottom,
                     [`${cssVarRefPaddingInline}`]: dialogPaddingInline,
                     ...dialogHostJssStyle(background),
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8681,7 +8765,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})`;
@@ -8713,7 +8796,6 @@ const getComponentCss$m = (size) => {
                 display: 'inline-flex',
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8724,11 +8806,11 @@ const getComponentCss$m = (size) => {
             },
             circle: {
                 '&:first-child': {
-                    stroke: contrastLowerColor,
+                    stroke: colorContrastLower,
                 },
                 '&:last-child': {
                     animation: `$dash ${animationDuration} steps(50) infinite`,
-                    stroke: primaryColor$b,
+                    stroke: colorPrimary,
                     strokeDasharray: strokeDasharray
                         ,
                     strokeLinecap: 'round',
@@ -8755,7 +8837,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 +8863,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 +8873,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 +8893,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 +8901,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 +8917,6 @@ const getComponentCss$k = (size) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -8850,14 +8930,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
@@ -8888,7 +8967,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',
@@ -8982,20 +9060,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 +9118,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 +9170,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
                             },
                             '&:hover::before': {
                                 ...frostedGlassStyle,
-                                backgroundColor: frostedColor$4,
+                                backgroundColor: colorFrosted,
                             },
                         }),
                         '&:focus-visible::before': getFocusBaseStyles(),
@@ -9176,12 +9251,11 @@ 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,
 };
 const getComponentCss$b = (size, weight) => {
     return getCss({
@@ -9190,7 +9264,6 @@ const getComponentCss$b = (size, weight) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     position: 'relative',
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9209,7 +9282,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 +9300,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 +9348,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 +9370,6 @@ const getComponentCss$9 = () => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9310,7 +9381,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 +9401,6 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9345,13 +9414,13 @@ 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,
                     },
                 }),
                 '&:focus-visible': getFocusBaseStyles(),
@@ -9361,7 +9430,7 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
             label: {
                 display: 'block',
                 marginBottom: '-4px',
-                color: contrastHighColor$1,
+                color: colorContrastHigh,
                 fontSize: fontSizeTextXSmall,
             },
         }),
@@ -9375,30 +9444,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 +9484,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,
                 }),
             },
@@ -9482,7 +9549,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 +9557,6 @@ const getComponentCss$6 = (type) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     counterReset: counter,
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9500,7 +9565,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 +9640,6 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis) => {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
@@ -9588,11 +9652,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 +9675,27 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
                 display: 'block',
                 [`${cssVarInternalTextareaScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
-                    ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
+            ...getFunctionalComponentLabelAfterStyles(isDisabled),
             ...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 +9708,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,
                         },
                     })),
@@ -9716,7 +9787,6 @@ const getComponentCss$1 = () => {
                     inset: `auto auto var(${cssVariablePositionBottomInternal}) 64px`,
                     maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
                 },
-                ...colorSchemeStyles,
                 ...hostHiddenStyles,
             }),
             ...preventFoucOfNestedElementsStyles,
@@ -9732,8 +9802,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 +9826,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 +9843,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 };