@porsche-design-system/components-react 3.9.0 → 3.10.0-rc.1

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

@@ -1,7 +1,3 @@
-const isDisabledOrLoading = (disabled, loading) => {
-    return disabled || loading;
-};
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2354,18 +2350,18 @@ function getDynamicStyles(styles) {
 var index = createJss();
 
 var jss_esm = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    RuleList: RuleList,
-    SheetsManager: SheetsManager,
-    SheetsRegistry: SheetsRegistry,
-    create: createJss,
-    createGenerateId: createGenerateId,
-    createRule: createRule,
-    default: index,
-    getDynamicStyles: getDynamicStyles,
-    hasCSSTOMSupport: hasCSSTOMSupport,
-    sheets: sheets,
-    toCssValue: toCssValue
+  __proto__: null,
+  RuleList: RuleList,
+  SheetsManager: SheetsManager,
+  SheetsRegistry: SheetsRegistry,
+  create: createJss,
+  createGenerateId: createGenerateId,
+  createRule: createRule,
+  default: index,
+  getDynamicStyles: getDynamicStyles,
+  hasCSSTOMSupport: hasCSSTOMSupport,
+  sheets: sheets,
+  toCssValue: toCssValue
 });
 
 var at = '@global';
@@ -3155,6 +3151,10 @@ var dist = jssCombineAndSortMQ;
 
 var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
 
+const isDisabledOrLoading = (disabled, loading) => {
+    return disabled || loading;
+};
+
 const hasWindow = typeof window !== 'undefined';
 
 const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
