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

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

@@ -3420,10 +3420,6 @@ const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
 
 const spacingFluidLarge = 'clamp(32px, 2.75vw + 23px, 76px)';
 
-const themeLightBackgroundShading = 'rgba(1, 2, 5, 0.67)';
-
-const themeDarkBackgroundShading = 'rgba(38, 38, 41, 0.67)';
-
 const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
@@ -3625,8 +3621,11 @@ const dismissButtonJssStyle = {
 };
 const cssVariableTransitionDuration = '--p-transition-duration';
 const cssVariableAnimationDuration = '--p-animation-duration';
+const getAnimation = (name, duration = 'short', easing = 'base') => {
+    return `${name} var(${cssVariableAnimationDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}`;
+};
 const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => {
-    return `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${delay ? ` var(${cssVariableTransitionDuration}, ${motionDurationMap[delay]})` : ''}`;
+    return `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${''}`;
 };
 const addImportantToRule = (value) => `${value} !important`;
 const addImportantToEachRule = (input) => {
@@ -3707,43 +3706,6 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: migrate flyout-multilevel to use shared backdrop of dialog-styles.ts
-/**
- * Generates JSS styles for a frosted glass background.
- * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
- * @param {number} zIndex - The z-index to be used.
- * @param {Theme} theme - The theme to be used.
- * @param {string} duration - The duration of the transition animation.
- * @param {'blur' | 'shading'} backdrop - The backdrop variant.
- * @returns {JssStyle} - The JSS styles for the frosted glass backdrop.
- */
-const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
-    return {
-        position: 'fixed',
-        inset: 0,
-        zIndex,
-        // TODO: background shading is missing in getThemedColors(theme).backgroundShading
-        background: isThemeDark(theme) ? themeDarkBackgroundShading : themeLightBackgroundShading,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            background: themeDarkBackgroundShading,
-        }),
-        ...(isVisible
-            ? {
-                visibility: 'inherit',
-                pointerEvents: 'auto',
-                ...frostedGlassStyle,
-                opacity: 1,
-            }
-            : {
-                visibility: 'hidden', // element shall not be tabbable after fade out transition has finished
-                pointerEvents: 'none',
-                WebkitBackdropFilter: 'blur(0px)',
-                backdropFilter: 'blur(0px)',
-                opacity: 0,
-            }),
-        transition: `${getTransition('opacity', duration)}, ${getTransition('backdrop-filter', duration)}, ${getTransition('-webkit-backdrop-filter', duration)}, visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]})`,
-    };
-};
 
 const hostHiddenStyles = {
     '&([hidden])': {
@@ -4123,7 +4085,6 @@ const getComponentCss$19 = (size, compact, open, theme, sticky) => {
 };
 
 const TOAST_Z_INDEX = 999999;
-const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
@@ -4898,6 +4859,9 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     display: 'none',
                 },
             },
+            '&:focus': {
+                outline: 'none',
+            },
         },
         blur: {
             zIndex: -1,
@@ -5059,6 +5023,9 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 display: 'block',
                 padding: spacingBase,
             },
