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

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;
@@ -4056,22 +4056,25 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$10 = (size, compact, open, theme) => {
+const getComponentCss$12 = (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 +4199,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$11 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4259,7 +4262,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$_ = (direction) => {
+const getComponentCss$10 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4413,7 +4416,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$Z = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$$ = (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 +4593,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$Y = (isDisabledOrLoading, ...args) => {
+const getComponentCss$_ = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4726,7 +4729,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$X = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$Z = (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 +4801,57 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$W = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$Y = (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 +5209,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$X = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5300,7 +5307,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$U = (width) => {
+const getComponentCss$W = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5342,7 +5349,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$T = () => {
+const getComponentCss$V = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5430,7 +5437,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$S = (size, align, color, ellipsis, theme) => {
+const getComponentCss$U = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5450,7 +5457,7 @@ const getComponentCss$S = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$R = (color, orientation, theme) => {
+const getComponentCss$T = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5493,14 +5500,16 @@ const getComponentCss$R = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$Q = (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,
@@ -5527,14 +5536,16 @@ const getComponentCss$Q = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$P = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$R = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
+            ':host': {
                 display: 'block',
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
             fieldset: {
                 margin: 0,
                 padding: 0,
@@ -5571,7 +5582,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$Q = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5593,23 +5604,393 @@ const getComponentCss$O = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$N = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$P = (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 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$O = (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: 'block',
+                ...addImportantToEachRule({
+                    ...(!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
+                },
+            },
+        },
+        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,
+            }),
+            [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',
+                top: 0,
+                zIndex: 1,
+                height: frostedGlassHeaderHeight,
+                backgroundColor: frostedGlassBackgroundColor,
+                WebkitBackdropFilter: 'blur(8px)',
+                backdropFilter: 'blur(8px)',
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundColor: frostedGlassBackgroundColorDark$1,
+                }),
+                [mediaQueryEnhancedView]: {
+                    display: 'none',
+                },
+            },
+        },
+        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$N = (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';
@@ -5781,16 +6162,18 @@ const gutter = `calc(${gridGap} / -2)`;
 const getComponentCss$K = (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 }))),
+                }),
+            },
         },
     });
 };
@@ -5953,6 +6336,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
+const cssVariableFilter = '--p-internal-icon-filter';
 const getComponentCss$H = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
@@ -5973,9 +6357,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 +6388,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 +6402,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 +6423,7 @@ const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
     };
 };
 const getNotificationIconJssStyle = () => ({
-    [mediaQueryMaxS$1]: {
+    [mediaQueryMaxS$2]: {
         display: 'none',
     },
 });
@@ -6052,15 +6436,18 @@ const getNotificationContentJssStyle = () => ({
     },
 });
 
-const mediaQueryMaxS = getMediaQueryMax('s');
+const mediaQueryMaxS$1 = getMediaQueryMax('s');
 const getComponentCss$G = (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 +6462,7 @@ const getComponentCss$G = (state, hasAction, hasClose, theme) => {
         content: getNotificationContentJssStyle(),
         ...(hasAction && {
             action: {
-                [mediaQueryMaxS]: {
+                [mediaQueryMaxS$1]: {
                     gridRowStart: 2,
                 },
             },
@@ -6356,11 +6743,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 +6764,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 +7326,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 +7334,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 +7351,6 @@ const getComponentCss$w = (maxNumberOfPageLinks, theme) => {
                 display: 'flex',
                 justifyContent: 'center',
                 userSelect: 'none',
-                ...buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
-                    counterReset: `size ${n}`,
-                })),
             },
             ul: {
                 display: 'flex',
@@ -6977,13 +7363,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 +7448,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 +7655,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 +8063,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 +8151,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 +8442,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 +8455,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 +8551,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 +8797,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 +8921,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 +8933,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 +8959,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 +9008,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 +9090,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 +9101,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 +9117,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 +9275,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 +9534,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 +9574,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 +9599,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 +9686,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 +9897,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$12 as getAccordionCss, getComponentCss$11 as getBannerCss, getComponentCss$Z as getButtonCss, getComponentCss$10 as getButtonGroupCss, getComponentCss$$ as getButtonPureCss, getComponentCss$_ as getButtonTileCss, getComponentCss$Y as getCarouselCss, getComponentCss$X as getCheckboxWrapperCss, getComponentCss$W as getContentWrapperCss, getComponentCss$V as getCrestCss, getComponentCss$U as getDisplayCss, getComponentCss$T as getDividerCss, getComponentCss$R as getFieldsetCss, getComponentCss$S as getFieldsetWrapperCss, getComponentCss$P as getFlexCss, getComponentCss$Q as getFlexItemCss, getComponentCss$M as getFlyoutCss, getComponentCss$O as getFlyoutNavigationCss, getComponentCss$N as getFlyoutNavigationItemCss, 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 };