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

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

@@ -1,9 +1,9 @@
-const blurFrosted = 'blur(32px)';
+const blurFrosted$1 = 'blur(32px)';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use backdropFilter: blurFrosted instead  */
 const frostedGlassStyle = {
-    WebkitBackdropFilter: blurFrosted,
-    backdropFilter: blurFrosted,
+    WebkitBackdropFilter: blurFrosted$1,
+    backdropFilter: blurFrosted$1,
 };
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use 2px instead. */
@@ -12,15 +12,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)';
 
@@ -33,15 +33,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)';
 
@@ -57,10 +57,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;
@@ -76,7 +76,7 @@ const typescale2Xs = '.75rem';
 const fontSizeTextXXSmall = typescale2Xs;
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use typescale variables instead. */
-const fontSizeText = {
+const fontSizeText$1 = {
     xxSmall: fontSizeTextXXSmall,
     xSmall: fontSizeTextXSmall,
     small: fontSizeTextSmall,
@@ -96,10 +96,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;
 
@@ -251,15 +251,15 @@ const durationLg = '.6s';
 /** @deprecated since v4.0.0, will be removed with next major release. Use durationLg instead. */
 const motionDurationLong = durationLg;
 
-const durationMd = '.4s';
+const durationMd$1 = '.4s';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use durationMd instead. */
-const motionDurationModerate = durationMd;
+const motionDurationModerate = durationMd$1;
 
-const durationSm = '.25s';
+const durationSm$1 = '.25s';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use durationSm instead. */
-const motionDurationShort = durationSm;
+const motionDurationShort = durationSm$1;
 
 const durationXl = '1.2s';
 
@@ -288,13 +288,6 @@ const dropShadowHighStyle = {
     boxShadow: shadowLg,
 };
 
-const shadowSm = '0px 3px 8px rgba(0,0,0,.16)';
-
-/** @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. */
@@ -310,22 +303,22 @@ const spacingFluidXs = 'clamp(4px, 0.25vw + 3px, 8px)';
 /** @deprecated since v4.0.0, will be removed with next major release. Use spacingFluidXs instead. */
 const spacingFluidXSmall = spacingFluidXs;
 
-const spacingStaticMd = '16px';
+const spacingStaticMd$1 = '16px';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticMd instead. */
-const spacingStaticMedium = spacingStaticMd;
+const spacingStaticMedium = spacingStaticMd$1;
 
-const spacingStaticSm$1 = '8px';
+const spacingStaticSm$2 = '8px';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticSm instead. */
-const spacingStaticSmall = spacingStaticSm$1;
+const spacingStaticSmall = spacingStaticSm$2;
 
-const spacingStaticXs$2 = '4px';
+const spacingStaticXs$3 = '4px';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use spacingStaticXs instead. */
-const spacingStaticXSmall = spacingStaticXs$2;
+const spacingStaticXSmall = spacingStaticXs$3;
 
-const spacingStaticXs$1 = spacingStaticXs$2;
+const spacingStaticXs$2 = spacingStaticXs$3;
 
 const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
@@ -386,12 +379,14 @@ const textMediumStyle = {
 };
 
 const proseTextSmStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `normal normal ${fontWeightNormal} ${typescaleSm$1} / ${leadingNormal$1} ${fontPorscheNext$1}`,
     ...fontHyphenationStyle,
 };
 
 const alphaDisabled = 0.4;
 
+const blurFrosted = 'var(--p-blur-frosted)';
+
 const legacyRadiusLarge = '--_p-legacy-radius-large';
 
 const legacyRadiusMedium = '--_p-legacy-radius-medium';
@@ -464,6 +459,30 @@ 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 durationMd = 'var(--p-duration-md)';
+
+const durationSm = 'var(--p-duration-sm)';
+
+const spacingStaticMd = 'var(--p-spacing-static-md)';
+
+const spacingStaticSm$1 = 'var(--p-spacing-static-sm)';
+
+const spacingStaticXs$1 = 'var(--p-spacing-static-xs)';
+
+const forcedColorsMediaQuery = (style) => {
+    return { '@media (forced-colors: active)': style };
+};
+
 const motionDurationMap = {
     short: motionDurationShort,
     moderate: motionDurationModerate,
@@ -497,15 +516,23 @@ const addImportantToEachRule = (input) => {
                 typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
                 result), {});
 };