+            '&:focus': {
+                outline: 'none',
+            },
         },
         'flyout-start': {
             '--p-flyout-width': '100dvw',
@@ -6250,337 +6217,493 @@ const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
-const getFlyoutDialogResetJssStyle = () => {
-    return {
-        position: 'fixed',
-        height: '100dvh',
-        maxHeight: '100dvh',
-        margin: '0',
-        padding: '0',
-        border: '0',
-        visibility: 'inherit',
-        outline: '0',
-    };
-};
-
-const cssVariableVisibility = '--p-internal-flyout-multilevel-visibility';
-const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-multilevel-visibility-transition-duration';
-const frostedGlassHeaderHeight = '4rem';
-const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
-const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
-const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
-const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$T = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
-    const { backgroundColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const frostedGlassBackgroundColor = isThemeDark(theme)
-        ? frostedGlassBackgroundColorDark$1
-        : frostedGlassBackgroundColorLight$1;
+const scrollerWidthDesktop = 'clamp(338px, 210px + 18vw, 640px)';
+const mediaQueryMobile = getMediaQueryMax('s');
+const mediaQueryDesktop = getMediaQueryMin('s');
+const dialogDurationOpen = 'moderate';
+const backdropDurationOpen = 'long';
+const easingOpen = 'in';
+const dialogDurationClose = 'short';
+const backdropDurationClose = 'moderate';
+const easingClose = 'out';
+const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+    const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
+            '@keyframes slide-up-mobile': {
+                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                to: { transform: 'translate3d(0,0,0)' },
+            },
+            // unfortunately, it's not possible to use transform animation like in mobile view
+            // because then a new stacking context within scroll container would be initialized
+            // causing the slotted scroll container to become invisible
+            '@keyframes slide-up-desktop': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...(!isPrimaryScrollerVisible && {
-                        [cssVariableVisibility]: 'hidden',
-                        [cssVariableVisibilityTransitionDuration]: motionDurationLong,
-                    }),
-                    ...getBackdropJssStyle(isPrimaryScrollerVisible, FLYOUT_Z_INDEX, theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
             dialog: {
-                ...getFlyoutDialogResetJssStyle(),
-                inset: '0',
-                display: 'grid',
-                overflow: 'hidden',
-                width: 'auto',
-                maxWidth: '100vw',
-                background: 'none',
-                ...(isPrimaryScrollerVisible
+                all: 'unset',
+                position: 'fixed',
+                inset: 0,
+                zIndex: 999999999, // fallback when dialog isn't rendered on #top-layer, e.g. relevant in ssr context or fade-out transition in Safari or Firefox
+                outline: 0, // prevents outline in case dialog becomes focusable
+                ...(isOpen
                     ? {
-                        transform: 'translate3d(0, 0, 0)',
-                        transition: `${getTransition('transform', 'long', 'in')}`,
+                        visibility: 'inherit',
+                        ...frostedGlassStyle,
+                        background: backgroundShadingColor,
+                        transition: `${getTransition('background', backdropDurationOpen, easingOpen)}, ${getTransition('backdrop-filter', backdropDurationOpen, easingOpen)}, ${getTransition('-webkit-backdrop-filter', backdropDurationOpen, easingOpen)}`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: backgroundShadingColorDark,
+                        }),
                     }
                     : {
-                        transform: 'translate3d(-100%, 0, 0)',
-                        transition: `${getTransition('transform', 'long', 'out')}`,
+                        visibility: 'hidden',
+                        transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationMap[backdropDurationClose]}), ${getTransition('overlay', backdropDurationClose, easingClose)} allow-discrete, ${getTransition('background', backdropDurationClose, easingClose)}, ${getTransition('backdrop-filter', backdropDurationClose, easingClose)}, ${getTransition('-webkit-backdrop-filter', backdropDurationClose, easingClose)}`,
                     }),
-                [mediaQueryEnhancedView]: {
-                    gridTemplateColumns: `repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${scrollerWidthEnhancedView}) auto`,
-                    gridTemplateRows: '100vh',
-                    insetInlineEnd: 'auto', // to have correct dialog dimensions for ideal transitions
+                '&::backdrop': {
+                    display: 'none',
                 },
-                '&:dir(rtl)': {
-                    ...(!isPrimaryScrollerVisible && {
-                        transform: 'translate3d(100%, 0, 0)', // use correct transitions in rtl mode
+            },
+            slot: {
+                [mediaQueryMobile]: {
+                    display: 'contents',
+                    ...(!isSecondaryScrollerVisible && {
+                        zIndex: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        gridArea: '4/2/auto/-2',
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        paddingBlockEnd: spacingFluidLarge,
+                        ...(isPrimary && {
+                            animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
+                        }),
                     }),
                 },
-                '&::backdrop': {
-                    // to improve browser backwards compatibility we visually style the backdrop on the :host,
-                    // although it's not on the #top-layer like it would be for modern browsers supporting ::backdrop
-                    opacity: 0, // to support backdrop click for modern browsers supporting ::backdrop
+                [mediaQueryDesktop]: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: isPrimary ? spacingFluidXSmall : spacingFluidMedium,
+                    gridArea: '2/2/auto/-2',
+                    height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                    paddingBlockEnd: spacingFluidLarge,
+                    ...(isPrimary && {
+                        animation: getAnimation('slide-up-desktop', 'moderate', 'base'),
+                    }),
                 },
             },
-        },
-        scroller: {
-            gridArea: '1/1',
-            overflow: 'auto',
-            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
-            // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
-            visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
-            transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
-            // it's important to define background-color for each scroller to have correct scrollbar coloring
-            backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: backgroundColorDark,
+            ...(isSecondaryScrollerVisible && {
+                '::slotted(*:not([primary],[secondary],[cascade]))': {
+                    [mediaQueryMobile]: {
+                        display: 'none',
+                    },
+                },
+                '::slotted(*:not([primary],[cascade]))': {
+                    [mediaQueryDesktop]: {
+                        ...(!isPrimary && {
+                            display: 'none',
+                        }),
+                    },
+                },
             }),
-            [mediaQueryEnhancedView]: {
-                visibility: 'inherit',
-                transition: 'initial',
+        },
+        drawer: {
+            position: 'absolute',
+            inset: 0,
+            display: 'grid',
+            ...(isOpen
+                ? {
+                    opacity: 1,
+                    transform: 'translate3d(0,0,0)',
+                    transition: `${getTransition('opacity', dialogDurationOpen, easingOpen)}, ${getTransition('transform', dialogDurationOpen, easingOpen)}`,
+                }
+                : {
+                    opacity: 0,
+                    transform: 'translate3d(-100%,0,0)',
+                    transition: `${getTransition('opacity', dialogDurationClose, easingClose)}, ${getTransition('transform', dialogDurationClose, easingClose)}`,
+                    '&:dir(rtl)': {
+                        transform: 'translate3d(100%,0,0)',
+                    },
+                }),
+            [mediaQueryMobile]: {
+                gridTemplate: `${spacingFluidMedium} auto ${spacingFluidLarge} minmax(0, 1fr)/${spacingFluidLarge} auto minmax(0, 1fr) auto ${spacingFluidLarge}`,
+                background: backgroundColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                }),
             },
-            // simulates frosted glass header, to be visually in sync with header of secondary scroller
-            '&::before': {
-                content: '""',
-                display: 'block',
-                position: 'sticky',
-                top: 0,
-                zIndex: 1,
-                height: frostedGlassHeaderHeight,
-                backgroundColor: frostedGlassBackgroundColor,
-                WebkitBackdropFilter: 'blur(8px)',
-                backdropFilter: 'blur(8px)', // with current frostedGlassStyle of blur(32px) scrolling becomes visually distracting
+            [mediaQueryDesktop]: {
+                width: isSecondaryScrollerVisible ? `calc(${scrollerWidthDesktop} * 2)` : scrollerWidthDesktop,
+                gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge})`,
+                background: backgroundColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    backgroundColor: frostedGlassBackgroundColorDark$1,
+                    background: backgroundColorDark,
                 }),