@@ -3210,6 +3210,27 @@ const dropShadowHighStyle = {
 
 const themeLightStateFocus = '#1A44EA';
 
+const getFocusStyle = (opts) => {
+    const { borderRadius = 'small', offset = '2px' } = opts || {};
+    const outlineOffset = offset === 'small' ? '2px' : offset === 'none' ? 0 : offset || '2px';
+    const borderRadiusValue = borderRadius === 'small'
+        ? borderRadiusSmall
+        : borderRadius === 'medium'
+            ? borderRadiusMedium
+            : borderRadius || borderRadiusSmall;
+    return {
+        borderRadius: borderRadiusValue,
+        '&:focus': {
+            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+            outlineOffset,
+        },
+        // why? have a look at this article https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+        '&:focus:not(:focus-visible)': {
+            outlineColor: 'transparent',
+        },
+    };
+};
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -3457,6 +3478,11 @@ const headingXXLargeStyle = {
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
+const textXXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
     ...fontHyphenationStyle,
@@ -3833,10 +3859,13 @@ const getResetInitialStylesForSlottedAnchor = {
 };
 const focusPseudoJssStyle = {
     outline: 0,
-    '&:focus::before': {
+    '&::before': {
+        // needs to be defined always to have correct custom click area
         content: '""',
         position: 'absolute',
         ...getInsetJssStyle(),
+    },
+    '&:focus::before': {
         borderRadius: '1px',
         outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
         outlineOffset: '2px',
@@ -4044,6 +4073,9 @@ const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -4056,22 +4088,25 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$10 = (size, compact, open, theme) => {
+const getComponentCss$13 = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...(!compact && {
-                    borderBottom: `1px solid ${contrastLowColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: contrastLowColorDark,
+                ...addImportantToEachRule({
+                    ...(!compact && {
+                        borderBottom: `1px solid ${contrastLowColor}`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: contrastLowColorDark,
+                        }),
                     }),
+                    '&(:only-of-type)': { borderBottom: 0 },
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
                 }),
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+            },
             button: {
                 display: 'flex',
                 position: 'relative',
@@ -4196,7 +4231,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$$ = (isOpen) => {
+const getComponentCss$12 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4259,7 +4294,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$_ = (direction) => {
+const getComponentCss$11 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4413,7 +4448,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$Z = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
@@ -4590,7 +4625,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$Y = (isDisabledOrLoading, ...args) => {
+const getComponentCss$$ = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4726,7 +4761,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$X = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4798,53 +4833,57 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$Z = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'flex',
-                gap: spacingFluidMedium,
-                flexDirection: 'column',
-                boxSizing: 'content-box',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
-            '::slotted(*)': {
-                borderRadius: addImportantToRule(`var(--p-carousel-border-radius, ${borderRadiusLarge})`),
-            },
-            '::slotted(*:focus-visible)': addImportantToEachRule({
-                outline: `${borderWidthBase} solid ${focusColor}`,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    outlineColor: focusColorDark,
-                }),
-                outlineOffset: '2px',
-            }),
-            [selectorHeading]: addImportantToEachRule({
-                ...headingXLargeStyle,
-                maxWidth: '56.25rem',
-                margin: 0,
-            }),
-            [selectorDescription]: addImportantToEachRule({
-                ...textSmallStyle,
-                maxWidth: '34.375rem',
-                margin: `${spacingFluidXSmall} 0 0`,
-            }),
-            [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
+                ...addImportantToEachRule({
+                    gap: spacingFluidMedium,
+                    flexDirection: 'column',
+                    boxSizing: 'content-box',
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
                 }),
-                [mediaQueryS]: isHeaderAlignCenter
-                    ? {
-                        gridColumn: 2,
-                    }
-                    : {
-                        gridColumn: '1 / 3',
-                    },
+            },
+            ...addImportantToEachRule({
+                '::slotted(*)': {
+                    borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
+                },
+                '::slotted(*:focus-visible)': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        outlineColor: focusColorDark,
+                    }),
+                    outlineOffset: '2px',
+                },
+                [selectorHeading]: {
+                    ...headingXLargeStyle,
+                    maxWidth: '56.25rem',
+                    margin: 0,
+                },
+                [selectorDescription]: {
+                    ...textSmallStyle,
+                    maxWidth: '34.375rem',
+                    margin: `${spacingFluidXSmall} 0 0`,
+                },
+                [`${selectorHeading},${selectorDescription}`]: {
+                    color: primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                    }),
+                    [mediaQueryS]: isHeaderAlignCenter
+                        ? {
+                            gridColumn: 2,
+                        }
+                        : {
+                            gridColumn: '1 / 3',
+                        },
+                },
             }),
         },
         header: {
@@ -5202,7 +5241,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$V = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5300,7 +5339,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$U = (width) => {
+const getComponentCss$X = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5342,7 +5381,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$T = () => {
+const getComponentCss$W = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5430,7 +5469,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$S = (size, align, color, ellipsis, theme) => {
+const getComponentCss$V = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5450,7 +5489,7 @@ const getComponentCss$S = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$R = (color, orientation, theme) => {
+const getComponentCss$U = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5493,14 +5532,16 @@ const getComponentCss$R = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$Q = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$T = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
             fieldset: {
                 margin: 0,
                 padding: 0,
@@ -5527,14 +5568,16 @@ const getComponentCss$Q = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
             fieldset: {
                 margin: 0,
                 padding: 0,
@@ -5571,7 +5614,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$R = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5593,162 +5636,532 @@ const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$N = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$Q = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(mergeDeep(colorSchemeStyles, hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
-                display: inlineResponsive ? 'inline-flex' : 'flex',
-            })), buildResponsiveStyles(wrap, (flexWrapResponsive) => ({ flexWrap: flexWrapResponsive })), buildResponsiveStyles(direction, (flexDirectionResponsive) => ({
-                flexDirection: flexDirectionResponsive,
-            })), buildResponsiveStyles(justifyContent, (justifyContentResponsive) => ({
-                justifyContent: justifyContentResponsive,
-            })), buildResponsiveStyles(alignItems, (alignItemsResponsive) => ({
-                alignItems: alignItemsResponsive,
-            })), buildResponsiveStyles(alignContent, (alignContentResponsive) => ({
-                alignContent: alignContentResponsive,
-            })))),
+            ':host': {
+                ...buildResponsiveStyles(inline, (inlineResponsive) => ({
+                    display: inlineResponsive ? 'inline-flex' : 'flex',
+                })),
+                ...addImportantToEachRule(mergeDeep(colorSchemeStyles, hostHiddenStyles, buildResponsiveStyles(wrap, (flexWrapResponsive) => ({ flexWrap: flexWrapResponsive })), buildResponsiveStyles(direction, (flexDirectionResponsive) => ({
+                    flexDirection: flexDirectionResponsive,
+                })), buildResponsiveStyles(justifyContent, (justifyContentResponsive) => ({
+                    justifyContent: justifyContentResponsive,
+                })), buildResponsiveStyles(alignItems, (alignItemsResponsive) => ({
+                    alignItems: alignItemsResponsive,
+                })), buildResponsiveStyles(alignContent, (alignContentResponsive) => ({
+                    alignContent: alignContentResponsive,
+                })))),
+            },
         },
     });
 };
 
-const headerShadowClass = 'header--shadow';
-const footerShadowClass$1 = 'footer--shadow';
-const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) => {
-    const { primaryColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const isPositionStart = position === 'start';
-    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge}`;
-    const isDark = isThemeDark(theme);
-    const shadowColor = isDark ? scrollShadowColorDark : scrollShadowColor;
-    const transparentColorDark = 'rgba(14, 14, 18, 0)';
-    const transparentColor = isDark ? transparentColorDark : 'rgba(255, 255, 255, 0)';
+const cssVariableVisibility = '--p-internal-flyout-navigation-visibility';
+const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-navigation-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$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+    const { backgroundColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
+    const frostedGlassBackgroundColor = isThemeDark(theme)
+        ? frostedGlassBackgroundColorDark$1
+        : frostedGlassBackgroundColorLight$1;
     return getCss({
         '@global': {
             ':host': {
-                display: 'flex',
+                display: 'block',
                 ...addImportantToEachRule({
-                    // needed for correct alignment of the Porsche Grid within the Flyout
-                    '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
-                    '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
-                    position: 'fixed',
-                    zIndex: FLYOUT_Z_INDEX,
-                    justifyContent: isPositionStart ? 'flex-start' : 'flex-end',
-                    ...(isOpen
-                        ? {
-                            visibility: 'inherit',
-                        }
-                        : {
-                            visibility: 'hidden',
-                            transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong})`,
-                        }),
-                    ...getInsetJssStyle(),
-                    ...getFrostedGlassBackgroundJssStyles(isOpen, 'long', theme),
+                    ...(!isPrimaryScrollerVisible && {
+                        [cssVariableVisibility]: 'hidden',
+                        [cssVariableVisibilityTransitionDuration]: motionDurationLong,
+                    }),
+                    ...getBackdropJssStyle(isPrimaryScrollerVisible, 'long', theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            dialog: {
+                position: 'fixed',
+                ...getInsetJssStyle(),
+                display: 'grid',
+                width: 'auto',
+                height: '100vh',
+                maxWidth: '100vw',
+                maxHeight: '100vh',
+                margin: 0,
+                padding: 0,
+                border: 0,
+                visibility: 'inherit',
+                background: 'none',
+                overflow: 'hidden',
+                ...(isPrimaryScrollerVisible
+                    ? {
+                        transform: 'translate3d(0, 0, 0)',
+                        transition: `${getTransition('transform', 'long', 'in')}`,
+                    }
+                    : {
+                        transform: 'translate3d(-100%, 0, 0)',
+                        transition: `${getTransition('transform', 'long', 'out')}`,
+                    }),
+                [mediaQueryEnhancedView]: {
+                    gridTemplateColumns: `repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${scrollerWidthEnhancedView}) auto`,
+                    gridTemplateRows: '100vh',
+                    insetInlineEnd: 'auto', // to have correct dialog dimensions for ideal transitions
+                },
+                '&:dir(rtl)': {
+                    ...(!isPrimaryScrollerVisible && {
+                        transform: 'translate3d(100%, 0, 0)', // use correct transitions in rtl mode
+                    }),
+                },
+                '&:focus-visible': {
+                    outline: 'none', // ua-style reset
+                },
+                '&::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
+                },
+            },
         },
-        root: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            boxSizing: 'border-box',
-            ...(hasSubFooter && {
-                overflowY: 'auto',
-                overscrollBehaviorY: 'none',
-            }),
-            width: 'var(--p-flyout-width, auto)',
-            height: '100%',
-            minWidth: '320px',
-            maxWidth: 'var(--p-flyout-max-width, 1180px)',
-            color: primaryColor,
-            background: backgroundColor,
-            ...(isOpen
-                ? {
-                    opacity: 1,
-                    transform: 'initial',
-                    transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
-                }
-                : {
-                    opacity: 0,
-                    transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
-                    transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
-                }),
-            boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
-                background: backgroundColorDark,
-            }),
-        },
-        header: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 2,
-            display: 'grid',
-            gridTemplateColumns: `minmax(0, 1fr) ${spacingFluidLarge}`,
-            alignItems: 'flex-start',
-            padding: `${spacingStaticMedium} 0`,
-            paddingInlineStart: spacingFluidLarge,
-            background: backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundColorDark,
-            }),
-        },
-        [headerShadowClass]: {
-            boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px 5px 10px`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                boxShadow: `${scrollShadowColorDark} 0px 5px 10px`,
-            }),
-        },
-        dismiss: {
-            gridArea: '1 / 2',
-            justifySelf: 'center',
-        },
-        content: {
-            padding: contentPadding,
-            position: 'relative',
-            zIndex: 0,
+        scroller: {
+            gridArea: '1/1',
+            overflow: 'auto',
+            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation 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' : 'visible'})`,
+            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, // to ensure scrollbar coloring is optimal for dark theme
-            }),
-            // If sub-footer is used scroll shadows have to be done via JS
-            ...(!hasSubFooter && {
-                overflowY: 'auto',
-                WebkitOverflowScrolling: 'touch',
-                backgroundImage: `linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${shadowColor}, ${transparentColor}), linear-gradient(to bottom, ${shadowColor}, ${transparentColor})`,
-                backgroundPosition: 'bottom center, top center, bottom center, top center',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
-                backgroundAttachment: 'local, local, scroll, scroll',
-                overscrollBehaviorY: 'none',
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    backgroundImage: `linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${scrollShadowColorDark}, ${transparentColorDark}), linear-gradient(to bottom, ${scrollShadowColorDark}, ${transparentColorDark})`,
-                    backgroundColor: backgroundColorDark, // to ensure scrollbar coloring is optimal for dark theme
-                }),
+                backgroundColor: backgroundColorDark,
             }),
-        },
-        ...(hasFooter && {
-            footer: {
+            [mediaQueryEnhancedView]: {
+                visibility: 'inherit',
+                transition: 'initial',
+            },
+            // simulates frosted glass header, to be visually in sync with header of secondary scroller
+            '&::before': {
+                content: '""',
+                display: 'block',
                 position: 'sticky',
-                bottom: 0,
+                top: 0,
                 zIndex: 1,
-                padding: contentPadding,
-                background: backgroundColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
-                }),
-            },
-            [footerShadowClass$1]: {
-                boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px -5px 10px`,
+                height: frostedGlassHeaderHeight,
+                backgroundColor: frostedGlassBackgroundColor,
+                WebkitBackdropFilter: 'blur(8px)',
+                backdropFilter: 'blur(8px)',
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    boxShadow: `${scrollShadowColorDark} 0px -5px 10px`,
+                    backgroundColor: frostedGlassBackgroundColorDark$1,
                 }),
+                [mediaQueryEnhancedView]: {
+                    display: 'none',
+                },
             },
-        }),
-        ...(hasSubFooter && {
-            'sub-footer': {
-                padding: contentPadding,
+        },
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacingFluidXSmall,
+            padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
+            [mediaQueryEnhancedView]: {
+                padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+            },
+        },
+        // header is needed to keep position of dismiss button in sync with header of secondary scroller
+        header: {
+            position: 'relative',
+            zIndex: 3,
+            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: {
+            padding: spacingFluidSmall,
+            [mediaQueryEnhancedView]: {
+                '--p-internal-icon-filter': 'invert(1)',
+                margin: spacingFluidSmall,
+                padding: spacingStaticSmall,
+            },
+        },
+    });
+};
+// TODO: getBackdropJssStyle can be shared with flyout and modal
+/**
+ * Generates JSS styles for a frosted glass background.
+ * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
+ * @param {string} duration - The duration of the transition animation.
+ * @param {Theme} theme - The theme to be used
+ * @returns {JssStyle} - The JSS styles for the frosted glass backdrop.
+ */
+const getBackdropJssStyle = (isVisible, duration, theme) => {
+    return {
+        position: 'fixed',
+        ...getInsetJssStyle(),
+        zIndex: FLYOUT_Z_INDEX,
+        ...(isVisible
+            ? {
+                visibility: 'visible',
+                pointerEvents: 'auto',
+                ...frostedGlassStyle,
+                // TODO: background shading is missing in getThemedColors(theme).backgroundShading
+                background: isThemeDark(theme) ? themeDarkBackgroundShading : themeLightBackgroundShading,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: themeDarkBackgroundShading,
+                }),
+            }
+            : {
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                WebkitBackdropFilter: 'blur(0px)',
+                backdropFilter: 'blur(0px)',
+                background: 'none',
+            }),
+        transition: `${getTransition('background', duration, 'base')}, ${getTransition('backdrop-filter', duration, 'base')}, ${getTransition('-webkit-backdrop-filter', duration, 'base')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationLong})`,
+    };
+};
+const getContentJssStyle = () => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacingFluidXSmall,
+        padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        [mediaQueryEnhancedView]: {
+            padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        },
+    };
+};
+
+const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
+const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
+const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
+    const { primaryColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, 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')}`,
+        };
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            '::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: `${spacingFluidSmall} 0 0`,
+            }),
+            '::slotted(p)': addImportantToEachRule({
+                ...textSmallStyle,
+                margin: 0,
+                color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
+            }),
+            // TODO: how can we easily re-use getHoverStyle() and getFocusStyle() with ::slotted(a) selector?
+            '::slotted(a)': {
+                ...addImportantToEachRule({
+                    ...textSmallStyle,
+                    display: 'block',
+                    textDecoration: 'none',
+                    cursor: 'pointer',
+                    color: primaryColor,
+                    borderRadius: borderRadiusSmall,
+                    marginLeft: `-${spacingStaticXSmall}`,
+                    marginRight: `-${spacingStaticXSmall}`,
+                    padding: `2px ${spacingStaticXSmall}`,
+                    transition: `background var(${cssVariableTransitionDuration}, ${motionDurationShort}) ${motionEasingBase}`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                    }),
+                }),
+            },
+            ...hoverMediaQuery({
+                '::slotted(a:hover)': addImportantToEachRule({
+                    background: hoverColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: hoverColorDark,
+                    }),
+                }),
+            }),
+            '::slotted(a[aria-current])': addImportantToEachRule({
+                background: hoverColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: hoverColorDark,
+                }),
+            }),
+            '::slotted(a:focus)': addImportantToEachRule({
+                outline: `${borderWidthBase} solid ${focusColor}`,
+                outlineOffset: '-2px',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    outlineColor: focusColorDark,
+                }),
+            }),
+            '::slotted(a:focus:not(:focus-visible))': addImportantToEachRule({
+                outlineColor: 'transparent',
+            }),
+        },
+        button: {
+            width: 'auto',
+            padding: spacingFluidSmall,
+            margin: `0 calc(${spacingFluidSmall} * -1)`,
+        },
+        scroller: {
+            position: 'fixed',
+            ...getInsetJssStyle(),
+            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-navigation gets closed
+            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            ...(isSecondaryScrollerVisible
+                ? {
+                    zIndex: 2,
+                    transform: 'translate3d(0, 0, 0)',
+                    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}))`,
+                }),
+            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)`,
+                width: scrollerWidthEnhancedView,
+                transform: addImportantToRule('initial'),
+                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
+                }),
+            },
+        },
+        // 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)',
+            backgroundColor: frostedGlassBackgroundColor,
+            ...fadeInOutTransition,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                backgroundColor: frostedGlassBackgroundColorDark,
+            }),
+            [mediaQueryEnhancedView]: {
+                display: 'none',
+            },
+        },
+        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,
+            }),
+        },
+        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
+    });
+};
+
+const headerShadowClass = 'header--shadow';
+const footerShadowClass$1 = 'footer--shadow';
+const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) => {
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
+    const isPositionStart = position === 'start';
+    const contentPadding = `${spacingStaticMedium} ${spacingFluidLarge}`;
+    const isDark = isThemeDark(theme);
+    const shadowColor = isDark ? scrollShadowColorDark : scrollShadowColor;
+    const transparentColorDark = 'rgba(14, 14, 18, 0)';
+    const transparentColor = isDark ? transparentColorDark : 'rgba(255, 255, 255, 0)';
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'flex',
+                ...addImportantToEachRule({
+                    // needed for correct alignment of the Porsche Grid within the Flyout
+                    '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
+                    '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
+                    position: 'fixed',
+                    zIndex: FLYOUT_Z_INDEX,
+                    justifyContent: isPositionStart ? 'flex-start' : 'flex-end',
+                    ...(isOpen
+                        ? {
+                            visibility: 'inherit',
+                        }
+                        : {
+                            visibility: 'hidden',
+                            transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong})`,
+                        }),
+                    ...getInsetJssStyle(),
+                    ...getFrostedGlassBackgroundJssStyles(isOpen, 'long', theme),
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+        },
+        root: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+            ...(hasSubFooter && {
+                overflowY: 'auto',
+                overscrollBehaviorY: 'none',
+            }),
+            width: 'var(--p-flyout-width, auto)',
+            height: '100%',
+            minWidth: '320px',
+            maxWidth: 'var(--p-flyout-max-width, 1180px)',
+            color: primaryColor,
+            background: backgroundColor,
+            ...(isOpen
+                ? {
+                    opacity: 1,
+                    transform: 'initial',
+                    transition: `${getTransition('opacity', 'long', 'in')}, ${getTransition('transform', 'long', 'in')}`,
+                }
+                : {
+                    opacity: 0,
+                    transform: `translate3d(${isPositionStart ? '-100%' : '100%'}, 0, 0)`,
+                    transition: `${getTransition('opacity', 'short', 'out', 'long')}, ${getTransition('transform', 'long', 'out')}`,
+                }),
+            boxShadow: `${isPositionStart ? '3px' : '-3px'} 0px 30px rgba(0, 0, 0, 0.25)`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                background: backgroundColorDark,
+            }),
+        },
+        header: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 2,
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) ${spacingFluidLarge}`,
+            alignItems: 'flex-start',
+            padding: `${spacingStaticMedium} 0`,
+            paddingInlineStart: spacingFluidLarge,
+            background: backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: backgroundColorDark,
+            }),
+        },
+        [headerShadowClass]: {
+            boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px 5px 10px`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                boxShadow: `${scrollShadowColorDark} 0px 5px 10px`,
+            }),
+        },
+        dismiss: {
+            gridArea: '1 / 2',
+            justifySelf: 'center',
+        },
+        content: {
+            padding: contentPadding,
+            position: 'relative',
+            zIndex: 0,
+            backgroundColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                backgroundColor: backgroundColorDark, // to ensure scrollbar coloring is optimal for dark theme
+            }),
+            // If sub-footer is used scroll shadows have to be done via JS
+            ...(!hasSubFooter && {
+                overflowY: 'auto',
+                WebkitOverflowScrolling: 'touch',
+                backgroundImage: `linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${backgroundColor}, ${backgroundColor}), linear-gradient(to top, ${shadowColor}, ${transparentColor}), linear-gradient(to bottom, ${shadowColor}, ${transparentColor})`,
+                backgroundPosition: 'bottom center, top center, bottom center, top center',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '100% 20px, 100% 20px, 100% 10px, 100% 10px',
+                backgroundAttachment: 'local, local, scroll, scroll',
+                overscrollBehaviorY: 'none',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundImage: `linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${backgroundColorDark}, ${backgroundColorDark}), linear-gradient(to top, ${scrollShadowColorDark}, ${transparentColorDark}), linear-gradient(to bottom, ${scrollShadowColorDark}, ${transparentColorDark})`,
+                    backgroundColor: backgroundColorDark, // to ensure scrollbar coloring is optimal for dark theme
+                }),
+            }),
+        },
+        ...(hasFooter && {
+            footer: {
+                position: 'sticky',
+                bottom: 0,
+                zIndex: 1,
+                padding: contentPadding,
+                background: backgroundColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                }),
+            },
+            [footerShadowClass$1]: {
+                boxShadow: `${isDark ? scrollShadowColorDark : scrollShadowColor} 0px -5px 10px`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    boxShadow: `${scrollShadowColorDark} 0px -5px 10px`,
+                }),
+            },
+        }),
+        ...(hasSubFooter && {
+            'sub-footer': {
+                padding: contentPadding,
             },
         }),
     });
@@ -5758,7 +6171,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$L = (size, offset) => {
+const getComponentCss$M = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5778,19 +6191,21 @@ const getComponentCss$L = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$K = (direction, wrap) => {
+const getComponentCss$L = (direction, wrap) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'flex',
-                flex: 'auto',
-                width: 'auto',
-                marginLeft: gutter,
-                marginRight: gutter,
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-                ...mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))),
-            }),
+                ...addImportantToEachRule({
+                    flex: 'auto',
+                    width: 'auto',
+                    marginLeft: gutter,
+                    marginRight: gutter,
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                    ...mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))),
+                }),
+            },
         },
     });
 };
@@ -5802,7 +6217,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$J = (size, align, color, ellipsis, theme) => {
+const getComponentCss$K = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5864,7 +6279,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$I = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$J = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5953,7 +6368,8 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$H = (color, size, theme) => {
+const cssVariableFilter = '--p-internal-icon-filter';
+const getComponentCss$I = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -5973,9 +6389,9 @@ const getComponentCss$H = (color, size, theme) => {
                 padding: 0,
                 pointerEvents: 'none',
                 ...(!isColorInherit && {
-                    filter: filterMap[theme][color],
+                    filter: `var(${cssVariableFilter},${filterMap[theme][color]})`,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        filter: filterMap.dark[color],
+                        filter: `var(${cssVariableFilter},${filterMap.dark[color]})`,
                     }),
                     ...(isHighContrastMode &&
                         getSchemedHighContrastMediaQuery({
@@ -6004,7 +6420,7 @@ const getComponentCss$H = (color, size, theme) => {
 };
 
 const mediaQueryMinS$1 = getMediaQueryMin('s');
-const mediaQueryMaxS$1 = getMediaQueryMax('s');
+const mediaQueryMaxS$2 = getMediaQueryMax('s');
 const getBackgroundColor = (state, theme) => {
     const { infoSoftColor, successSoftColor, errorSoftColor, warningSoftColor } = getThemedColors(theme);
     const colorMap = {
@@ -6018,7 +6434,7 @@ const getBackgroundColor = (state, theme) => {
 };
 const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
     return {
-        display: 'grid',
+        // display: 'grid', // NOTE: display property is moved into component styled to not apply !important keyword
         // 2 columns for content and optional close button
         gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
         gap: spacingStaticMedium,
@@ -6039,7 +6455,7 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
     };
 };
 const getNotificationIconJssStyle = () => ({
-    [mediaQueryMaxS$1]: {
+    [mediaQueryMaxS$2]: {
         display: 'none',
     },
 });
@@ -6052,15 +6468,18 @@ const getNotificationContentJssStyle = () => ({
     },
 });
 
-const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$G = (state, hasAction, hasClose, theme) => {
+const mediaQueryMaxS$1 = getMediaQueryMax('s');
+const getComponentCss$H = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+            ':host': {
+                display: 'grid',
+                ...addImportantToEachRule({
+                    ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
             h5: headingSmallStyle,
             p: textSmallStyle,
             'h5,p': {
@@ -6075,7 +6494,7 @@ const getComponentCss$G = (state, hasAction, hasClose, theme) => {
         content: getNotificationContentJssStyle(),
         ...(hasAction && {
             action: {
-                [mediaQueryMaxS]: {
+                [mediaQueryMaxS$1]: {
                     gridRowStart: 2,
                 },
             },
@@ -6083,7 +6502,7 @@ const getComponentCss$G = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
@@ -6127,7 +6546,7 @@ const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     const { linkColor } = getHighContrastColors();
@@ -6187,7 +6606,7 @@ const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 // because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -6196,44 +6615,183 @@ const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
             [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
                 margin: addImportantToRule(0),
             },
-        },
-        content: {
-            ...tileBaseStyles.content,
+        },
+        content: {
+            ...tileBaseStyles.content,
+            flexDirection: 'column',
+            bottom: 0,
+            padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
+            ...gradientToTopStyle,
+        },
+        signature: {
+            position: 'absolute',
+            top: spacingFluidMedium,
+            left: spacingFluidMedium,
+            right: spacingFluidMedium,
+            display: 'flex',
+        },
+        heading: {
+            margin: 0,
+            ...textLargeStyle,
+            hyphens: 'inherit',
+            ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
+        },
+        ...(hasDescription && {
+            description: {
+                margin: '-12px 0 0 ',
+                ...textSmallStyle,
+                hyphens: 'inherit',
+            },
+        }),
+        'link-group': {
+            display: 'flex',
+            width: '100%',
+            gap: spacingFluidSmall,
+            ...buildResponsiveStyles(direction, getGroupDirectionJssStyles),
+        },
+        'link-overlay': {
+            // covers entire tile, used for expanded click-area only
+            position: 'fixed',
+            ...getInsetJssStyle(),
+        },
+    });
+};
+
+const slottedAnchorSelector = `a[slot='${anchorSlot}']`;
+const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                position: 'relative',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...addImportantToEachRule({
+                '::slotted': {
+                    '&(img), &(picture)': {
+                        display: 'block',
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        overflow: 'hidden',
+                        borderRadius: borderRadiusLarge,
+                    },
+                    ...(hasSlottedAnchor && {
+                        [`&(${slottedAnchorSelector})`]: {
+                            position: 'absolute',
+                            borderRadius: borderRadiusMedium,
+                            ...getInsetJssStyle(),
+                            zIndex: 1,
+                            textIndent: '-999999px', // Hide anchor label visually but still usable for a11y
+                        },
+                        // TODO: Refactor getFocusStyles to support slotted selector
+                        [`&(${slottedAnchorSelector}:focus)`]: {
+                            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+                            outlineOffset: '2px',
+                        },
+                        [`&(${slottedAnchorSelector}:focus:not(:focus-visible))`]: {
+                            outlineColor: 'transparent',
+                        },
+                    }),
+                },
+            }),
+        },
+        ...(!hasSlottedAnchor && {
+            'link-overlay': {
+                position: 'absolute',
+                ...getInsetJssStyle(),
+                ...getFocusStyle({ borderRadius: 'medium' }),
+            },
+        }),
+        root: {
+            display: 'flex',
             flexDirection: 'column',
-            bottom: 0,
-            padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
-            ...gradientToTopStyle,
+            aspectRatio: '3 / 4',
+            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
+                aspectRatio: ratio.replace(':', ' / '),
+            })),
+            overflow: 'hidden',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusMedium,
+            padding: spacingFluidSmall,
+            color: primaryColor,
+            backgroundColor: backgroundSurfaceColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                backgroundColor: backgroundSurfaceColorDark,
+            }),
+            ...hoverMediaQuery({
+                '&:hover .image-container': {
+                    transform: 'scale3d(1.05,1.05,1.05)',
+                },
+            }),
         },
-        signature: {
-            position: 'absolute',
-            top: spacingFluidMedium,
-            left: spacingFluidMedium,
-            right: spacingFluidMedium,
+        header: {
             display: 'flex',
+            justifyContent: 'space-between',
+            fontSize: fontSizeTextXSmall,
+            [`& slot[name="${headerSlot}"]`]: {
+                display: 'block', // To ensure button positioning when slot is unused
+            },
         },
-        heading: {
-            margin: 0,
-            ...textLargeStyle,
-            hyphens: 'inherit',
-            ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
-        },
-        ...(hasDescription && {
-            description: {
-                margin: '-12px 0 0 ',
-                ...textSmallStyle,
-                hyphens: 'inherit',
+        ...(hasLikeButton && {
+            'like-button': {
+                height: 'fit-content',
+                position: 'relative',
+                zIndex: 2,
+                ...hoverMediaQuery({
+                    '&:hover': {
+                        cursor: 'pointer',
+                    },
+                }),
             },
         }),
-        'link-group': {
+        'text-container': {
             display: 'flex',
-            width: '100%',
-            gap: spacingFluidSmall,
-            ...buildResponsiveStyles(direction, getGroupDirectionJssStyles),
+            justifyContent: 'center',
+            flexDirection: 'column',
+            margin: 'auto',
         },
-        'link-overlay': {
-            // covers entire tile, used for expanded click-area only
-            position: 'fixed',
-            ...getInsetJssStyle(),
+        text: {
+            textAlign: 'center',
+            margin: 0,
+            '&__heading': {
+                ...headingSmallStyle,
+                paddingBottom: '2px',
+                minHeight: `calc(${fontLineHeight} * 2)`,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+            },
+            '&__price, &__description': {
+                fontWeight: fontWeightRegular,
+            },
+            '&__price': {
+                ...textXSmallStyle,
+            },
+            '&__description': {
+                ...textXXSmallStyle,
+                color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
+            },
+        },
+        'image-container': {
+            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall} auto`,
+            padding: 0,
+            [getMediaQueryMin('s')]: {
+                padding: `0 ${spacingFluidMedium}`,
+            },
+            overflow: 'hidden',
+            aspectRatio: '8 / 9',
+            transition: getTransition('transform', 'moderate'),
+            maxHeight: '100%',
         },
     });
 };