-const getFocusBaseStyles = () => {
+const getFocusBaseStyles = (offset = 2) => {
     return {
         outline: `${borderWidthBase} solid ${colorFocus}`,
-        outlineOffset: '2px',
+        outlineOffset: `${offset}px`,
+        ...forcedColorsMediaQuery({
+            outlineColor: 'Highlight',
+        }),
     };
 };
-const getDisabledBaseStyles = () => {
+const getDisabledBaseStyles = (addForcedColorsDisabledStyles) => {
     return {
         opacity: alphaDisabled,
+        ...forcedColorsMediaQuery({
+            opacity: 1,
+            color: 'GrayText',
+            ...addForcedColorsDisabledStyles,
+        }),
     };
 };
 /**
@@ -3743,10 +3770,6 @@ const isDisabledOrLoading = (disabled, loading) => {
     return disabled || loading;
 };
 
-const hasWindow = typeof window !== 'undefined';
-
-const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
-
 const parseJSON = (prop) => {
     if (typeof prop === 'string') {
         try {
@@ -3834,6 +3857,8 @@ const mergeDeep = (...objects) => {
     }
 })(); // determine it once
 
+const hasWindow = typeof window !== 'undefined';
+
 const attributeMutationMap = new Map();
 hasWindow &&
     new MutationObserver((mutations) => {
@@ -3880,7 +3905,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.2"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);
@@ -3989,130 +4014,192 @@ 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 iconMarker = 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$1 = {
+    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$1[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$1[background]} 0%,${backgroundMap$1[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'),
+                },
+                '&::after': {
+                    gridArea: `1/${isIconAlignedStart ? '1' : hasSummaryBefore && hasSummaryAfter ? '4' : hasSummaryBefore || hasSummaryAfter ? '3' : '2'}`,
+                    placeSelf: 'center',
+                    content: '""',
+                    width: '1rem',
+                    height: '1rem',
+                    pointerEvents: 'none',
+                    WebkitMask: `${iconMarker} center/contain no-repeat`, // necessary for Sogou browser support :-)
+                    mask: `${iconMarker} 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)',
+                    },
+                },
+            },
         },
     });
 };
@@ -4256,6 +4343,12 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             })), buildResponsiveStyles(size, (sizeValue) => ({
                 fontSize: getFontSizeText(sizeValue),
             }))),
+            ...forcedColorsMediaQuery({
+                color: 'LinkText',
+                '&:is(button)': {
+                    color: 'ButtonText',
+                },
+            }),
             '&::before': {
                 content: '""',
                 position: 'absolute', // mobile Safari -> prevent lagging active state
@@ -4264,8 +4357,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,
@@ -4535,11 +4628,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,
@@ -4566,6 +4657,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(),
             }),
@@ -4573,6 +4674,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 hoverMediaQuery({
                     '&:hover': {
                         backgroundColor: backgroundColorHover,
+                        ...forcedColorsMediaQuery({
+                            background: 'Canvas',
+                        }),
                     },
                 })),
         },
@@ -4600,9 +4704,13 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
         root: {
             ...(disabledOrLoading && {
                 cursor: 'not-allowed',
-                backgroundColor: colorFrostedSoft,
-                borderColor: colorFrostedSoft,
-                color: colorContrastLow,
+            }),
+            ...(isDisabled && {
+                ...getDisabledBaseStyles({
+                    '&': {
+                        boxShadow: 'inset 0 0 0 2px GrayText !important',
+                    },
+                }),
             }),
         },
         ...(isLoading && {
@@ -4614,6 +4722,7 @@ const getComponentCss$15 = (icon, iconSource, variant, hideLabel, isDisabled, is
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
+                color: 'inherit',
             },
         }),
         label: {
@@ -4621,12 +4730,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(),
@@ -5322,6 +5437,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
@@ -5341,10 +5460,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);
@@ -5353,6 +5468,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})`,
@@ -5368,6 +5484,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,
@@ -5383,19 +5500,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$2,
+                })
+            },
         },
     };
 };
-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) => ({
@@ -5407,10 +5526,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': {
@@ -5421,8 +5543,8 @@ const getFunctionalComponentLabelStyles = (isDisabledOrLoading, hideLabel, addit
                 cursor: 'unset',
                 fontSize: typescaleXs,
                 color: colorContrastHigh,
-                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXs$1}` })),
-                marginTop: `-${spacingStaticXs$1}`,
+                ...buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { marginTop: `-${spacingStaticXs$2}` })),
+                marginTop: `-${spacingStaticXs$2}`,
             },
             ...additionalDefaultJssStyle,
         },
@@ -5470,11 +5592,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),
@@ -5505,6 +5626,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: {
@@ -5518,7 +5640,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,
@@ -5540,7 +5662,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)`;
@@ -5557,14 +5679,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
@@ -5594,9 +5723,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 &&
@@ -5614,7 +5757,7 @@ const getFunctionalComponentInputBaseStyles = (isDisabled, isLoading, hideLabel,
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -5646,6 +5789,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({
@@ -5715,12 +5859,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',
@@ -6834,10 +6986,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',
@@ -6948,6 +7107,7 @@ 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
+                    forcedColorAdjust: 'none',
                     ...(isFlippableIcon(name, source) && {
                         '&(:dir(rtl))': {
                             transform: 'scaleX(-1)',
@@ -6995,6 +7155,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 = () => ({
@@ -7095,7 +7259,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
@@ -7215,7 +7387,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
@@ -7302,7 +7482,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
@@ -7364,6 +7552,10 @@ const anchorJssStyle = {
     inset: 0,
     zIndex: 1, // necessary to be on top of img
     borderRadius: `var(${legacyRadiusLarge}, ${radius4Xl})`,
+    ...forcedColorsMediaQuery({
+        forcedColorAdjust: 'none',
+        boxShadow: 'inset 0 0 0 2px LinkText',
+    }),
 };
 const getMultilineEllipsis = (lineClamp) => {
     return {
@@ -7752,6 +7944,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 && {
@@ -7792,6 +7988,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,
                 }),
             },
@@ -7838,7 +8037,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,
+        }),
     });
 };
 
@@ -7852,7 +8053,6 @@ const getComponentCss$z = (isDisabled) => {
         '@global': {
             ':host': addImportantToEachRule({
                 ...hostHiddenStyles,
-                ...(isDisabled && getDisabledBaseStyles()),
             }),
             '::slotted(*)': {
                 '--p-internal-select-option-padding-left': paddingSlottedInlineStart,
@@ -7868,6 +8068,7 @@ const getComponentCss$z = (isDisabled) => {
                 paddingInline,
                 font: textXSmallStyle.font.replace(' 400 ', ` ${fontWeightSemiBold} `),
                 color: colorPrimary,
+                ...(isDisabled && getDisabledBaseStyles()),
             },
         },
     });
@@ -7890,10 +8091,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),
@@ -7915,7 +8115,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),
     });
@@ -8059,10 +8259,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',
@@ -8082,7 +8281,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,
                 },
@@ -8119,7 +8318,7 @@ const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, length, isCo
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, isLoading, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
         // .loading
@@ -8201,6 +8400,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)`,
@@ -8212,6 +8414,10 @@ const getComponentCss$v = () => {
             ...textSmallStyle,
             background: colorCanvas,
             color: colorPrimary,
+            ...forcedColorsMediaQuery({
+                outline: '2px solid CanvasText',
+                outlineOffset: '-2px',
+            }),
         },
     });
 };
@@ -8237,10 +8443,9 @@ const getComponentCss$u = (disabled, loading, state) => {
                 display: 'block',
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
-                    ...(disabledOrLoading && getDisabledBaseStyles()),
                 }),
             },
-            ...getFunctionalComponentLabelAfterStyles(disabledOrLoading),
+            ...getFunctionalComponentLabelAfterStyles(),
             ...preventFoucOfNestedElementsStyles,
             input: {
                 all: 'unset',
@@ -8256,6 +8461,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 &&
@@ -8270,6 +8478,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,
@@ -8295,6 +8504,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: {
@@ -8308,7 +8518,7 @@ const getComponentCss$u = (disabled, loading, state) => {
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled || loading, false, null, {
+        ...getFunctionalComponentLabelStyles(disabled, loading, false, null, {
             paddingTop: labelPaddingTop,
             paddingInlineStart: labelPaddingInlineStart,
         }),
@@ -8348,7 +8558,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()),
@@ -8382,7 +8592,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
@@ -8393,114 +8603,161 @@ const getComponentCss$t = (isDisabled, isLoading, hideLabel, state, isCompact, d
     });
 };
 
-const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$s = (isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar) => {
-    const actionPrevNextStyles = {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        direction: 'ltr',
-        width: prevNextWrapperWidth,
-        padding: '4px 0',
-        display: 'flex',
-        alignItems: alignScrollIndicator === 'center' ? 'center' : 'flex-start',
+/**
+ * Generates a CSS linear-gradient mask string for smooth edge fading
+ * using smoothstep easing.
+ *
+ * @param fadeEdges - Which edges to fade.
+ * @param edgeLength - Size of the fully transparent area at the edge (px).
+ * @param fadeLength - Size of the transition area (px).
+ * @param steps - Number of gradient stops (more = smoother, 8–12 is plenty).
+ * @returns CSS linear-gradient string.
+ */
+const getSmoothMask = (fadeEdges, edgeLength = 24, fadeLength = 96, steps = 20) => {
+    if (fadeEdges === 'none') {
+        return 'linear-gradient(black,black)';
+    }
+    const fullLength = edgeLength + fadeLength;
+    const leftStops = [];
+    const rightStops = [];
+    for (let i = 1; i < steps; i++) {
+        const t = i / steps;
+        const alpha = t * t * t * (t * (t * 6 - 15) + 10);
+        leftStops.push(`rgb(0 0 0/${alpha.toFixed(3)}) ${(edgeLength + fadeLength * t).toFixed(0)}px`);
+        rightStops.push(`rgb(0 0 0/${(1 - alpha).toFixed(3)}) calc(100% - ${(fullLength - fadeLength * t).toFixed(0)}px)`);
+    }
+    const left = `transparent 0px,transparent ${edgeLength}px,${leftStops.join(',')},black ${fullLength}px`;
+    const right = `black calc(100% - ${fullLength}px),${rightStops.join(',')},transparent calc(100% - ${edgeLength}px),transparent 100%`;
+    const gradients = {
+        left: `linear-gradient(to right,${left},black 100%)`,
+        right: `linear-gradient(to right,black 0%,${right})`,
+        both: `linear-gradient(to right,${left},${right})`,
+    };
+    return gradients[fadeEdges];
+};
+
+/**
+ * @css-variable {"name": "--p-scroller-gap", "description": "Defines the gap between slotted nodes.", "defaultValue": "8px"}
+ */
+const cssVarGap = '--p-scroller-gap';
+/**
+ * @css-variable {"name": "--p-scroller-indicator-top", "description": "Defines the distance from the top of the viewport at which the indicator sticks when scrolling down and `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarIndicatorTop = '--p-scroller-indicator-top';
+/**
+ * @css-variable {"name": "--p-scroller-indicator-bottom", "description": "Defines the distance from the bottom of the viewport at which the indicator sticks when scrolling up and `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarIndicatorBottom = '--p-scroller-indicator-bottom';
+const iconPrev = getInlineSVGBackgroundImage(`<path d="m8.875 12v-.001l.006-.005 5.476-6.494.768.642-4.94 5.858 4.939 5.858-.768.642-5.477-6.497z"/>`);
+const iconNext = getInlineSVGBackgroundImage(`<path d="m15.121 11.997-5.477-6.497-.769.642 4.94 5.858-4.94 5.858.768.642 5.476-6.494.006-.005v-.001z"/>`);
+const scrollbarWidth = '12px';
+const safeZone = '4px';
+const getScrollIndicatorStyles = (direction, isVisible, isSticky, hasScrollbar, isCompact) => {
+    const isPrev = direction === 'prev';
+    const iconMask = `${isPrev ? iconPrev : iconNext} center/contain no-repeat`;
+    return {
+        gridArea: isPrev ? '1/1' : '1/3',
+        zIndex: 1, // ensure that indicators are above the scroll area
+        ...(isSticky && {
+            position: 'sticky',
+            top: `var(${cssVarIndicatorTop},0px)`,
+            bottom: `var(${cssVarIndicatorBottom},0px)`,
+        }),
+        ...(hasScrollbar && {
+            marginTop: `calc(-1 * ${scrollbarWidth})`,
+        }),
+        display: 'grid',
+        alignSelf: 'center',
+        width: '1.5rem',
+        height: '1.5rem',
+        ...(!isCompact && {
+            padding: spacingStaticXs$1,
+        }),
+        cursor: 'pointer',
+        opacity: isVisible ? 1 : 0,
+        visibility: isVisible ? 'inherit' : 'hidden',
+        transform: `translate3d(${isVisible ? '0' : `${isPrev ? `calc(-1 * ${spacingStaticSm$1})` : spacingStaticSm$1}`},0,0)`,
+        transition: `${getTransition('transform')},${getTransition('opacity')},visibility 0s linear ${isVisible ? '0s' : `var(${cssVariableTransitionDuration},${durationSm})`}`,
+        '&:dir(rtl)': {
+            gridArea: isPrev ? '1/3' : '1/1',
+        },
+        ...hoverMediaQuery({
+            '&:hover::after': {
+                // do the transform on the pseudo-element to prevent the click area from moving when hovered
+                transform: `translate3d(${isPrev ? `calc(-1 * ${spacingStaticXs$1})` : spacingStaticXs$1},0,0)`,
+            },
+        }),
+        '&::after': {
+            content: '""',
+            WebkitMask: iconMask, // necessary for Sogou browser support :-)
+            mask: iconMask,
+            background: colorPrimary,
+            transition: getTransition('transform'),
+        },
     };
+};
+const getComponentCss$s = (isIndicatorPrevVisible, // can be undefined in ssr context
+isIndicatorNextVisible, // can be undefined in ssr context
+isSticky, hasScrollbar, isCompact) => {
+    const fadeEdges = !isIndicatorPrevVisible && !isIndicatorNextVisible
+        ? 'none'
+        : !isIndicatorPrevVisible
+            ? 'right'
+            : !isIndicatorNextVisible
+                ? 'left'
+                : 'both';
+    const mask = `${getSmoothMask(fadeEdges)} 0 0/auto no-repeat${hasScrollbar ? `,linear-gradient(black,black) 0 bottom/auto ${scrollbarWidth} no-repeat` : ''}`;
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
+                borderRadius: `var(${legacyRadiusSmall},${radiusLg})`, // needs to be overwritable by tabs-bar to improve focus appearance
                 ...addImportantToEachRule({
-                    height: 'inherit',
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
+            slot: {
+                gridArea: '1/2',
+                position: 'relative', // necessary for tabs bar animation
+                display: 'inline-flex',
+                gap: `var(${cssVarGap},${isCompact ? spacingStaticXs$1 : spacingStaticSm$1})`,
+            },
         },
         root: {
-            position: 'relative',
             display: 'grid',
-            gridTemplateColumns: `${prevNextWrapperWidth} minmax(0, 1fr) ${prevNextWrapperWidth}`,
-            margin: '0 -4px',
-            height: 'inherit',
+            gridTemplateColumns: `auto minmax(0,1fr) auto`,
+            alignItems: 'center',
+            borderRadius: 'inherit',
+            '&:has(.scroll:focus-visible)': getFocusBaseStyles(), // delegating the focus ensures mask does not cut off the focus ring
         },
-        'scroll-area': {
-            gridArea: '1 / 1 / 1 / -1',
-            padding: '4px',
+        scroll: {
+            gridArea: '1/1/1/-1',
+            zIndex: 0, // ensure that scroll area is behind the indicators
+            display: 'grid',
+            gridTemplateColumns: `${safeZone} minmax(auto,1fr) ${safeZone}`,
+            margin: `calc(-1 * ${safeZone})`, // compensate padding to ensure that `:host` is aligned with other elements
+            padding: `${safeZone} 0px${hasScrollbar ? ` calc(${safeZone} + ${scrollbarWidth})` : ''}`, // ensure enough space is available for focus ring of slotted elements (horizontal space is given by `.sentinel`)
+            outline: 'none', // focus ring is applied to `.root`, it would be cut off by the mask if applied to `.scroll`
             overflow: 'auto hidden',
-            ...((!isPrevHidden || !isNextHidden) && {
-                mask: isNextHidden
-                    ? 'linear-gradient(90deg,#0000 8px,#000 40px) alpha'
-                    : isPrevHidden
-                        ? 'linear-gradient(90deg,#000 calc(100% - 40px), #0000 calc(100% - 8px)) alpha'
-                        : 'linear-gradient(90deg,#0000 8px,#000 40px calc(100% - 40px),#0000 calc(100% - 8px)) alpha',
-            }),
-            ...(!hasScrollbar && {
-                // If scrollbar is disabled - hide scrollbar
-                msOverflowStyle: 'none' /* IE and Edge */,
-                scrollbarWidth: 'none' /* Firefox */,
-                '&::-webkit-scrollbar': {
-                    display: 'none',
-                },
+            ...(fadeEdges !== 'none' && {
+                WebkitMask: mask, // necessary for Sogou browser support :-)
+                mask,
             }),
+            scrollbarWidth: hasScrollbar ? 'thin' : 'none',
         },
-        // Extra wrapper needed to compensate different offset parent calculation depending on browser.
-        // Needed for position of status bar.
-        'scroll-wrapper': {
-            position: 'relative',
-            display: 'inline-flex',
-            minHeight: '28px',
-            minWidth: '100%',
-            verticalAlign: 'top',
-            borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-            '&:focus-visible': getFocusBaseStyles(),
-        },
-        trigger: {
-            position: 'absolute',
-            inset: '0 auto',
-            width: '1px',
+        // as soon as `@container scroll-state(scrollable: left)` has better browser support we can get rid of sentinel and IntersectionObserver
+        sentinel: {
+            width: safeZone,
             visibility: 'hidden',
-            '&:first-of-type': {
-                left: 0,
+            '&:first-of-type:dir(rtl)': {
+                gridArea: '1/3',
             },
-            '&:last-of-type': {
-                right: 0,
-            },
-        },
-        'action-prev': {
-            ...actionPrevNextStyles,
-            left: '-1px', // ensures that the gradient always overlays the content (e.g. when zoomed)
-            justifyContent: 'flex-start',
-            visibility: isPrevHidden ? 'hidden' : 'inherit',
-            '& .action-button': {
-                marginLeft: '8px',
-                // hide buttons on mobile (actually devices not supporting hover)
-                ...hoverMediaQuery({
-                    visibility: isPrevHidden ? 'hidden' : 'inherit',
-                }),
-            },
-        },
-        'action-next': {
-            ...actionPrevNextStyles,
-            right: '-1px', // ensures that the gradient always overlays the content (e.g. when zoomed)
-            justifyContent: 'flex-end',
-            visibility: isNextHidden ? 'hidden' : 'inherit',
-            '& .action-button': {
-                marginRight: '8px',
-                // hide buttons on mobile (actually devices not supporting hover)
-                ...hoverMediaQuery({
-                    visibility: isNextHidden ? 'hidden' : 'inherit',
-                }),
-            },
-        },
-        'action-button': {
-            ...dismissButtonJssStyle,
-            ...dropShadowLowStyle,
-        },
-        icon: {
-            '&:dir(rtl)': {
-                transform: 'scaleX(-1)',
+            '&:last-of-type:dir(rtl)': {
+                gridArea: '1/1',
             },
         },
+        prev: getScrollIndicatorStyles('prev', !!isIndicatorPrevVisible, isSticky, hasScrollbar, isCompact),
+        next: getScrollIndicatorStyles('next', !!isIndicatorNextVisible, isSticky, hasScrollbar, isCompact),
     });
 };
 
@@ -8554,6 +8811,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 ...(isDisabled
                     ? {
                         cursor: 'not-allowed',
+                        ...forcedColorsMediaQuery({
+                            color: 'GrayText',
+                            borderColor: 'GrayText',
+                        }),
                     }
                     : {
                         cursor: 'pointer',
@@ -8573,6 +8834,10 @@ const getComponentCss$r = (isCompact, isDisabled, isSelected, state, hasIcon, ha
                 ...textXSmallStyle,
                 overflowWrap: 'normal',
                 color: colorContrastMedium,
+                ...(isDisabled &&
+                    forcedColorsMediaQuery({
+                        color: 'GrayText',
+                    })),
             },
         },
         ...(hasIcon && {
@@ -8594,12 +8859,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
@@ -8617,7 +8878,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
@@ -8672,9 +8933,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),
@@ -8697,7 +8957,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),
     });