-                [mediaQueryEnhancedView]: {
-                    display: 'none',
+                ...(isSecondaryScrollerVisible && {
+                    background: `linear-gradient(90deg,${backgroundColor} 0%,${backgroundColor} 50%,${backgroundSurfaceColor} 50%,${backgroundSurfaceColor} 100%)`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: `linear-gradient(90deg,${backgroundColorDark} 0%,${backgroundColorDark} 50%,${backgroundSurfaceColorDark} 50%,${backgroundSurfaceColorDark} 100%)`,
+                    }),
+                    '&:dir(rtl)': {
+                        background: `linear-gradient(90deg,${backgroundSurfaceColor} 0%,${backgroundSurfaceColor} 50%,${backgroundColor} 50%,${backgroundColor} 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(90deg,${backgroundSurfaceColorDark} 0%,${backgroundSurfaceColorDark} 50%,${backgroundColorDark} 50%,${backgroundColorDark} 100%)`,
+                        }),
+                    },
+                }),
+            },
+            '&::before, &::after': {
+                content: '""',
+                position: 'relative',
+                zIndex: 2,
+                pointerEvents: 'none',
+                opacity: 0,
+            },
+            '&::before': {
+                [mediaQueryMobile]: {
+                    gridArea: '1/1/-1/-1',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+                [mediaQueryDesktop]: {
+                    gridArea: '1/1/-1/4',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+            },
+            '&::after': {
+                [mediaQueryMobile]: {
+                    gridArea: '1/1/-1/-1',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+                [mediaQueryDesktop]: {
+                    gridArea: '1/4/-1/-1',
+                    background: backgroundSurfaceColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundSurfaceColorDark,
+                    }),
                 },
             },
         },
-        content: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: spacingFluidXSmall,
-            padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
-            [mediaQueryEnhancedView]: {
-                padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        scroller: {
+            [mediaQueryMobile]: {
+                display: 'contents',
+                ...(!isSecondaryScrollerVisible && {
+                    gridArea: '1/1/-1/-1',
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                    '&::before': {
+                        content: '""',
+                        position: 'sticky',
+                        top: 0,
+                        gridArea: '1/1/4/-1',
+                        zIndex: 1,
+                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
+                        }),
+                    },
+                }),
+            },
+            [mediaQueryDesktop]: {
+                gridArea: '1/1/-1/4',
+                display: 'grid',
+                gridTemplateRows: 'subgrid',
+                gridTemplateColumns: 'subgrid',
+                overflow: 'hidden auto',
+                // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                scrollBehavior: 'smooth',
+                WebkitOverflowScrolling: 'touch',
             },
         },
-        // header is needed to keep position of dismiss button in sync with header of secondary scroller
-        header: {
-            position: 'relative',
-            zIndex: 3, // ensures dismiss button is visible on secondary drawer in mobile view
-            gridArea: '1/1',
-            alignSelf: 'flex-start',
-            justifySelf: 'flex-end',
-            marginInlineEnd: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
-            height: frostedGlassHeaderHeight,
-            display: 'flex',
-            alignItems: 'center',
-            [mediaQueryEnhancedView]: {
-                marginInlineEnd: 0,
-                gridArea: '1/-1',
-                placeSelf: 'flex-start',
+        'dismiss-mobile': {
+            [mediaQueryMobile]: {
+                ...dismissButtonJssStyle,
+                width: 'fit-content',
+                height: 'fit-content',
+                placeSelf: 'center flex-end',
+                gridArea: '2/4',
+                zIndex: 3, // ensures dismiss button is on top of opacity animation handled by ::before/::after
+                marginInlineEnd: '-1px', // improve visual alignment and compensate white space of close icon
+            },
+            [mediaQueryDesktop]: {
+                display: 'none',
             },
         },
-        dismiss: {
-            padding: spacingFluidSmall,
-            [mediaQueryEnhancedView]: {
+        'dismiss-desktop': {
+            [mediaQueryMobile]: {
+                display: 'none',
+            },
+            [mediaQueryDesktop]: {
                 '--p-internal-icon-filter': 'invert(1)',
-                margin: spacingFluidSmall,
+                position: 'absolute',
+                insetInlineStart: `calc(100% + ${spacingFluidSmall})`,
+                insetBlockStart: spacingFluidSmall,
                 padding: spacingStaticSmall,
             },
         },
-    });
-};
-const getContentJssStyle = () => {
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: spacingFluidXSmall,
-        padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
-        [mediaQueryEnhancedView]: {
-            padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        back: {
+            display: 'none',
+            ...(isSecondaryScrollerVisible && {
+                [mediaQueryMobile]: {
+                    display: 'block',
+                    gridArea: '2/2',
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    placeSelf: 'center flex-start',
+                    zIndex: 2,
+                },
+            }),
         },
-    };
+    });
 };
 