@@ -6356,11 +6914,12 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
     return getCss({
         '@global': {
             ':host': {
+                display: 'flex',
+                overflowY: 'auto',
                 ...addImportantToEachRule({
                     position: 'fixed',
                     ...getInsetJssStyle(),
                     zIndex: MODAL_Z_INDEX,
-                    display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     flexWrap: 'wrap',
@@ -6376,7 +6935,6 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                     ...hostHiddenStyles,
                     ...getFrostedGlassBackgroundJssStyles(isOpen, duration, theme),
                 }),
-                overflowY: 'auto', // overrideable
             },
             '::slotted': addImportantToEachRule(mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
@@ -6939,6 +7497,7 @@ const getListStyles$1 = (isOpen, direction, theme) => {
 };
 
 const mediaQueryMinS = getMediaQueryMin('s');
+const mediaQueryMaxS = getMediaQueryMax('s');
 // button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
 // and text scale 200% works (almost) on mobile viewports too
 const buttonSize = `clamp(36px, calc(${fontLineHeight} + 10vw - 20px), 40px)`;
@@ -6946,7 +7505,8 @@ const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
-const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
+const hiddenStyle = { display: 'none' };
+const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6962,9 +7522,6 @@ const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
                 display: 'flex',
                 justifyContent: 'center',
                 userSelect: 'none',
-                ...buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
-                    counterReset: `size ${n}`,
-                })),
             },
             ul: {
                 display: 'flex',
@@ -6977,13 +7534,43 @@ const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
             },
             li: {
                 listStyleType: 'none',
-                [mediaQueryMinS]: {
-                    '&:first-child': {
-                        marginInlineEnd: spacingStaticSmall,
-                    },
-                    '&:last-child': {
-                        marginInlineStart: spacingStaticSmall,
+                ...(pageTotal > 5 && {
+                    // max 5 items including ellipsis at the same time on mobile
+                    [mediaQueryMaxS]: {
+                        [activePage < 4
+                            ? // we are at the start, so let's hide start ellipsis and 2 items before end ellipsis
+                                '&.ellip-start,&:nth-child(6),&:nth-child(7),&:not(.ellip):nth-child(8)'
+                            : pageTotal - activePage < 3
+                                ? // we are at the end, so let's hide end ellipsis and 2 items after start ellipsis
+                                    '&.ellip-end, &.ellip-start + &:not(.current), &.ellip-start + &:not(.current) + &:not(.current)'
+                                : // we are at in the middle, so let's hide elements after start and before end ellipsis
+                                    '&.ellip-start + &:not(.current), &.current-1, &.current\\+1, &.current\\+1 + &:not(.ellip)']: hiddenStyle,
+                        // without last page we need to adjust end page handling
+                        ...(!showLastPage &&
+                            (pageTotal - activePage < 2
+                                ? { [`&.current-2${pageTotal - activePage === 1 ? ',&.current-1' : ''}`]: hiddenStyle }
+                                : activePage > 2 && {
+                                    '&.current\\+1,&.current\\+2': hiddenStyle,
+                                    '&.ellip-end': { display: 'initial' },
+                                })),
                     },
+                }),
+                [mediaQueryMinS]: {
+                    // prev
+                    '&:first-child': { marginInlineEnd: spacingStaticSmall },
+                    // next
+                    '&:last-child': { marginInlineStart: spacingStaticSmall },
+                    ...(pageTotal < 8
+                        ? { '&.ellip': hiddenStyle }
+                        : // max 7 items including ellipsis at the same time on tablet
+                            {
+                                // we are at the start, so let's hide start ellipsis
+                                ...(activePage <= 4 && { '&.ellip-start': hiddenStyle }),
+                                // we are at the end, so let's hide end ellipsis
+                                ...(pageTotal - activePage < 4 && { '&.ellip-end:nth-last-child(3)': hiddenStyle }),
+                                // we are at the end without last page, so let's hide end ellipsis
+                                ...(pageTotal - activePage < 3 && { '&.ellip-end:nth-last-child(2)': hiddenStyle }),
+                            }),
                 },
             },
             span: {
@@ -7032,7 +7619,7 @@ const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
                         color: primaryColorDark,
                         borderColor: primaryColorDark,
                     }),
-                    '&:not(.ellipsis):focus::before': getInsetJssStyle(-6),
+                    '&:not(.ellipsis):focus::before': getInsetJssStyle(-6), // adjust for missing 2px border
                 },
                 '&[aria-disabled]': {
                     ...disabledCursorStyle,
@@ -7239,13 +7826,13 @@ const getComponentCss$u = (direction, isNative, theme) => {
     return getCss({
         '@global': {
             ':host': {
+                display: 'inline-block',
+                verticalAlign: 'top',
                 ...addImportantToEachRule({
                     position: 'relative',
-                    display: 'inline-block',
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
-                verticalAlign: 'top',
             },
             p: {
                 ...textSmallStyle,
@@ -7647,11 +8234,13 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                outline: 0,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    outline: 0,
+                    ...hostHiddenStyles,
+                }),
+            },
             // All width relevant styling has to be kept in sync with the tempDiv of the p-segmented-control utils
             button: {
                 position: 'relative',
@@ -7733,16 +8322,18 @@ const getComponentCss$q = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'grid',
-                gridAutoRows: '1fr',
-                ...buildResponsiveStyles(columns, (col) => ({
-                    gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
-                })),
-                gap: '6px',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    gridAutoRows: '1fr',
+                    ...buildResponsiveStyles(columns, (col) => ({
+                        gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+                    })),
+                    gap: '6px',
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
         },
     });
 };
@@ -8022,7 +8613,7 @@ const getListStyles = (direction, theme) => {
         },
     };
 };