@@ -8749,6 +9009,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(),
@@ -8794,6 +9057,7 @@ const getComponentCss$m = (size) => {
             },
             ':host': {
                 display: 'inline-flex',
+                color: colorPrimary,
                 ...addImportantToEachRule({
                     verticalAlign: 'top',
                     ...hostHiddenStyles,
@@ -8810,7 +9074,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',
@@ -8852,9 +9116,6 @@ const getComponentCss$l = (state, disabled) => {
                     fontSize: 'inherit',
                     ...hostHiddenStyles,
                     ...(isDisabled && getDisabledBaseStyles()),
-                    '&(:not(:last-of-type))': {
-                        marginInlineEnd: spacingFluidXSmall,
-                    },
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
@@ -8884,6 +9145,15 @@ const getComponentCss$l = (state, disabled) => {
                         },
                     })),
                 '&:focus-visible': getFocusBaseStyles(),
+                ...forcedColorsMediaQuery({
+                    ...(isStateCurrent && {
+                        outline: '1px solid CanvasText',
+                    }),
+                    ...(isDisabled && {
+                        color: 'GrayText',
+                        borderColor: 'GrayText',
+                    }),
+                }),
             },
         },
         icon: {
@@ -8891,9 +9161,15 @@ const getComponentCss$l = (state, disabled) => {
             fontSize: 'inherit', // necessary because of all: unset
             width: fontLineHeight,
             height: fontLineHeight,
+            forcedColorAdjust: 'none',
             ...(isStateCurrentOrUndefined && {
                 display: 'grid',
                 backgroundImage: `radial-gradient(circle, ${colorPrimary} 60%, transparent 62%)`,
+                ...(isDisabled && {
+                    ...forcedColorsMediaQuery({
+                        backgroundImage: 'radial-gradient(circle, GrayText 60%, transparent 62%)',
+                    }),
+                }),
                 '&::before': {
                     content: '""',
                     ...Array.from(new Array(9)).reduce((result, _, i) => ({
@@ -8915,7 +9191,7 @@ const getComponentCss$k = (size) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'block',
+                display: 'grid',
                 ...addImportantToEachRule({
                     ...hostHiddenStyles,
                 }),
@@ -8923,8 +9199,9 @@ const getComponentCss$k = (size) => {
             ...preventFoucOfNestedElementsStyles,
         },
         scroller: {
+            placeSelf: 'flex-start', // ensures scroller doesn't get stretched in x- or y-axis in case the stepper-horizontal is taller than the scroller (e.g. when placed in flex or grid context)
             ...textSmallStyle,
-            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] })),
+            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText$1[s] })),
         },
     });
 };
@@ -8945,6 +9222,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)`;
@@ -8990,9 +9268,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,
@@ -9011,8 +9293,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, {
@@ -9021,6 +9307,7 @@ const getComponentCss$j = (alignLabel, hideLabel, isStretched, isChecked, isDisa
             },
         },
         toggle: {
+            forcedColorAdjust: 'none',
             display: 'flex',
             placeItems: 'center',
             placeContent: 'center',
@@ -9056,19 +9343,31 @@ const getComponentCss$i = () => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-table-scroll-indicator-top", "description": "Defines the distance from the top of the viewport at which the scroll indicator sticks when scrolling down and `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarScrollIndicatorTop = '--p-table-scroll-indicator-top';
+/**
+ * @css-variable {"name": "--p-table-scroll-indicator-bottom", "description": "Defines the distance from the bottom of the viewport at which the scroll indicator sticks when scrolling up and `sticky` is enabled.", "defaultValue": "0px"}
+ */
+const cssVarScrollIndicatorBottom = '--p-table-scroll-indicator-bottom';
 const cssVariableTablePadding = '--_a';
 const cssVariableTableHoverColor = '--_b';
 const cssVariableTableBorderColor = '--_c';
 const cssVariableTableBorderWidth = '--_d';
-const getComponentCss$h = (compact, layout) => {
+const getComponentCss$h = (isCompact, layout) => {
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
+                    '--p-scroller-indicator-top': `var(${cssVarScrollIndicatorTop},0px)`,
+                    '--p-scroller-indicator-bottom': `var(${cssVarScrollIndicatorBottom},0px)`,
                     [cssVariableTableHoverColor]: colorFrosted,
                     [cssVariableTableBorderColor]: colorContrastLow,
-                    ...(compact && { [cssVariableTablePadding]: spacingStaticSmall }),
+                    ...(isCompact && {
+                        [cssVariableTablePadding]: spacingStaticSmall,
+                    }),
                     ...hostHiddenStyles,
                     ...textSmallStyle,
                     color: colorPrimary,
@@ -9248,102 +9547,100 @@ const getComponentCss$c = () => {
     });
 };
 