-const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
-const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$S = (isSecondaryScrollerVisible, theme) => {
-    const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
-    const frostedGlassBackgroundColor = isThemeDark(theme)
-        ? frostedGlassBackgroundColorDark
-        : frostedGlassBackgroundColorLight;
-    const fadeInOutTransition = isSecondaryScrollerVisible
-        ? {
-            opacity: 1,
-            transition: `${getTransition('opacity', 'veryLong', 'in', 'short')}`,
-            [mediaQueryEnhancedView]: {
-                transition: `${getTransition('opacity', 'veryLong', 'in')}`,
-            },
-        }
-        : {
-            opacity: 0,
-            transition: `${getTransition('opacity', 'short', 'out')}`,
-        };
+const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
+            '@keyframes slide-up-mobile': {
+                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                to: { transform: 'translate3d(0,0,0)' },
+            },
+            '@keyframes slide-up-desktop-primary': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
+            '@keyframes slide-up-desktop-secondary': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
             ':host': {
-                display: 'block',
+                display: 'contents',
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
-            '::slotted(:is(h1, h2, h3, h4, h5, h6))': addImportantToEachRule({
-                ...headingSmallStyle,
-                margin: 0,
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
-            }),
-            '::slotted(:is(h1, h2, h3, h4, h5, h6):not(:first-child))': addImportantToEachRule({
-                margin: `calc(${spacingFluidMedium} - ${spacingFluidXSmall}) 0 0`, // spacingFluidXSmall to compensate default gap
-            }),
-            '::slotted': addImportantToEachRule({
-                '&(p)': {
-                    ...textSmallStyle,
-                    margin: 0,
-                    color: primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: primaryColorDark,
+            slot: {
+                display: 'none',
+                [mediaQueryMobile]: {
+                    ...(isSecondary && {
+                        zIndex: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        gridArea: '4/2/auto/-2',
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        paddingBlockEnd: spacingFluidLarge,
+                        animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
+                    }),
+                    ...((isPrimary || isCascade) && {
+                        display: 'contents',
                     }),
                 },
-                '&(a)': {
-                    ...{
-                        ...textSmallStyle,
-                        alignSelf: 'flex-start',
+                [mediaQueryDesktop]: {
+                    ...((isPrimary || isSecondary) && {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        animation: getAnimation(`slide-up-desktop-${isPrimary ? 'primary' : 'secondary'}`, 'moderate', 'base'),
+                    }),
+                    ...(isSecondary && {
+                        gridArea: '2/2/auto/-2',
+                        paddingBlockEnd: spacingFluidLarge,
+                    }),
+                    ...(isCascade && {
+                        display: 'contents',
+                    }),
+                },
+            },
+            h2: {
+                display: 'none',
+                [mediaQueryMobile]: {
+                    ...(isSecondary && {
+                        ...headingSmallStyle,
                         display: 'block',
-                        textDecoration: 'none',
-                        cursor: 'pointer',
-                        color: primaryColor,
-                        borderRadius: borderRadiusSmall,
-                        marginLeft: `-${spacingStaticXSmall}`,
-                        marginRight: `-${spacingStaticXSmall}`,
-                        padding: `2px ${spacingStaticXSmall}`,
-                        transition: `background var(${cssVariableTransitionDuration}, ${motionDurationShort}) ${motionEasingBase}`,
+                        gridArea: '2/3',
+                        placeSelf: 'center',
+                        zIndex: 2,
+                        margin: 0,
+                        paddingInline: spacingStaticMedium,
+                        maxWidth: '100%',
+                        boxSizing: 'border-box',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        color: primaryColor, // enables color inheritance for slotted content
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             color: primaryColorDark,
                         }),
+                    }),
+                },
+            },
+            // If cascade we need to hide all children which are not primary or another cascade (e.g. all siblings of the primary or cascade item)
+            ...(isCascade && {
+                '::slotted(*:not([primary],[cascade]))': {
+                    display: 'none',
+                },
+            }),
+            ...(isPrimary && {
+                '::slotted(*:not([secondary]))': {
+                    [mediaQueryMobile]: {
+                        display: 'none',
                     },
                 },
-                '&(a[aria-current])': {
-                    background: hoverColor,
+            }),
+            '::slotted': {
+                '&(a)': {
+                    all: 'unset',
+                    alignSelf: 'flex-start',
+                    font: textMediumStyle.font,
+                    cursor: 'pointer',
+                    borderRadius: borderRadiusSmall,
+                    padding: addImportantToRule(spacingFluidSmall),
+                    marginInline: addImportantToRule(`calc(${spacingFluidSmall} * -1)`),
+                    color: primaryColor,
+                    textDecoration: 'underline',
+                    textDecorationColor: 'transparent',
+                    transition: `${getTransition('text-decoration-color')}`,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: hoverColorDark,
+                        color: primaryColorDark,
                     }),
                 },
+                '&(a[aria-current])': {
+                    textDecoration: 'underline',
+                },
                 ...hoverMediaQuery({
-                    // TODO: how can we easily re-use getHoverStyle() with ::slotted(a) selector?
                     '&(a:hover)': {
-                        background: hoverColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: hoverColorDark,
-                        }),
+                        textDecorationColor: 'inherit',
                     },
                 }),
                 ...getFocusJssStyle(theme, { slotted: 'a', offset: '-2px' }),
-            }),
+            },
+            ...preventFoucOfNestedElementsStyles,
         },
-        button: {
-            width: 'auto',
-            padding: spacingFluidSmall,
-            margin: `0 calc(${spacingFluidSmall} * -1)`,
+        // drawer subgrid in combination with scroller grid ensures no content squeezing during slide up animation, potentially caused by scrollbar
+        drawer: {
+            [mediaQueryMobile]: {
+                display: 'none',
+                ...((isPrimary || isSecondary || isCascade) && {
+                    display: 'contents',
+                }),
+            },
+            [mediaQueryDesktop]: {
+                display: 'none',
+                ...(isSecondary && {
+                    position: 'absolute', // enables to break out of scroll area
+                    inset: 0,
+                    insetInlineStart: scrollerWidthDesktop,
+                    display: 'grid',
+                    gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge}`,
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
+                }),
+            },
         },
         scroller: {
-            position: 'fixed',
-            inset: 0,
-            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-multilevel gets closed
-            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
-            ...(isSecondaryScrollerVisible
-                ? {
-                    zIndex: 2,
-                    transform: 'translate3d(0, 0, 0)',
-                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-multilevel itself, which is hidden on mobile
-                    visibility: `var(${cssVariableVisibility},visible)`,
-                    transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
-                }
-                : {
-                    zIndex: 1,
-                    transform: 'translate3d(100%, 0, 0)',
-                    visibility: `var(${cssVariableVisibility},hidden)`,
-                    transition: `${getTransition('transform', 'long', 'out')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},${motionDurationLong}))`,
+            [mediaQueryMobile]: {
+                display: 'none',
+                ...(isSecondary && {
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    gridArea: '1/1/-1/-1',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none',  // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                    '&::before': {
+                        zIndex: 1,
+                        content: '""',
+                        position: 'sticky',
+                        top: 0,
+                        gridArea: '1/1/4/-1',
+                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
+                        }),
+                    },
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
                 }),
-            width: '100vw',
-            boxSizing: 'border-box',
-            overflow: 'auto',
-            ...dropShadowHighStyle,
-            // it's important to define background-color for each scroller to have correct scrollbar coloring
-            backgroundColor: backgroundSurfaceColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: backgroundSurfaceColorDark,
-            }),
-            [mediaQueryEnhancedView]: {
-                boxShadow: 'none',
-                insetInlineStart: `calc(${scrollerWidthEnhancedView} - 1px)`, // -1px prevents possible visible background under certain circumstances between primary and secondary scroller
-                width: scrollerWidthEnhancedView,
-                transform: addImportantToRule('initial'), // to overrule :dir(rtl) selector
-                transition: `visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
             },
-            '&:dir(rtl)': {
-                ...(!isSecondaryScrollerVisible && {
-                    transform: 'translate3d(-100%, 0, 0)', // use correct transitions in rtl mode for mobile view
+            [mediaQueryDesktop]: {
+                display: 'none',
+                ...(isSecondary && {
+                    gridArea: '1/1/-1/-1',
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
                 }),
             },
         },
-        // header needs to be placed within scroller to ensure scrollbars are fully visible
-        header: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 1,
-            height: frostedGlassHeaderHeight,
-            padding: `0 ${spacingFluidLarge}`,
-            display: 'grid',
-            gridTemplateColumns: '4rem minmax(0, 1fr) 4rem',
-            alignItems: 'center',
-            gap: spacingFluidSmall,
-            WebkitBackdropFilter: 'blur(8px)',
-            backdropFilter: 'blur(8px)', // with current frostedGlassStyle of blur(32px) scrolling becomes visually distracting
-            backgroundColor: frostedGlassBackgroundColor,
-            ...fadeInOutTransition,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: frostedGlassBackgroundColorDark,
-            }),
-            [mediaQueryEnhancedView]: {
+        button: {
+            ...((isPrimary || isCascade) && {
                 display: 'none',
+            }),
+            [mediaQueryMobile]: {
+                ...(isSecondary && {
+                    display: 'none',
+                }),
             },
+            ...(!isPrimary &&
+                !isCascade && {
+                padding: spacingFluidSmall,
+                margin: `0 calc(${spacingFluidSmall} * -1)`,
+            }),
         },
         back: {
-            justifySelf: 'flex-start',
-            padding: spacingFluidSmall,
-            marginInlineStart: `calc(${spacingFluidSmall} * -1)`,
-        },
-        heading: {
-            ...headingMediumStyle,
-            margin: 0,
-            padding: 0,
-            overflow: 'hidden',
-            textAlign: 'center',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            color: primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
+            ...(!isPrimary && {
+                display: 'none',
+            }),
+            ...(isPrimary && {
+                [mediaQueryMobile]: {
+                    gridArea: '2/2',
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    placeSelf: 'center flex-start',
+                    zIndex: 2,
+                },
+                [mediaQueryDesktop]: {
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    marginInlineStart: '-4px', // improve visual alignment and compensate white space of arrow-left icon
+                },
             }),
         },
-        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
     });
 };
 
@@ -8870,7 +8993,6 @@ const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
             position: 'absolute',
             zIndex: POPOVER_Z_INDEX,
             filter: `drop-shadow(0 0 16px ${shadowColor})`,
-            backdropFilter: 'drop-shadow(0px 0px 0px transparent)', // fixes issues with Chrome >= 105 where filter: drop-shadow is not applied correctly after animation ends
             pointerEvents: 'none',
             animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
                 ,
@@ -9144,7 +9266,13 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     return {
         buttonColor: isDisabled ? disabledColor : primaryColor,
         labelColor: isDisabled ? disabledColor : contrastMediumColor,
-        borderColor: isSelected ? (isHighContrastMode ? highlightColor : primaryColor) : contrastLowColor,
+        borderColor: isSelected
+            ? isDisabled
+                ? disabledColor
+                : isHighContrastMode
+                    ? highlightColor
+                    : primaryColor
+            : contrastLowColor,
         hoverBorderColor: primaryColor,
     };
 };
@@ -9410,7 +9538,7 @@ const getListStyles$1 = (direction, theme) => {
     const { highlightColor } = getHighContrastColors();
     return {
         '@global': {
-            ul: {
+            '[role="listbox"]': {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: spacingStaticSmall,
@@ -10800,6 +10928,9 @@ const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
                         WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
                     },
+                    '&(input[type="email"]),&(input[type="tel"])': {
+                        direction: 'ltr', // fixes specific input types in RTL mode. Should always be LTR. See https://rtlstyling.com/posts/rtl-styling#form-inputs
+                    },
                 },
             }),
         },