-const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) => {
+const getComponentCss$p = (direction, isOpen, state, disabled, filter, isNativePopover, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8035,6 +8626,23 @@ const getComponentCss$p = (direction, isOpen, state, disabled, filter, theme) =>
         'sr-text': {
             display: 'none',
         },
+        ...(isNativePopover && {
+            popover: {
+                position: 'absolute',
+                bottom: 'auto',
+                border: 'none',
+                background: 'none',
+                pointerEvents: 'all',
+                padding: 0,
+                margin: 0,
+                overflow: 'initial',
+                height: 'auto',
+                maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`,
+                '&:-internal-popover-in-top-layer::backdrop': {
+                    display: 'none',
+                },
+            },
+        }),
     }, filter
         ? getFilterStyles(direction, isOpen, state, disabled, theme)
         : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
@@ -8114,12 +8722,14 @@ const getComponentCss$n = (size, theme) => {
     const lastHighContrastStrokeColor = isHighContrastMode && canvasColor;
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'inline-flex',
-                verticalAlign: 'top',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    verticalAlign: 'top',
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
             svg: {
                 display: 'block',
                 fill: 'none',
@@ -8358,16 +8968,20 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
     const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                outline: 0,
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
+            ':host': {
                 ...buildResponsiveStyles(stretch, (stretchValue) => ({
                     display: stretchValue ? 'block' : 'inline-block',
-                    width: stretchValue ? '100%' : 'auto',
-                    ...(!stretchValue && { verticalAlign: 'top' }),
                 })),
-            }),
+                ...addImportantToEachRule({
+                    outline: 0,
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                    ...buildResponsiveStyles(stretch, (stretchValue) => ({
+                        width: stretchValue ? '100%' : 'auto',
+                        ...(!stretchValue && { verticalAlign: 'top' }),
+                    })),
+                }),
+            },
         },
         root: {
             display: 'flex',
@@ -8478,10 +9092,10 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
 const getComponentCss$j = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'table-row-group',
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
         },
     });
 };
@@ -8490,14 +9104,14 @@ const getComponentCss$i = (multiline) => {
     return getCss({
         '@global': {
             ':host': {
+                display: 'table-cell',
+                verticalAlign: 'middle',
                 ...addImportantToEachRule({
-                    display: 'table-cell',
                     padding: spacingFluidSmall,
                     margin: 0,
                     whiteSpace: multiline ? 'normal' : 'nowrap',
                     ...hostHiddenStyles,
                 }),
-                verticalAlign: 'middle',
             },
         },
     });
@@ -8516,17 +9130,19 @@ const getComponentCss$h = (theme) => {
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = doGetThemedColors('dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...textSmallStyle,
-                color: primaryColor,
-                textAlign: 'start',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
+                ...addImportantToEachRule({
+                    ...textSmallStyle,
+                    color: primaryColor,
+                    textAlign: 'start',
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: primaryColorDark,
+                    }),
                 }),
-            }),
+            },
             '::slotted(*)': addImportantToEachRule({
                 [cssVariableTableHoverColor]: hoverColor,
                 [cssVariableTableBorderColor]: contrastLowColor,
@@ -8563,13 +9179,15 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'table-cell',
-                padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
-                verticalAlign: 'bottom',
-                whiteSpace: multiline ? 'normal' : 'nowrap',
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
+                    verticalAlign: 'bottom',
+                    whiteSpace: multiline ? 'normal' : 'nowrap',
+                    ...hostHiddenStyles,
+                }),
+            },
             ...(sortable
                 ? {
                     button: {
@@ -8643,10 +9261,10 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
 const getComponentCss$f = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'table-row',
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule(hostHiddenStyles),
+            },
         },
     });
 };
@@ -8654,13 +9272,15 @@ const getComponentCss$f = () => {
 const getComponentCss$e = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'table-header-group',
-                fontSize: fontSizeTextXSmall,
-                lineHeight: fontLineHeight,
-                fontWeight: fontWeightSemiBold,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    fontSize: fontSizeTextXSmall,
+                    lineHeight: fontLineHeight,
+                    fontWeight: fontWeightSemiBold,
+                    ...hostHiddenStyles,
+                }),
+            },
         },
     });
 };
@@ -8668,19 +9288,21 @@ const getComponentCss$e = () => {
 const getComponentCss$d = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'table-row',
-                borderTop: `1px solid var(${cssVariableTableBorderColor})`,
-                borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
-                transition: getTransition('background'),
-                ...hostHiddenStyles,
-                ...hoverMediaQuery({
-                    '&(:hover)': {
-                        // ...frostedGlassStyle, // will result in not smooth transition when applied
-                        background: `var(${cssVariableTableHoverColor})`,
-                    },
+                ...addImportantToEachRule({
+                    borderTop: `1px solid var(${cssVariableTableBorderColor})`,
+                    borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
+                    transition: getTransition('background'),
+                    ...hostHiddenStyles,
+                    ...hoverMediaQuery({
+                        '&(:hover)': {
+                            // ...frostedGlassStyle, // will result in not smooth transition when applied
+                            background: `var(${cssVariableTableHoverColor})`,
+                        },
+                    }),
                 }),
-            }),
+            },
         },
     });
 };
@@ -8824,26 +9446,28 @@ const getComponentCss$b = (theme) => {
     const { primaryColor: primaryColorDark, focusColor: focusColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                position: 'relative',
-                color: primaryColor,
-                outline: 0,
-                ...hostHiddenStyles,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
-                '&(:focus:focus-visible)::before': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(-4),
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    borderRadius: borderRadiusSmall,
+                ...addImportantToEachRule({
+                    position: 'relative',
+                    color: primaryColor,
+                    outline: 0,
+                    ...hostHiddenStyles,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
+                        color: primaryColorDark,
                     }),
-                },
-            }),
+                    '&(:focus:focus-visible)::before': {
+                        content: '""',
+                        position: 'absolute',
+                        ...getInsetJssStyle(-4),
+                        border: `${borderWidthBase} solid ${focusColor}`,
+                        borderRadius: borderRadiusSmall,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: focusColorDark,
+                        }),
+                    },
+                }),
+            },
         },
     });
 };
@@ -9081,14 +9705,14 @@ const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
 
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
 const cssVariableInputPaddingEnd = '--p-internal-text-field-input-padding-end';
-const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, theme) => {
+const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, showPasswordToggle, isWithinForm, hasSubmitButton, theme) => {
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
     const isNumber = isType(inputType, 'number');
     const isCalendar = isType(inputType, 'date') || isType(inputType, 'week') || isType(inputType, 'month');
     const isTime = isType(inputType, 'time');
     const isSearchOrPassword = isSearch || (isPassword && showPasswordToggle);
-    const isSearchWithoutForm = isSearch && !isWithinForm;
+    const isSearchWithoutFormOrSubmitButton = isSearch && (!isWithinForm || !hasSubmitButton);
     const isSearchWithForm = isSearch && isWithinForm;
     const isCalendarOrTimeWithCustomIndicator = showCustomCalendarOrTimeIndicator(isCalendar, isTime);
     return getCss({
@@ -9121,11 +9745,11 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
             }),
         },
         root: {
-            [cssVariableInputPaddingStart]: isSearchWithoutForm
+            [cssVariableInputPaddingStart]: isSearchWithoutFormOrSubmitButton
                 ? getCalculatedFormElementPaddingHorizontal(1)
                 : formElementPaddingHorizontal,
             [cssVariableInputPaddingEnd]: isSearchOrPassword || isCalendarOrTimeWithCustomIndicator
-                ? getCalculatedFormElementPaddingHorizontal(isSearchWithForm ? 2 : 1)
+                ? getCalculatedFormElementPaddingHorizontal(isSearchWithForm && hasSubmitButton ? 2 : 1)
                 : formElementPaddingHorizontal,
             display: 'grid',
             gap: spacingStaticXSmall,
@@ -9146,7 +9770,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                 },
             },
         }),
-        ...(isSearchWithoutForm && {
+        ...(isSearchWithoutFormOrSubmitButton && {
             // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf) like done for unit class
             icon: {
                 gridArea: '1/2',
@@ -9233,25 +9857,29 @@ const getComponentCss$6 = (type, theme) => {
 
 const getComponentCss$5 = () => {
     return getCss({
-        '@global': addImportantToEachRule({
+        '@global': {
             ':host': {
                 display: 'grid',
-                gridTemplateColumns: `var(${cssVariablePseudoSpace}) 1fr`,
-                columnGap: spacingStaticMedium,
-                font: 'inherit',
-                color: 'inherit',
-                ...hostHiddenStyles,
-            },
-            '::slotted(*)': {
-                [cssVariableUnorderedGridColumn]: '.625rem',
-                [cssVariableUnorderedPseudoContent]: '"–"',
-                [cssVariableOrderedGridColumn]: '2rem',
-                [cssVariableOrderedPseudoSuffix]: '""', // don't show ::before suffix "." (nested ordered list)
-            },
-            '::slotted(*:last-child)': {
-                gridColumn: 2,
+                ...addImportantToEachRule({
+                    gridTemplateColumns: `var(${cssVariablePseudoSpace}) 1fr`,
+                    columnGap: spacingStaticMedium,
+                    font: 'inherit',
+                    color: 'inherit',
+                    ...hostHiddenStyles,
+                }),
             },
-        }),
+            ...addImportantToEachRule({
+                '::slotted(*)': {
+                    [cssVariableUnorderedGridColumn]: '.625rem',
+                    [cssVariableUnorderedPseudoContent]: '"–"',
+                    [cssVariableOrderedGridColumn]: '2rem',
+                    [cssVariableOrderedPseudoSuffix]: '""', // don't show ::before suffix "." (nested ordered list)
+                },
+                '::slotted(*:last-child)': {
+                    gridColumn: 2,
+                },
+            }),
+        },
     });
 };
 
@@ -9440,4 +10068,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$10 as getAccordionCss, getComponentCss$$ as getBannerCss, getComponentCss$X as getButtonCss, getComponentCss$_ as getButtonGroupCss, getComponentCss$Z as getButtonPureCss, getComponentCss$Y as getButtonTileCss, getComponentCss$W as getCarouselCss, getComponentCss$V as getCheckboxWrapperCss, getComponentCss$U as getContentWrapperCss, getComponentCss$T as getCrestCss, getComponentCss$S as getDisplayCss, getComponentCss$R as getDividerCss, getComponentCss$P as getFieldsetCss, getComponentCss$Q as getFieldsetWrapperCss, getComponentCss$N as getFlexCss, getComponentCss$O as getFlexItemCss, getComponentCss$M as getFlyoutCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$K as getGridCss, getComponentCss$L as getGridItemCss, getComponentCss$J as getHeadingCss, getComponentCss$I as getHeadlineCss, getComponentCss$H as getIconCss, getComponentCss$G as getInlineNotificationCss, getComponentCss$E as getLinkCss, getComponentCss$F as getLinkPureCss, getComponentCss$E as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$D as getLinkTileModelSignatureCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$13 as getAccordionCss, getComponentCss$12 as getBannerCss, getComponentCss$_ as getButtonCss, getComponentCss$11 as getButtonGroupCss, getComponentCss$10 as getButtonPureCss, getComponentCss$$ as getButtonTileCss, getComponentCss$Z as getCarouselCss, getComponentCss$Y as getCheckboxWrapperCss, getComponentCss$X as getContentWrapperCss, getComponentCss$W as getCrestCss, getComponentCss$V as getDisplayCss, getComponentCss$U as getDividerCss, getComponentCss$S as getFieldsetCss, getComponentCss$T as getFieldsetWrapperCss, getComponentCss$Q as getFlexCss, getComponentCss$R as getFlexItemCss, getComponentCss$N as getFlyoutCss, getComponentCss$P as getFlyoutNavigationCss, getComponentCss$O as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$L as getGridCss, getComponentCss$M as getGridItemCss, getComponentCss$K as getHeadingCss, getComponentCss$J as getHeadlineCss, getComponentCss$I as getIconCss, getComponentCss$H as getInlineNotificationCss, getComponentCss$F as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$F as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$E as getLinkTileModelSignatureCss, getComponentCss$D as getLinkTileProductCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };