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

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

@@ -14,15 +14,15 @@ const borderWidthBase = '2px';
 /** @deprecated since v4.0.0, will be removed with next major release. Use 1px instead. */
 const borderWidthThin = '1px';
 
-const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
+const fontPorscheNext$1 = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
-const fontFamily = fontPorscheNext;
+const fontFamily = fontPorscheNext$1;
 
-const leadingNormal = 'calc(6px + 2.125ex)';
+const leadingNormal$1 = 'calc(6px + 2.125ex)';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
-const fontLineHeight = leadingNormal;
+const fontLineHeight = leadingNormal$1;
 
 const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
@@ -35,15 +35,15 @@ 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 typescaleMd$1 = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
-const fontSizeHeadingMedium = typescaleMd;
+const fontSizeHeadingMedium = typescaleMd$1;
 
-const typescaleSm = '1rem';
+const typescaleSm$1 = '1rem';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
-const fontSizeHeadingSmall = typescaleSm;
+const fontSizeHeadingSmall = typescaleSm$1;
 
 const typescaleXl = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
@@ -59,10 +59,10 @@ const fontSizeHeadingXXLarge = typescale2Xl;
 const fontSizeTextLarge = typescaleLg;
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescaleMd instead. */
-const fontSizeTextMedium = typescaleMd;
+const fontSizeTextMedium = typescaleMd$1;
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescaleSm instead. */
-const fontSizeTextSmall = typescaleSm;
+const fontSizeTextSmall = typescaleSm$1;
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescaleXl instead. */
 const fontSizeTextXLarge = typescaleXl;
@@ -98,10 +98,10 @@ const fontWeightNormal = 400;
 /** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightNormal instead. */
 const fontWeightRegular = fontWeightNormal;
 
-const fontWeightSemibold = 600;
+const fontWeightSemibold$1 = 600;
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use fontWeightSemibold instead. */
-const fontWeightSemiBold = fontWeightSemibold;
+const fontWeightSemiBold = fontWeightSemibold$1;
 
 const fontWeightBold$1 = 700;
 