-const scrollerAnimatedCssClass = 'scroller--animated';
-const targetSelectors = ['a', 'button'];
-const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
-const barJssStyle = {
-    position: 'absolute',
-    height: '2px',
-    left: 0,
-    background: colorPrimary,
+const backgroundMap = {
+    canvas: colorCanvas,
+    surface: colorSurface,
+    frosted: colorFrosted,
+};
+const fontSizeText = {
+    small: typescaleSm,
+    medium: typescaleMd,
 };
-const getComponentCss$b = (size, weight) => {
+const getComponentCss$b = (background, size, isCompact) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'block',
+                display: 'grid',
                 ...addImportantToEachRule({
-                    position: 'relative',
+                    position: 'relative', // necessary for the bar animation to calculate the tab items position correctly
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
             ...addImportantToEachRule({
-                '::slotted(:is(a,button):focus-visible)': getFocusBaseStyles(),
-                // would be nice to use shared selector like '::slotted([role])'
-                // but this doesn't work reliably when rendering in browser
-                // TODO: might work with ::slotted(:is(a,button)) in the meantime?
-                [transformSelector('::slotted([role])')]: {
-                    all: 'unset',
-                    display: 'inline-block',
-                    position: 'relative',
-                    margin: `0 0 ${spacingStaticXs} 0`,
-                    verticalAlign: 'top',
-                    whiteSpace: 'nowrap',
-                    boxSizing: 'border-box',
-                    textAlign: 'start',
-                    color: colorPrimary,
-                    cursor: 'pointer',
-                    borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-                    zIndex: 0, // needed for ::before pseudo-element to be visible
+                '::slotted': {
+                    '&(a),&(button)': {
+                        all: 'unset',
+                        padding: isCompact ? `2px ${spacingStaticSm$1}` : `12px ${spacingStaticMd}`,
+                        whiteSpace: 'nowrap',
+                        cursor: 'pointer',
+                        borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
+                        ...(background === 'none' && {
+                            background: colorFrosted,
+                        }),
+                        font: `${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+                        ...buildResponsiveStyles(size, (sizeValue) => ({
+                            fontSize: fontSizeText[sizeValue],
+                        })),
+                        color: colorPrimary,
+                        transition: `${getTransition('color', 'moderate')}, ${getTransition('background-color')}`,
+                    },
+                    '&(a:focus-visible),&(button:focus-visible)': getFocusBaseStyles(),
                     ...hoverMediaQuery({
-                        '&::before': {
-                            content: '""',
-                            position: 'absolute',
-                            inset: '-2px -4px',
-                            borderRadius: `var(${legacyRadiusSmall}, ${radiusSm})`,
-                            zIndex: -1, // Stack the pseudo-element behind the button to avoid overlay of frosted-glass effect with label text
-                            transition: getTransition('background-color'),
+                        '&(a:not([aria-current="true"]):hover),&(button:not([aria-selected="true"]):hover)': {
+                            background: colorFrostedStrong,
                         },
                     }),
-                },
-                ...hoverMediaQuery({
-                    [transformSelector('::slotted([role]:hover)::before')]: {
-                        ...frostedGlassStyle,
-                        background: colorFrosted,
+                    '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
+                        color: colorCanvas,
+                        background: colorPrimary,
+                        transition: `${getTransition('color', 'moderate')}, background-color 0s linear ${durationMd}`, // the background shall be changed immediately after the bar transition has finished
                     },
-                }),
-                // basic invisible bar, that will be delayed via transition: visibility
-                [transformSelector('::slotted([role])::after')]: {
-                    content: '""',
-                    visibility: 'hidden',
-                },
-                // visible bar for selected tab
-                [transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')]: {
-                    ...barJssStyle,
-                    right: '0px',
-                    bottom: isHighContrastMode ? '-4px' : '-6px',
-                    visibility: 'inherit',
-                },
-                [transformSelector('::slotted([role]:not(:last-child))')]: {
-                    marginInlineEnd: spacingStaticMedium,
+                    ...forcedColorsMediaQuery({
+                        '&(a),&(button)': {
+                            forcedColorAdjust: 'none',
+                            background: 'Canvas',
+                        },
+                        '&(a)': {
+                            color: 'LinkText',
+                            boxShadow: 'inset 0 0 0 2px LinkText',
+                        },
+                        '&(button)': {
+                            color: 'ButtonText',
+                            boxShadow: 'inset 0 0 0 2px ButtonBorder',
+                        },
+                        '&(a[aria-current="true"]),&(button[aria-selected="true"])': {
+                            transition: 'unset',
+                        },
+                    }),
                 },
             }),
         },
         scroller: {
-            ...textSmallStyle,
-            fontWeight: getFontWeight(weight),
-            ...buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] })),
-        },
-        // conditionally applied and removed based on if activeTabIndex exists
-        [scrollerAnimatedCssClass]: {
-            [`& ${transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')}`]: {
-                transition: addImportantToRule(`visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationModerate})`), // bar appears after transition
-            },
+            placeSelf: 'flex-start', // ensures scroller doesn't get stretched in x- or y-axis in case the tabs-bar is taller than the scroller (e.g. when placed in flex or grid context)
+            borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
+            ...(background !== 'none' && {
+                background: backgroundMap[background],
+                padding: spacingStaticXs$1,
+                ...forcedColorsMediaQuery({
+                    forcedColorAdjust: 'none',
+                    outline: '1px solid CanvasText',
+                }),
+            }),
+            ...(background === 'frosted' && {
+                WebkitBackdropFilter: blurFrosted,
+                backdropFilter: blurFrosted,
+            }),
         },
-        // moving bar
         bar: {
-            ...barJssStyle,
-            width: 0, // actual width and transform is set via inline css
-            bottom: isHighContrastMode ? '0' : '-2px',
-            visibility: 'inherit',
-            transition: `${getTransition('transform', 'moderate')}, ${getTransition('width', 'moderate')}`,
-            animation: `$hide 0s var(${cssVariableAnimationDuration},0.5s) forwards`, // auto hide bar after transition, needs to be a little longer in Safari
-        },
-        '@keyframes hide': {
-            to: {
-                visibility: 'hidden',
-            },
+            position: 'absolute',
+            insetInlineStart: 0, // necessary for the bar animation to calculate the tab items position correctly in rtl mode
+            width: '0px', // ensures element is not visible after `.animate()` has finished
+            height: '100%',
+            zIndex: -1,
+            pointerEvents: 'none',
+            borderRadius: `var(${legacyRadiusSmall}, ${radiusFull})`,
+            background: colorPrimary,
         },
     });
 };
@@ -9376,7 +9673,7 @@ const getComponentCss$9 = () => {
             ...preventFoucOfNestedElementsStyles,
         },
         root: {
-            marginBottom: spacingStaticSmall,
+            marginBottom: spacingStaticSm$1,
         },
     });
 };
@@ -9423,6 +9720,10 @@ const getComponentCss$8 = (hasLabel, isCompact) => {
                         backgroundColor: colorFrosted,
                     },
                 }),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                }),
                 '&:focus-visible': getFocusBaseStyles(),
             },
         },
@@ -9493,7 +9794,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,
@@ -9505,6 +9806,12 @@ const getComponentCss$7 = (variant, compact, isFocusable, hasIcon) => {
                             background: backgroundHoverColor,
                         },
                     })),
+                ...forcedColorsMediaQuery({
+                    outline: '2px solid CanvasText',
+                    outlineOffset: '-2px',
+                    backgroundColor: 'Canvas',
+                    color: 'CanvasText',
+                }),
             },
             '::slotted': addImportantToEachRule({
                 '&(a),&(button)': {
@@ -9676,10 +9983,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',
@@ -9726,6 +10032,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
         },
         wrapper: {
             display: 'grid',
+            ...(isDisabled && getDisabledBaseStyles()),
         },
         ...(hasCounter && {
             counter: {
@@ -9738,7 +10045,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, isCompact,
             'sr-only': getHiddenTextJssStyle(),
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel),
+        ...getFunctionalComponentLabelStyles(isDisabled, false, hideLabel),
         // .message
         ...getFunctionalComponentStateMessageStyles(state),
     });