@@ -388,7 +388,7 @@ const textMediumStyle = {
 };
 
 const proseTextSmStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `normal normal ${fontWeightNormal} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
     ...fontHyphenationStyle,
 };
 
@@ -466,6 +466,20 @@ const colorWarningFrosted = 'var(--p-color-warning-frosted)';
 
 const colorWarningFrostedSoft = 'var(--p-color-warning-frosted-soft)';
 
+const fontPorscheNext = 'var(--p-font-porsche-next)';
+
+const leadingNormal = 'var(--p-leading-normal)';
+
+const typescaleMd = 'var(--p-typescale-md)';
+
+const typescaleSm = 'var(--p-typescale-sm)';
+
+const fontWeightSemibold = 'var(--p-font-weight-semibold)';
+
+const forcedColorsMediaQuery = (style) => {
+    return { '@media (forced-colors: active)': style };
+};
+
 const motionDurationMap = {
     short: motionDurationShort,
     moderate: motionDurationModerate,
@@ -503,11 +517,18 @@ const getFocusBaseStyles = () => {
     return {
         outline: `${borderWidthBase} solid ${colorFocus}`,
         outlineOffset: '2px',
+        ...forcedColorsMediaQuery({
+            outlineColor: 'Highlight',
+        }),
     };
 };
 const getDisabledBaseStyles = () => {
     return {
         opacity: alphaDisabled,
+        ...forcedColorsMediaQuery({
+            opacity: 1,
+            color: 'GrayText',
+        }),
     };
 };
 /**
@@ -3882,7 +3903,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-beta.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -3991,130 +4012,195 @@ const breakpointCustomizableTemplate = `value, ${internalValidateProps
     .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
     .replace(/"/g, '')}`;
 
-const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
-const positionStickyTopFallback = '0';
+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>')`;
+};
+
+/**
+ * @css-variable {"name": "--p-accordion-summary-top", "description": "Controls the sticky top position when `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarSummaryTop = '--p-accordion-summary-top';
+const cssVarSummaryTopDeprecated = '--p-accordion-position-sticky-top'; // deprecated
+/**
+ * @css-variable {"name": "--p-accordion-px", "description": "Horizontal padding of the accordion.", "defaultValue": "16px"}
+ */
+const cssVarPaddingInline$1 = '--p-accordion-px';
+/**
+ * @css-variable {"name": "--p-accordion-py", "description": "Vertical padding of the accordion.", "defaultValue": "16px"}
+ */
+const cssVarPaddingBlock = '--p-accordion-py';
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$19 = (size, compact, open, sticky) => {
+const icon = getInlineSVGBackgroundImage(`<path d="m12 15.125h-.001l-.005-.006-6.494-5.476.642-.768 5.858 4.94 5.858-4.94.642.769-6.497 5.477z"/>`);
+const backgroundMap = {
+    canvas: colorCanvas,
+    surface: colorSurface,
+    frosted: colorFrosted,
+    none: 'transparent',
+};
+// as soon as CSS selector `:has-slotted` works cross-browser we can simplify the styles a lot and remove all the complexity regarding the summary-before and summary-after slots
+const getComponentCss$19 = (alignMarker, background, isCompact, isOpen, isSticky, hasSummaryBefore, hasSummaryAfter, size) => {
+    const duration = isOpen ? 'moderate' : 'short';
+    const easing = isOpen ? 'in' : 'out';
+    const compactFactor = isCompact ? 0.64285714 : 1;
+    const paddingBlock = `calc(28px * (${compactFactor} - 0.64285714) + 6px)`;
+    const paddingInline = `calc(11.2px * (${compactFactor} - 0.64285714) + 12px)`;
+    const gap = `calc(11.2px * (${compactFactor} - 0.64285714) + 4px)`;
+    const marginTop = `calc(28px * (${compactFactor} - 0.64285714) + 6px)`;
+    const isIconAlignedStart = alignMarker === 'start';
     return getCss({
         '@global': {
+            '@keyframes overflow-hidden': {
+                from: { overflow: 'hidden' },
+                to: { overflow: 'hidden' },
+            },
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...(compact
-                        ? { transform: 'translate3d(0,0,0)' } // relevant for custom click-area in compact variant
-                        : {
-                            borderBottom: `1px solid ${colorContrastLower}`,
-                        }),
-                    '&(:only-of-type)': { borderBottom: 0 },
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
-            button: {
+            slot: {
+                '&[name="summary-before"], &[name="summary"], &[name="summary-after"]': {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap,
+                },
+                '&[name="summary-before"]': {
+                    gridArea: `1/${isIconAlignedStart ? '2' : '1'}`,
+                    zIndex: 2, // ensures stacking to be above the summary section
+                },
+                '&[name="summary"]': {
+                    gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '3' : hasSummaryBefore || isIconAlignedStart ? '2' : '1'}`,
+                },
+                '&[name="summary-after"]': {
+                    gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '4' : hasSummaryBefore || isIconAlignedStart ? '3' : '2'}`,
+                    zIndex: 2, // ensures stacking to be above the summary section
+                },
+                '&:not([name])': {
+                    display: 'block',
+                    // as soon as all browsers support calc-size(auto) to be transitionable, we can remove the overflow rule and animation
+                    overflow: 'hidden',
+                    'details[open] &': {
+                        overflow: 'visible',
+                        // fix potential overflow issues
+                        animation: `overflow-hidden var(${cssVariableTransitionDuration},${motionDurationMap[duration]})`,
+                    },
+                },
+            },
+            'h1,h2,h3,h4,h5,h6': {
                 all: 'unset',
-                display: 'flex',
-                position: 'relative',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                width: '100%',
-                gap: '24px',
-                cursor: 'pointer',
-                zIndex: 0,
-                color: colorPrimary,
-                ...textSmallStyle,
-                fontWeight: fontWeightSemiBold,
-                ...buildResponsiveStyles(size, (s) => ({
-                    fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
-                    padding: `${compact ? '4px' : s === 'medium' ? '20px' : '15px'} 0`,
+                gridArea: `1/${hasSummaryBefore && isIconAlignedStart ? '3' : hasSummaryBefore || isIconAlignedStart ? '2' : '1'}`,
+                font: 'inherit',
+                fontWeight: fontWeightSemibold,
+                ...buildResponsiveStyles(size, (sizeValue) => ({
+                    fontSize: sizeValue === 'medium' ? typescaleMd : typescaleSm,
                 })),
-                // mergeDeep needed because of hoverMediaQuery in certain modes not wrapping keys and therefore overriding "&::before" key
-                ...mergeDeep({
-                    '&::before': {
-                        content: '""',
-                        zIndex: -1,
-                        position: 'absolute',
-                        borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-                        insetInline: '-4px',
-                        ...(compact
-                            ? {
-                                top: '2px',
-                                bottom: '2px',
-                            }
-                            : {
-                                top: '6px',
-                                bottom: '6px',
-                            }),
-                    },
-                }, hoverMediaQuery({
-                    '&::before': {
-                        transition: getTransition('background-color'),
+            },
+            details: {
+                all: 'unset',
+                font: `${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`, // enables font inheritance for slotted content
+                color: colorPrimary, // enables color inheritance for slotted content
+                display: 'grid',
+                gridTemplate: `repeat(2, auto) / ${hasSummaryBefore ? 'auto ' : ''}${isIconAlignedStart ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr) auto'}${hasSummaryAfter ? ' auto ' : ''}`,
+                columnGap: gap,
+                alignItems: 'center',
+                padding: `var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock}) var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
+                background: backgroundMap[background],
+                ...(background === 'frosted' && frostedGlassStyle),
+                borderRadius: `var(${legacyRadiusSmall}, ${radiusXl})`,
+                ...forcedColorsMediaQuery({
+                    outline: '1px solid CanvasText',
+                    outlineOffset: background === 'none' ? '0' : '-1px',
+                    padding: `var(${cssVarPaddingBlock}, ${paddingBlock}) var(${cssVarPaddingInline$1}, ${paddingInline})`,
+                }),
+                '&::details-content': addImportantToEachRule({
+                    display: 'contents', // allows <details> to be used as grid layout
+                    contentVisibility: 'visible', // we need to overwrite it to support cross-browser animation, we take care of content-visibility on our own to be a11y compliant
+                }),
+                '& > div': {
+                    gridArea: '2/1/auto/-1',
+                    zIndex: 0, // ensures stacking to be below the summary section
+                    display: 'grid',
+                    opacity: 0,
+                    marginTop: '0px',
+                    gridTemplateRows: '0fr',
+                    visibility: 'hidden', // since `::details-content` and `allow-discrete` transition doesn't work in Safari we need to take care ourselves for visibility state to be a11y compliant
+                    // as soon as all browsers are supporting `allow-discrete` reliable, visibility transition shouldn't be necessary anymore
+                    transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}), ${getTransition('grid-template-rows', duration, easing)}, ${getTransition('margin-top', duration, easing)}, ${getTransition('opacity', duration, easing)}`,
+                },
+                '&[open]': {
+                    '& > div': {
+                        opacity: 1,
+                        marginTop,
+                        // as soon as all browsers support calc-size(auto) to be transitionable, we can remove the grid-template-rows rule and animation
+                        gridTemplateRows: '1fr',
+                        visibility: 'inherit', // since `::details-content` and `allow-discrete` transition doesn't work in Safari we need to take care ourselves for visibility state to be a11y compliant
+                        // as soon as all browsers are supporting `allow-discrete` reliable, visibility transition shouldn't be necessary anymore
+                        transition: `visibility 0s linear 0s, ${getTransition('grid-template-rows', duration, easing)}, ${getTransition('margin-top', duration, easing)}, ${getTransition('opacity', duration, easing)}`,
                     },
+                },
+            },
+            summary: {
+                all: 'unset',
+                gridArea: '1/1/auto/-1',
+                zIndex: 1, // ensures stacking to be above the details content
+                display: 'grid',
+                gridTemplateColumns: 'subgrid',
+                alignItems: 'center',
+                cursor: 'pointer',
+                padding: `var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock}) var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline})`,
+                margin: `calc(-1 * var(${cssVarPaddingBlock}, ${background === 'none' ? '0' : paddingBlock})) calc(-1 * var(${cssVarPaddingInline$1}, ${background === 'none' ? '0' : paddingInline}))`,
+                ...(isSticky &&
+                    (background === 'canvas' || background === 'surface') && {
+                    position: 'sticky',
+                    top: `var(${cssVarSummaryTop}, var(${cssVarSummaryTopDeprecated}, 0px))`,
+                    background: `linear-gradient(180deg,${backgroundMap[background]} 0%,${backgroundMap[background]} 90%,transparent 100%)`,
+                    borderRadius: `var(${legacyRadiusSmall}, ${radiusXl})`,
+                }),
+                '&:focus-visible::before': getFocusBaseStyles(),
+                ...hoverMediaQuery({
                     '&:hover::before': {
-                        ...frostedGlassStyle,
-                        background: colorFrostedSoft,
+                        background: colorFrosted,
                     },
-                })),
-                '&:focus-visible::before': getFocusBaseStyles(),
-            },
-        },
-        heading: {
-            margin: 0,
-            ...(sticky && {
-                position: 'sticky',
-                top: `var(${cssVariablePositionStickyTop}, ${positionStickyTopFallback})`,
-                zIndex: 1, // to be on top of the collapsible
-                background: colorCanvas,
-            }),
-        },
-        'icon-container': {
-            height: fontLineHeight,
-            width: fontLineHeight,
-            font: `inherit ${fontFamily}`, // needed for correct calculations based on ex-unit
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        icon: {
-            transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
-            transition: getTransition('transform'),
-        },
-        collapsible: {
-            color: colorPrimary, // enables color inheritance for slotted content
-            display: 'grid',
-            ...(sticky && {
-                position: 'relative',
-                zIndex: 0, // to be below the heading
-            }),
-            ...(open
-                ? {
-                    gridTemplateRows: '1fr',
-                    visibility: 'inherit',
-                    transition: getTransition('grid-template-rows'),
-                    paddingBottom: compact ? spacingStaticSmall : '24px',
-                }
-                : {
-                    gridTemplateRows: '0fr',
-                    visibility: 'hidden',
-                    transition: `${getTransition('grid-template-rows')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationShort})`,
                 }),
-            '& div': {
-                overflow: open ? 'visible' : 'hidden',
-                // Fix overflow issues for overlapping content (e.g. select dropdown)
-                animation: open ? `$overflow var(${cssVariableTransitionDuration},${motionDurationShort})` : 'none',
-                // Necessary to make focus outlines fully visible
-                padding: '4px',
-                margin: '-4px',
-                // Fix scrollbar issues when slotted content includes .sr-only styles (see issue #3042)
-                transform: 'translate3d(0,0,0)',
-                zIndex: 1,
-            },
-        },
-        '@keyframes overflow': {
-            from: { overflow: 'hidden' },
-            to: { overflow: 'hidden' },
+                '&::before': {
+                    gridArea: `1/${isIconAlignedStart ? '1' : hasSummaryBefore && hasSummaryAfter ? '4' : hasSummaryBefore || hasSummaryAfter ? '3' : '2'}`,
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: radiusFull,
+                    background: 'transparent',
+                    transition: getTransition('background-color'),
+                    ...forcedColorsMediaQuery({
+                        backgroundColor: 'LinkText',
+                    }),
+                },
+                '&::after': {
+                    gridArea: `1/${isIconAlignedStart ? '1' : hasSummaryBefore && hasSummaryAfter ? '4' : hasSummaryBefore || hasSummaryAfter ? '3' : '2'}`,
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1rem',
+                    height: '1rem',
+                    pointerEvents: 'none',
+                    WebkitMask: `${icon} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${icon} center/contain no-repeat`,
+                    background: colorPrimary,
+                    transform: 'rotate3d(0)',
+                    transition: getTransition('transform', duration, easing),
+                    ...forcedColorsMediaQuery({
+                        backgroundColor: 'LinkText',
+                    }),
+                    'details[open] &': {
+                        transform: 'rotate3d(0,0,1,180deg)',
+                    },
+                },
+            },
         },
     });
 };
@@ -4266,8 +4352,8 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
                     left: hideLabelValue ? offsetVertical : offsetHorizontal,
+                    borderRadius: `var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : radiusLg})`,
                 })),
-                borderRadius: `var(${legacyRadiusSmall}, ${radiusLg})`,
                 transition: getTransition('background-color'),
                 ...(active && {
                     ...frostedGlassStyle,
@@ -4537,11 +4623,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 verticalAlign: 'top',
                 ...mergeDeep(buildResponsiveStyles(isCompact, (compactValue) => ({
                     [`${cssVariableInternalScaling}`]: compactValue ? 0.64285714 : 1,
-                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${compactValue ? radiusLg : radiusXl})`),
+                    '--p-internal-border-radius': compactValue ? radiusLg : radiusXl,
                 })), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                    ...(hideLabelValue && {
-                        borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${radiusFull})`),
-                    }),
+                    borderRadius: addImportantToRule(`var(${legacyRadiusSmall}, ${hideLabelValue ? radiusFull : 'var(--p-internal-border-radius)'})`),
                 }))),
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
@@ -4568,6 +4652,16 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
                 gap: hideLabelValue ? 0 : gap,
             })),
+            ...forcedColorsMediaQuery({
+                forcedColorAdjust: 'none',
+                background: 'Canvas',
+                color: 'LinkText',
+                boxShadow: 'inset 0 0 0 2px LinkText',
+                '&:is(button)': {
+                    boxShadow: 'inset 0 0 0 2px ButtonBorder',
+                    color: 'ButtonText',
+                },
+            }),
             ...(!hasSlottedAnchor && {
                 '&:focus-visible': getFocusBaseStyles(),
             }),
@@ -4575,6 +4669,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 hoverMediaQuery({
                     '&:hover': {
                         backgroundColor: backgroundColorHover,
+                        ...forcedColorsMediaQuery({
+                            background: 'Canvas',
+                        }),
                     },
                 })),
         },
@@ -4602,9 +4699,9 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         root: {
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
-                backgroundColor: colorFrostedSoft,
-                borderColor: colorFrostedSoft,
-                color: colorContrastLow,
+            }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
             }),
         },
         ...(isLoading && {
@@ -4616,6 +4713,7 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
+                color: 'inherit',
             },
         }),
         label: {
@@ -4623,12 +4721,18 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
             ...(isLoading && {
                 opacity: 0, // use opacity for smooth transition between states
             }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
         },
         icon: {
             transition: getTransition('opacity'),
             ...(isLoading && {
                 opacity: 0, // use opacity for smooth transition between states
             }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
         },
         // .loading
         ...getFunctionalComponentLoadingMessageStyles(),
@@ -5324,6 +5428,10 @@ const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
         background: `var(${cssVarCheckboxBackgroundColor},${formStateBackgroundColor})`,
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
         border: `${checkboxBorderWidth} solid var(${cssVarCheckboxBorderColor},${formStateBorderColor})`,
+        ...(disabledOrLoading &&
+            forcedColorsMediaQuery({
+                borderColor: 'GrayText',
+            })),
         borderRadius: `var(${legacyRadiusSmall}, ${isCompact ? radiusMd : radiusLg})`,
         ...(disabledOrLoading && {
             pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
@@ -5343,10 +5451,6 @@ const getCheckboxBaseStyles = (isDisabled, isLoading, isCompact, state) => {
     };
 };
 
-const getInlineSVGBackgroundImage = (path) => {
-    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
-};
-
 const 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, state) => {
     const { formStateBorderColor } = getThemedFormStateColors(state);
@@ -5355,6 +5459,7 @@ const getCheckboxCheckedBaseStyles = (isLoading, state) => {
     }
     return {
         '&::before': {
+            forcedColorAdjust: 'none',
             WebkitMask: `${checkedIcon$1} center/contain no-repeat`, // necessary for Sogou browser support :-)
             mask: `${checkedIcon$1} center/contain no-repeat`,
             backgroundColor: `var(${cssVarCheckboxIconColor}, ${state === 'none' ? colorPrimary : formStateBorderColor})`,
@@ -5370,6 +5475,7 @@ const getCheckboxIndeterminateBaseStyles = (isLoading, state) => {
     }
     return {
         '&::before': {
+            forcedColorAdjust: 'none',
             WebkitMask: `${indeterminateIcon} center/contain no-repeat`,
             mask: `${indeterminateIcon} center/contain no-repeat`,
             backgroundColor: state === 'none' ? colorPrimary : formStateBorderColor,
@@ -5385,19 +5491,21 @@ const getFunctionalComponentRequiredStyles = () => {
     };
 };
 
-const getFunctionalComponentLabelAfterStyles = (isDisabledOrLoading, additionalIsDisabledJssStyle) => {
+const getFunctionalComponentLabelAfterStyles = () => {
     return {
         'slot[name="label-after"]': {
             display: 'inline-block',
             verticalAlign: 'top',
-            ...(isDisabledOrLoading && {
-                pointerEvents: 'none',
-                ...additionalIsDisabledJssStyle,
-            }),
+            '&::slotted(*)': {
+                ...addImportantToEachRule({
+                    marginInlineStart: spacingStaticXs$1,
+                })
+            },
         },
     };
 };
-const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
+const getFunctionalComponentLabelStyles = (isDisabled, isLoading, hideLabel, additionalDefaultJssStyle, additionalLabelWrapperJssStyle, additionalIsShownJssStyle) => {
+    const isDisabledOrLoading = isDisabled || isLoading;
     return {
         'label-wrapper': {
             ...buildResponsiveStyles(hideLabel, (isHidden) => ({
@@ -5409,10 +5517,13 @@ const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, addit
         label: {
             ...proseTextSmStyle,
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+            color: colorPrimary,
             ...(isDisabledOrLoading && {
                 pointerEvents: 'none', // prevents label interaction when disabled or loading
             }),
-            color: colorPrimary,
+            ...(isDisabled && {
+                ...getDisabledBaseStyles(),
+            }),
             transition: getTransition('color'), // for smooth transitions between e.g. disabled state
             display: 'inline',
             '&:empty': {
@@ -5472,11 +5583,10 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
                 display: 'block',
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
                 [`${cssVarInternalCheckboxScaling}`]: isCompact ? 0.64285714 : 1,
             },
-            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 ...getCheckboxBaseStyles(isDisabled, isLoading, isCompact, state),
@@ -5507,6 +5617,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             alignSelf: 'flex-start',
             minHeight: fontLineHeight, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+            ...(isDisabled && getDisabledBaseStyles()),
         },
         ...(isLoading && {
             spinner: {
@@ -5520,7 +5631,7 @@ const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, isCompact)
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, {
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel, {
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
         }, null, {
             paddingTop: labelPaddingTop,
@@ -5542,7 +5653,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
-const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle) => {
+const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel, state, isCompact, readOnly, additionalInputJssStyle, additionalHostJssStyle) => {
     const wrapperBorderWidth = borderWidthThin;
     const wrapperHeight = `calc(var(${cssVarInternalInputBaseScaling}) * 3.5rem)`;
     const wrapperPaddingInline = `calc(22.4px * (var(${cssVarInternalInputBaseScaling}) - 0.64285714) + 8px)`;
@@ -5559,14 +5670,21 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                     [`${cssVarButtonPurePadding}`]: buttonPadding,
                     [`${cssVarButtonPureMargin}`]: buttonMargin,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
+                // Alignment and direction of placeholder is set always to the right in RTL mode, because it is expected to have rtl language as placeholder value
+                '&(:dir(rtl)) input::placeholder': {
+                    direction: 'rtl',
+                    textAlign: 'end',
+                },
+                ...additionalHostJssStyle,
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
+                display: 'flex',
                 flex: 1,
+                alignItems: 'center',
                 width: 'max(100%, 2ch)', // show at least 2 characters in very narrow containers
                 height: '100%',
                 font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
@@ -5596,9 +5714,23 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
                 background: colorFrosted,
                 color: colorContrastMedium,
             }),
-            '&:focus-within': {
+            '&:not(:has(input:disabled)):focus-within': {
                 borderColor: formStateBorderHoverColor,
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid Highlight',
+                    outlineOffset: '2px',
+                }),
             },
+            ...(isDisabled && {
+                ...mergeDeep({ ...getDisabledBaseStyles() }, {
+                    ...forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    }),
+                }),
+                '& > *': {
+                    ...getDisabledBaseStyles(),
+                },
+            }),
             ...(!isDisabled &&
                 !readOnly &&
                 !isLoading &&
@@ -5616,7 +5748,7 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -5648,6 +5780,7 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, isCompact,
         font: textSmallStyle.font,
         color: `var(${cssVarTextColor}, ${colorPrimary})`,
         cursor: isDisabled ? 'not-allowed' : 'pointer',
+        ...(isDisabled && getDisabledBaseStyles()),
         transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
         ...(!isDisabled && {
             ...hoverMediaQuery({
@@ -5717,12 +5850,20 @@ const getOptionJssStyle = (componentName, cssVarScalingName) => {
         transition: `${getTransition('background-color')}, ${getTransition('color')}`,
         '&--highlighted': {
             background: colorFrosted,
+            ...forcedColorsMediaQuery({
+                forcedColorAdjust: 'none',
+                outline: '2px solid Highlight',
+                outlineOffset: '-2px',
+            }),
         },
         '&--highlighted, &--selected': {
             color: colorPrimary,
         },
         '&--disabled': {
             cursor: 'not-allowed',
+            ...forcedColorsMediaQuery({
+                color: 'GrayText',
+            }),
         },
         '&--hidden': {
             display: 'none',
@@ -6836,10 +6977,17 @@ const getComponentCss$V = (isOpen, background, backdrop, position, hasHeader, ha
                 ? {
                     borderStartEndRadius: dialogBorderRadius,
                     borderEndEndRadius: dialogBorderRadius,
+                    ...forcedColorsMediaQuery({
+                        borderInlineEnd: '2px solid CanvasText',
+                    }),
                 }
                 : {
                     borderStartStartRadius: dialogBorderRadius,
                     borderEndStartRadius: dialogBorderRadius,
+                    // TODO: Fix needs to be implemented for Fullscreen (which is not available as prop for Flyout yet)
+                    ...forcedColorsMediaQuery({
+                        borderInlineStart: '2px solid CanvasText',
+                    }),
                 }),
             ...(isFooterFixed && {
                 gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
@@ -6950,6 +7098,9 @@ const getComponentCss$T = (name, source, color, size) => {
                     mask: `url("${buildIconUrl(source || name)}") center/contain no-repeat`,
                     aspectRatio: '1/1',
                     background: 'currentcolor', // necessary for proper color inheritance
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
                     ...(isFlippableIcon(name, source) && {
                         '&(:dir(rtl))': {
                             transform: 'scaleX(-1)',
@@ -6997,6 +7148,10 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose) => {
             // 4 columns are for icon, content, optional action button and optional close button
             gridTemplateColumns: `auto minmax(auto, 1fr)${hasAction ? ' auto' : ''}${hasClose ? ' auto' : ''}`,
         },
+        ...forcedColorsMediaQuery({
+            outline: '2px solid CanvasText',
+            outlineOffset: '-2px',
+        }),
     };
 };
 const getNotificationIconJssStyle = () => ({
@@ -7097,7 +7252,15 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the email input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because email addresses are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
 // CSS Variables defined in base input
@@ -7217,7 +7380,15 @@ const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$L = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the tel input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because tel values are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
 const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
@@ -7304,7 +7475,15 @@ const getComponentCss$J = (disabled, loading, hideLabel, state, compact, readOnl
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$I = (disabled, loading, hideLabel, state, compact, readOnly) => {
-    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly));
+    return getCss(getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, null, 
+    // Overwrites direction to ltr for rtl languages to prevent issues with the url input, e.g. cursor jumping to the
+    // end of the input when typing in the middle of the text. This is necessary because url addresses are assumed
+    // to be always written in ltr direction and the input needs to accommodate that, even in rtl contexts.
+    {
+        '&(:dir(rtl)) .wrapper, &(:dir(rtl)) input:placeholder-shown': {
+            direction: 'ltr',
+        },
+    }));
 };
 
 // CSS Variables defined in base input
@@ -7754,6 +7933,10 @@ const getComponentCss$C = (isOpen, background, backdrop, fullscreen, hasDismissB
                     placeSelf: 'center',
                     margin: `var(${cssVariableSpacingTop},clamp(16px, 10vh, 192px)) ${gridExtendedOffsetBase} var(${cssVariableSpacingBottom},clamp(16px, 10vh, 192px))`, // horizontal margin is needed to ensure modal is placed on "Porsche Grid" when slotted content is wider than the viewport width
                     borderRadius: dialogBorderRadius,
+                    ...forcedColorsMediaQuery({
+                        outline: '2px solid CanvasText',
+                        outlineOffset: '-2px',
+                    }),
                 }),
         },
         ...(hasDismissButton && {
@@ -7794,6 +7977,9 @@ const getComponentCss$B = (model, safeZone, size, color) => {
                     mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
                     aspectRatio: `${width} / ${safeZone ? 36 : height}`, // 36px is the max-height for SVG model signature creation
                     background: 'currentcolor', // necessary for proper color inheritance
+                    ...forcedColorsMediaQuery({
+                        background: 'CanvasText',
+                    }),
                     ...hostHiddenStyles,
                 }),
             },
@@ -7840,7 +8026,9 @@ const getComponentCss$A = (isDisabled, selected) => {
             },
         },
         option: getOptionJssStyle('multi-select-option', cssVarInternalMultiSelectOptionScaling),
-        checkbox: mergeDeep(getCheckboxBaseStyles(isDisabled, false, true, 'none'), selected ? getCheckboxCheckedBaseStyles(false, 'none') : {}),
+        checkbox: mergeDeep(getCheckboxBaseStyles(isDisabled, false, true, 'none'), selected ? getCheckboxCheckedBaseStyles(false, 'none') : {}, {
+            flexShrink: 0,
+        }),
     });
 };
 
@@ -7854,7 +8042,6 @@ const getComponentCss$z = (isDisabled) => {
         '@global': {
             ':host': addImportantToEachRule({
                 ...hostHiddenStyles,
-                ...(isDisabled && getDisabledBaseStyles()),
             }),
             '::slotted(*)': {
                 '--p-internal-select-option-padding-left': paddingSlottedInlineStart,
@@ -7870,6 +8057,7 @@ const getComponentCss$z = (isDisabled) => {
                 paddingInline,
                 font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
                 color: colorPrimary,
+                ...(isDisabled && getDisabledBaseStyles()),
             },
         },
     });
@@ -7892,10 +8080,9 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
                     [`${cssVarInternalMultiSelectOptionScaling}`]: isCompact ? 0.64285714 : 1,
                     [`${cssVarInternalOptgroupScaling}`]: isCompact ? 0.64285714 : 1,
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, isCompact, cssVarInternalMultiSelectScaling),
@@ -7917,7 +8104,7 @@ const getComponentCss$y = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         // .no-results / .sr-only
         ...getFunctionalComponentNoResultsOptionStyles('multi-select-option', cssVarInternalMultiSelectScaling),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });
@@ -8061,10 +8248,9 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 [`${cssVarInternalPinCodeScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -8084,7 +8270,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
                 textOverflow: 'ellipsis',
                 cursor: isDisabled || isLoading ? 'not-allowed' : 'text',
                 textAlign: 'center',
-                ...(isLoading && getDisabledBaseStyles()),
+                ...((isDisabled || isLoading) && getDisabledBaseStyles()),
                 '&:focus-visible': {
                     borderColor: formStateBorderHoverColor,
                 },
@@ -8121,7 +8307,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -8203,6 +8389,9 @@ const getComponentCss$v = () => {
             height: '12px',
             clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
             background: colorCanvas,
+            ...forcedColorsMediaQuery({
+                background: 'CanvasText',
+            }),
         },
         content: {
             maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
@@ -8214,6 +8403,10 @@ const getComponentCss$v = () => {
             ...textSmallStyle,
             background: colorCanvas,
             color: colorPrimary,
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
         },
     });
 };
@@ -8239,10 +8432,9 @@ const getComponentCss$u = (disabled, loading, state) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
-                    ...(disabledOrLoading && getDisabledBaseStyles()),
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -8258,6 +8450,9 @@ const getComponentCss$u = (disabled, loading, state) => {
                 borderRadius: radiusFull,
                 ...(disabledOrLoading && {
                     pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+                    ...forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    }),
                 }),
                 '&:focus-visible': getFocusBaseStyles(),
                 ...(!disabledOrLoading &&
@@ -8272,6 +8467,7 @@ const getComponentCss$u = (disabled, loading, state) => {
                     gridArea: '1/1',
                 },
                 '&:checked::before': {
+                    forcedColorAdjust: 'none',
                     WebkitMask: `${checkedIcon} center/contain no-repeat`, // necessary for Sogou browser support :-)
                     mask: `${checkedIcon} center/contain no-repeat`,
                     backgroundColor: state === 'none' ? colorPrimary : formStateBorderColor,
@@ -8297,6 +8493,7 @@ const getComponentCss$u = (disabled, loading, state) => {
             alignSelf: 'flex-start',
             minHeight: fontLineHeight, // necessary for compact mode
             cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
+            ...(disabled && getDisabledBaseStyles()),
         },
         ...(loading && {
             spinner: {
@@ -8310,7 +8507,7 @@ const getComponentCss$u = (disabled, loading, state) => {
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled || loading, false, null, {
+        ...getFunctionalComponentLabelStyles(disabled, loading, false, null, {
             paddingTop: labelPaddingTop,
             paddingInlineStart: labelPaddingInlineStart,
         }),
@@ -8350,7 +8547,7 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
                 [`${cssVarInternalRadioGroupScaling}`]: isCompact ? 0.64285714 : 1,
                 [`${cssVarInternalRadioGroupOptionScaling}`]: isCompact ? 0.64285714 : 1,
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled, getDisabledBaseStyles()),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...(isLoading && {
                 '::slotted(*:not([slot]))': {
                     ...addImportantToEachRule(getDisabledBaseStyles()),
@@ -8384,7 +8581,7 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, {
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel, {
             ...(isDisabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
@@ -8498,11 +8695,6 @@ const getComponentCss$s = (isNextHidden, isPrevHidden, alignScrollIndicator, has
             ...dismissButtonJssStyle,
             ...dropShadowLowStyle,
         },
-        icon: {
-            '&:dir(rtl)': {
-                transform: 'scaleX(-1)',
-            },
-        },
     });
 };
 
@@ -8556,6 +8748,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 ...(isDisabled
                     ? {
                         cursor: 'not-allowed',
+                        ...forcedColorsMediaQuery({
+                            color: 'GrayText',
+                            borderColor: 'GrayText',
+                        }),
                     }
                     : {
                         cursor: 'pointer',
@@ -8575,6 +8771,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
                 color: colorContrastMedium,
+                ...(isDisabled &&
+                    forcedColorsMediaQuery({
+                        color: 'GrayText',
+                    })),
             },
         },
         ...(hasIcon && {
@@ -8596,12 +8796,8 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
                     ...hostHiddenStyles,
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(disabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
-            ...getFunctionalComponentLabelAfterStyles(disabled, getDisabledBaseStyles()),
-            ...(disabled && {
-                '::slotted(*:not([slot]))': addImportantToEachRule(getDisabledBaseStyles()),
-            }),
             'slot:not([name])': {
                 display: 'grid',
                 gridAutoRows: '1fr', // for equal height
@@ -8619,7 +8815,7 @@ const getComponentCss$q = (minWidth, maxWidth, columns, disabled, hideLabel, sta
             gap: spacingStaticXSmall,
         },
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, {
+        ...getFunctionalComponentLabelStyles(disabled, false, hideLabel, {
             ...(disabled ? getDisabledBaseStyles() : { cursor: 'inherit' }), // the label is not clickable
         }),
         // .message
@@ -8674,9 +8870,8 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
                     [`${cssVarInternalOptgroupScaling}`]: isCompact ? 0.64285714 : 1,
                     ...hostHiddenStyles,
                 }),
-                ...(isDisabled && getDisabledBaseStyles()),
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             button: {
                 ...getButtonJssStyle('select', isOpen, isDisabled, state, isCompact, cssVarInternalSelectScaling),
@@ -8699,7 +8894,7 @@ const getComponentCss$o = (isOpen, isDisabled, hideLabel, state, isCompact) => {
         // .no-results / .sr-only
         ...getFunctionalComponentNoResultsOptionStyles('select-option', cssVarInternalSelectScaling),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });
@@ -8751,6 +8946,9 @@ const getComponentCss$n = (isOpen, background, hasDismissButton) => {
             marginBlockStart: spacingFluidLarge, // ensures minimal space at the top to visualize paper sheet like border top radius in case sheet becomes scrollable
             borderTopLeftRadius: dialogBorderRadius,
             borderTopRightRadius: dialogBorderRadius,
+            ...forcedColorsMediaQuery({
+                borderTop: '2px solid CanvasText',
+            }),
         },
         ...(hasDismissButton && {
             dismiss: getDialogDismissButtonJssStyle(),
@@ -8796,6 +8994,7 @@ const getComponentCss$m = (size) => {
             },
             ':host': {
                 display: 'inline-flex',
+                color: colorPrimary,
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
                     ...hostHiddenStyles,
@@ -8812,7 +9011,7 @@ const getComponentCss$m = (size) => {
                 },
                 '&:last-child': {
                     animation: `$dash ${animationDuration} steps(50) infinite`,
-                    stroke: colorPrimary,
+                    stroke: 'currentcolor', // necessary for proper color inheritance
                     strokeDasharray: strokeDasharray
                         ,
                     strokeLinecap: 'round',
@@ -8947,6 +9146,7 @@ const getColors$1 = (checked, loading) => {
  */
 const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisabled, isLoading, isCompact) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, toggleBackgroundColor, textColor } = getColors$1(isChecked, isLoading);
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
     const gap = `calc(11.2px * (var(${cssVarInternalSwitchScaling}) - 0.64285714) + 4px)`;
     const buttonBorderWidth = borderWidthThin;
     const buttonWidth = `calc(var(${cssVarInternalSwitchScaling}) * 3rem)`;
@@ -8992,9 +9192,13 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 border: `${buttonBorderWidth} solid ${buttonBorderColor}`,
                 borderRadius: radiusFull,
                 background: buttonBackgroundColor,
-                cursor: isDisabledOrLoading(isDisabled, isLoading) ? 'not-allowed' : 'pointer',
+                cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                ...(!isDisabledOrLoading(isDisabled, isLoading) &&
+                ...(disabledOrLoading &&
+                    forcedColorsMediaQuery({
+                        borderColor: 'GrayText',
+                    })),
+                ...(!disabledOrLoading &&
                     hoverMediaQuery({
                         '&:hover': {
                             borderColor: buttonBorderColorHover,
@@ -9013,8 +9217,12 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
                 ...textSmallStyle,
                 minWidth: 0, // prevents flex child to overflow max available parent size
                 minHeight: 0, // prevents flex child to overflow max available parent size
-                cursor: isDisabledOrLoading(isDisabled, isLoading) ? 'not-allowed' : 'pointer',
+                cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 color: textColor,
+                ...(disabledOrLoading &&
+                    forcedColorsMediaQuery({
+                        color: 'GrayText',
+                    })),
                 ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                     order: alignLabelValue === 'start' ? -1 : 0,
                 })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
@@ -9023,6 +9231,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
             },
         },
         toggle: {
+            forcedColorAdjust: 'none',
             display: 'flex',
             placeItems: 'center',
             placeContent: 'center',
@@ -9258,6 +9467,9 @@ const barJssStyle = {
     height: '2px',
     left: 0,
     background: colorPrimary,
+    ...forcedColorsMediaQuery({
+        background: 'ActiveBorder',
+    }),
 };
 const getComponentCss$b = (size, weight) => {
     return getCss({
@@ -9425,6 +9637,10 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                         backgroundColor: colorFrosted,
                     },
                 }),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                }),
                 '&:focus-visible': getFocusBaseStyles(),
             },
         },
@@ -9495,7 +9711,7 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                 display: 'flex',
                 gap: '2px',
                 padding: compact ? '1px 6px' : `${spacingStaticXSmall} 9px`,
-                borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
+                borderRadius: `var(${legacyRadiusSmall}, calc(${compact ? '1px' : spacingStaticXSmall} + (${fontLineHeight} / 2)))`, // ensures pill shape has a maximum border radius to support multiline.
                 font: textXSmallStyle.font,
                 ...frostedGlassStyle,
                 color: textColor,
@@ -9507,6 +9723,11 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                             background: backgroundHoverColor,
                         },
                     })),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                    backgroundColor: 'Canvas',
+                }),
             },
             '::slotted': addImportantToEachRule({
                 '&(a),&(button)': {
@@ -9678,10 +9899,9 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
                 [`${cssVarInternalTextareaScaling}`]: isCompact ? 0.64285714 : 1,
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
-                    ...(isDisabled && getDisabledBaseStyles()),
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(isDisabled),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             textarea: {
                 all: 'unset',
@@ -9728,6 +9948,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         wrapper: {
             display: 'grid',
+            ...(isDisabled && getDisabledBaseStyles()),
         },
         ...(hasCounter && {
             counter: {
@@ -9740,7 +9961,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
             'sr-only': getHiddenTextJssStyle(),
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });