@porsche-design-system/components-react 3.27.3 → 3.28.0-rc.1

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

@@ -3934,7 +3934,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1a = (size, compact, open, theme, sticky) => {
+const getComponentCss$1c = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4102,7 +4102,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$19 = (isOpen) => {
+const getComponentCss$1b = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4174,7 +4174,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$18 = (direction) => {
+const getComponentCss$1a = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4327,7 +4327,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$17 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$19 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4365,7 +4365,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$16 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$18 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4635,7 +4635,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$15 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$17 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, 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');
@@ -4699,9 +4699,9 @@ const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
 const sidebarStartWidth = `var(${cssVarSidebarStartWidth},320px)`;
 const sidebarEndWidth = `var(${cssVarSidebarEndWidth},320px)`;
 // private css variables
-const cssVarColorPrimary = '--_a';
-const cssVarColorBackgroundBase = '--_b';
-const cssVarColorBackgroundSurface = '--_c';
+const cssVarColorPrimary$1 = '--_a';
+const cssVarColorBackgroundBase$1 = '--_b';
+const cssVarColorBackgroundSurface$1 = '--_c';
 const cssVarColorContrastLow = '--_d';
 const cssVarColorFooterGradient = '--_e';
 const cssVarTemplateSidebarStartWidth = '--_f';
@@ -4711,7 +4711,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$16 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -4779,9 +4779,9 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
             },
         },
         root: {
-            [cssVarColorPrimary]: primaryColor,
-            [cssVarColorBackgroundBase]: backgroundColor,
-            [cssVarColorBackgroundSurface]: backgroundSurfaceColor,
+            [cssVarColorPrimary$1]: primaryColor,
+            [cssVarColorBackgroundBase$1]: backgroundColor,
+            [cssVarColorBackgroundSurface$1]: backgroundSurfaceColor,
             [cssVarColorContrastLow]: contrastLowColor,
             [cssVarColorFooterGradient]: `0,0%,${isThemeDark(theme) ? '0%' : '100%'}`,
             [cssVarTemplateSidebarStartWidth]: isSidebarStartOpen ? sidebarStartWidth : '0px',
@@ -4792,13 +4792,13 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
             minWidth: '320px',
             minHeight: '100dvh',
             font: textSmallStyle.font,
-            color: `var(${cssVarColorPrimary})`,
-            background: `var(${cssVarColorBackgroundBase})`,
+            color: `var(${cssVarColorPrimary$1})`,
+            background: `var(${cssVarColorBackgroundBase$1})`,
             transition: getTransition('grid-template-columns'),
             ...prefersColorSchemeDarkMediaQuery(theme, {
-                [cssVarColorPrimary]: primaryColorDark,
-                [cssVarColorBackgroundBase]: backgroundColorDark,
-                [cssVarColorBackgroundSurface]: backgroundSurfaceColorDark,
+                [cssVarColorPrimary$1]: primaryColorDark,
+                [cssVarColorBackgroundBase$1]: backgroundColorDark,
+                [cssVarColorBackgroundSurface$1]: backgroundSurfaceColorDark,
                 [cssVarColorContrastLow]: contrastLowColorDark,
                 [cssVarColorFooterGradient]: '0,0%,0%',
             }),
@@ -4816,7 +4816,7 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     zIndex: 2,
                     gridArea: '1/2/-1/3',
                     boxShadow: `1px 0 0 0 var(${cssVarColorContrastLow})`,
-                    background: `var(${cssVarColorBackgroundBase})`,
+                    background: `var(${cssVarColorBackgroundBase$1})`,
                     pointerEvents: 'none',
                 },
             },
@@ -4956,7 +4956,7 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 gridArea: 'sidebar-start',
                 justifySelf: 'flex-end',
                 width: sidebarStartWidth,
-                backgroundColor: `var(${cssVarColorBackgroundSurface})`,
+                backgroundColor: `var(${cssVarColorBackgroundSurface$1})`,
                 '&::before': {
                     content: '""',
                     zIndex: -1,
@@ -4968,7 +4968,7 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     pointerEvents: 'none',
                     top: 0,
                     borderTopLeftRadius: '16px',
-                    boxShadow: `0 -16px 0 0 var(${cssVarColorBackgroundSurface})`,
+                    boxShadow: `0 -16px 0 0 var(${cssVarColorBackgroundSurface$1})`,
                 },
             },
             '&--end': {
@@ -4976,7 +4976,7 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 gridArea: 'sidebar-end',
                 justifySelf: 'flex-end',
                 width: sidebarEndWidth,
-                backgroundColor: `var(${cssVarColorBackgroundBase})`,
+                backgroundColor: `var(${cssVarColorBackgroundBase$1})`,
             },
             '&__scroller': {
                 position: 'absolute',
@@ -4998,13 +4998,13 @@ const getComponentCss$14 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 '&--start': {
                     justifyContent: 'flex-start',
                     '&::before': {
-                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundSurface}) 0%,var(${cssVarColorBackgroundSurface}) 65%,transparent 100%)`,
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundSurface$1}) 0%,var(${cssVarColorBackgroundSurface$1}) 65%,transparent 100%)`,
                     },
                 },
                 '&--end': {
                     justifyContent: 'space-between',
                     '&::before': {
-                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 65%,transparent 100%)`,
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase$1}) 0%,var(${cssVarColorBackgroundBase$1}) 65%,transparent 100%)`,
                     },
                 },
                 '&::before': {
@@ -5087,7 +5087,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$13 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$15 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5468,14 +5468,14 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
     };
 };
 
-const getInlineSVGBackgroundImage = (path) => {
-    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
-};
-
 const escapeHashCharacter = (colorString) => {
     return colorString.replace('#', '%23');
 };
 
+const getInlineSVGBackgroundImage = (path) => {
+    return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
+};
+
 const getFunctionalComponentRequiredStyles = () => {
     return {
         required: {
@@ -5541,7 +5541,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$12 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$14 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5644,7 +5644,7 @@ const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
 const cssVarInternalCheckboxScaling = '--p-internal-checkbox-scaling';
-const getComponentCss$11 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$13 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5885,7 +5885,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$10 = (width) => {
+const getComponentCss$12 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5927,7 +5927,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$$ = () => {
+const getComponentCss$11 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6026,7 +6026,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
+const getComponentCss$10 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6044,7 +6044,7 @@ const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$Z = (color, orientation, theme) => {
+const getComponentCss$$ = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6087,133 +6087,15 @@ const getComponentCss$Z = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$Y = (state, labelSize, hasLabel, theme) => {
-    return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    ...colorSchemeStyles,
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            fieldset: {
-                margin: 0,
-                padding: 0,
-                border: 'none',
-            },
-            ...(hasLabel && {
-                legend: {
-                    margin: `0 0 ${spacingStaticMedium}`,
-                    padding: 0,
-                    color: getThemedColors(theme).primaryColor,
-                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: getThemedColors('dark').primaryColor,
-                    }),
-                },
-            }),
-        },
-        ...getFunctionalComponentRequiredStyles(),
-        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
-            message: {
-                marginTop: spacingStaticMedium,
-            },
-        }),
-    });
-};
-
-const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
-    return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    ...colorSchemeStyles,
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            fieldset: {
-                margin: 0,
-                padding: 0,
-                border: 'none',
-            },
-            ...(hasLabel && {
-                legend: {
-                    margin: `0 0 ${spacingStaticMedium}`,
-                    padding: 0,
-                    color: getThemedColors(theme).primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: getThemedColors('dark').primaryColor,
-                    }),
-                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
-                },
-            }),
-        },
-        ...getFunctionalComponentRequiredStyles(),
-        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
-            message: {
-                marginTop: spacingStaticMedium,
-            },
-        }),
-    });
-};
-
-const flexItemWidths = {
-    none: 0,
-    'one-quarter': 25,
-    'one-third': 33.333333,
-    half: 50,
-    'two-thirds': 66.666667,
-    'three-quarters': 75,
-    full: 100,
-    auto: 'auto',
-};
-const getComponentCss$W = (width, offset, alignSelf, grow, shrink, flex) => {
-    return getCss({
-        '@global': {
-            ':host': addImportantToEachRule({
-                boxSizing: 'border-box',
-                ...hostHiddenStyles,
-                ...mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
-                    width: `${flexItemWidths[widthResponsive]}%`,
-                })), buildResponsiveStyles(offset, (offsetResponsive) => ({
-                    marginLeft: `${flexItemWidths[offsetResponsive]}%`,
-                })), buildResponsiveStyles(alignSelf, (alignSelfResponsive) => ({
-                    alignSelf: alignSelfResponsive,
-                })), flex !== 'initial' // flex shorthand conflicts with grow and shrink, which means even default grow or shrink props would override flex
-                    ? buildResponsiveStyles(flex, (flexResponsive) => ({
-                        flex: flexResponsive === 'equal' ? '1 1 0' : flexResponsive,
-                    }))
-                    : mergeDeep(buildResponsiveStyles(grow, (flexGrow) => ({ flexGrow })), buildResponsiveStyles(shrink, (flexShrink) => ({ flexShrink })))),
-            }),
-        },
-    });
-};
-
-const getComponentCss$V = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
-    return getCss({
-        '@global': {
-            ':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,
-                })))),
-            },
-        },
-    });
-};
-
+// public css variables
+const cssVariableGridTemplate = '--p-drilldown-grid-template';
+const cssVariableGap = '--p-drilldown-gap';
+// private css variables
+const cssVarColorPrimary = '--_p-a';
+const cssVarColorBackgroundBase = '--_p-b';
+const cssVarColorBackgroundSurface = '--_p-c';
+const cssVarColorBackgroundShading = '--_p-d';
+const cssVarColorBackgroundScroller = '--_p-f';
 const scrollerWidthDesktop = 'clamp(338px, 210px + 18vw, 640px)';
 const mediaQueryMobile = getMediaQueryMax('s');
 const mediaQueryDesktop = getMediaQueryMin('s');
@@ -6223,15 +6105,9 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-// ensures that the scrollbar color is mostly set correctly
-const scrollerBackground = {
-    light: 'rgba(255,255,255,.01)',
-    dark: 'rgba(0,0,0,.01)',
-    auto: 'rgba(255,255,255,.01)',
-};
-const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
-    const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
+const getComponentCss$_ = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+    const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6248,11 +6124,27 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
+                    [cssVarColorPrimary]: primaryColor,
+                    [cssVarColorBackgroundBase]: backgroundColor,
+                    [cssVarColorBackgroundSurface]: backgroundSurfaceColor,
+                    [cssVarColorBackgroundShading]: backgroundShadingColor,
+                    [cssVarColorBackgroundScroller]: theme === 'dark' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)', // ensures that the scrollbar color is mostly set correctly
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        [cssVarColorPrimary]: primaryColorDark,
+                        [cssVarColorBackgroundBase]: backgroundColorDark,
+                        [cssVarColorBackgroundSurface]: backgroundSurfaceColorDark,
+                        [cssVarColorBackgroundShading]: backgroundShadingColorDark,
+                        [cssVarColorBackgroundScroller]: 'rgba(0,0,0,.01)', // ensures that the scrollbar color is mostly set correctly
+                    }),
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
+            '::slotted(*)': {
+                [cssVariableGridTemplate]: 'auto/auto', // reset css variable to prevent inheritance
+                [cssVariableGap]: spacingFluidXSmall, // reset css variable to prevent inheritance
+            },
             dialog: {
                 all: 'unset',
                 position: 'fixed',
@@ -6263,11 +6155,8 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                     ? {
                         visibility: 'inherit',
                         ...frostedGlassStyle,
-                        background: backgroundShadingColor,
+                        background: `var(${cssVarColorBackgroundShading})`,
                         transition: `${getTransition('background', backdropDurationOpen, easingOpen)}, ${getTransition('backdrop-filter', backdropDurationOpen, easingOpen)}, ${getTransition('-webkit-backdrop-filter', backdropDurationOpen, easingOpen)}`,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: backgroundShadingColorDark,
-                        }),
                     }
                     : {
                         visibility: 'hidden',
@@ -6281,11 +6170,15 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                 [mediaQueryMobile]: {
                     display: 'contents',
                     ...(!isSecondaryScrollerVisible && {
-                        zIndex: 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: spacingFluidXSmall,
                         gridArea: '4/2/auto/-2',
+                        zIndex: 0,
+                        display: 'grid',
+                        gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
+                        gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                        alignContent: 'start',
+                        alignItems: 'start',
+                        boxSizing: 'border-box',
+                        minHeight: '100%',
                         height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
                         paddingBlockEnd: spacingFluidLarge,
                         ...(isPrimary && {
@@ -6294,30 +6187,34 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                     }),
                 },
                 [mediaQueryDesktop]: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: isPrimary ? spacingFluidXSmall : spacingFluidMedium,
-                    gridArea: '2/2/auto/-2',
-                    height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                    paddingBlockEnd: spacingFluidLarge,
                     ...(isPrimary && {
+                        gridArea: '3/2/auto/-2',
+                        display: 'grid',
+                        gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
+                        gap: `var(${cssVariableGap},${isPrimary ? spacingFluidXSmall : spacingFluidMedium})`,
+                        alignContent: 'start',
+                        alignItems: 'start',
+                        boxSizing: 'border-box',
+                        minHeight: '100%',
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        paddingBlockEnd: spacingFluidLarge,
                         animation: getAnimation('slide-up-desktop', 'moderate', 'base'),
                     }),
                 },
             },
             ...(isSecondaryScrollerVisible && {
                 '::slotted(*:not([primary],[secondary],[cascade]))': {
-                    [mediaQueryMobile]: {
+                    [mediaQueryMobile]: addImportantToEachRule({
                         display: 'none',
-                    },
+                    }),
                 },
-                '::slotted(*:not([primary],[cascade]))': {
+                '::slotted(*:not([primary],[cascade]))': addImportantToEachRule({
                     [mediaQueryDesktop]: {
                         ...(!isPrimary && {
                             display: 'none',
                         }),
                     },
-                },
+                }),
             }),
         },
         drawer: {
@@ -6340,28 +6237,16 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                 }),
             [mediaQueryMobile]: {
                 gridTemplate: `${spacingFluidMedium} auto ${spacingFluidLarge} minmax(0, 1fr)/${spacingFluidLarge} auto minmax(0, 1fr) auto ${spacingFluidLarge}`,
-                background: backgroundColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
-                }),
+                background: `var(${cssVarColorBackgroundBase})`,
             },
             [mediaQueryDesktop]: {
                 width: isSecondaryScrollerVisible ? `calc(${scrollerWidthDesktop} * 2)` : scrollerWidthDesktop,
-                gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge})`,
-                background: backgroundColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundColorDark,
-                }),
+                gridTemplate: `${spacingFluidMedium} auto minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge})`,
+                background: `var(${cssVarColorBackgroundBase})`,
                 ...(isSecondaryScrollerVisible && {
-                    background: `linear-gradient(90deg,${backgroundColor} 0%,${backgroundColor} 50%,${backgroundSurfaceColor} 50%,${backgroundSurfaceColor} 100%)`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: `linear-gradient(90deg,${backgroundColorDark} 0%,${backgroundColorDark} 50%,${backgroundSurfaceColorDark} 50%,${backgroundSurfaceColorDark} 100%)`,
-                    }),
+                    background: `linear-gradient(90deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 50%,var(${cssVarColorBackgroundSurface}) 50%,var(${cssVarColorBackgroundSurface}) 100%)`,
                     '&:dir(rtl)': {
-                        background: `linear-gradient(90deg,${backgroundSurfaceColor} 0%,${backgroundSurfaceColor} 50%,${backgroundColor} 50%,${backgroundColor} 100%)`,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: `linear-gradient(90deg,${backgroundSurfaceColorDark} 0%,${backgroundSurfaceColorDark} 50%,${backgroundColorDark} 50%,${backgroundColorDark} 100%)`,
-                        }),
+                        background: `linear-gradient(90deg,var(${cssVarColorBackgroundSurface}) 0%,var(${cssVarColorBackgroundSurface}) 50%,var(${cssVarColorBackgroundBase}) 50%,var(${cssVarColorBackgroundBase}) 100%)`,
                     },
                 }),
             },
@@ -6375,33 +6260,21 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
             '&::before': {
                 [mediaQueryMobile]: {
                     gridArea: '1/1/-1/-1',
-                    background: backgroundColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: backgroundColorDark,
-                    }),
+                    background: `var(${cssVarColorBackgroundBase})`,
                 },
                 [mediaQueryDesktop]: {
                     gridArea: '1/1/-1/4',
-                    background: backgroundColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: backgroundColorDark,
-                    }),
+                    background: `var(${cssVarColorBackgroundBase})`,
                 },
             },
             '&::after': {
                 [mediaQueryMobile]: {
                     gridArea: '1/1/-1/-1',
-                    background: backgroundColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: backgroundColorDark,
-                    }),
+                    background: `var(${cssVarColorBackgroundBase})`,
                 },
                 [mediaQueryDesktop]: {
                     gridArea: '1/4/-1/-1',
-                    background: backgroundSurfaceColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: backgroundSurfaceColorDark,
-                    }),
+                    background: `var(${cssVarColorBackgroundSurface})`,
                 },
             },
         },
@@ -6411,10 +6284,7 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
             // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
             // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
             // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
-            background: scrollerBackground[theme],
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: scrollerBackground.dark,
-            }),
+            background: `var(${cssVarColorBackgroundScroller})`,
             [mediaQueryMobile]: {
                 ...(!isSecondaryScrollerVisible && {
                     gridArea: '1/1/-1/-1',
@@ -6427,10 +6297,7 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                         top: 0,
                         gridArea: '1/1/4/-1',
                         zIndex: 1,
-                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
-                        }),
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 65%,transparent 100%)`,
                     },
                 }),
             },
@@ -6446,7 +6313,7 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
                 ...dismissButtonJssStyle,
                 width: 'fit-content',
                 height: 'fit-content',
-                placeSelf: 'center flex-end',
+                placeSelf: 'start end',
                 gridArea: '2/4',
                 zIndex: 3, // ensures dismiss button is on top of opacity animation handled by ::before/::after
                 marginInlineEnd: '-1px', // improve visual alignment and compensate white space of close icon
@@ -6469,13 +6336,15 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
         },
         back: {
             display: 'none',
-            ...(isSecondaryScrollerVisible && {
+            ...(isSecondaryScrollerVisible &&
+                isPrimary && {
                 [mediaQueryMobile]: {
                     display: 'block',
+                    marginTop: '2px', // compensate negative margin of ::pseudo background of button-pure
                     gridArea: '2/2',
                     width: 'fit-content',
                     height: 'fit-content',
-                    placeSelf: 'center flex-start',
+                    placeSelf: 'start',
                     zIndex: 2,
                 },
             }),
@@ -6483,9 +6352,7 @@ const getComponentCss$U = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
     });
 };
 
-const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
-    const { primaryColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
+const getComponentCss$Z = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6507,38 +6374,72 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
             slot: {
-                display: 'none',
-                [mediaQueryMobile]: {
-                    ...(isSecondary && {
-                        zIndex: 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: spacingFluidXSmall,
-                        gridArea: '4/2/auto/-2',
-                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                        paddingBlockEnd: spacingFluidLarge,
-                        animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
-                    }),
+                '&[name="header"]': {
+                    display: 'none',
+                    [mediaQueryMobile]: {
+                        ...(isSecondary && {
+                            gridArea: '2/3',
+                            display: 'grid',
+                            placeItems: 'center',
+                            zIndex: 2,
+                        }),
+                    },
+                },
+                '&[name="button"]': {
                     ...((isPrimary || isCascade) && {
-                        display: 'contents',
+                        display: 'none',
                     }),
+                    [mediaQueryMobile]: {
+                        ...(isSecondary && {
+                            display: 'none',
+                        }),
+                    },
                 },
-                [mediaQueryDesktop]: {
-                    ...((isPrimary || isSecondary) && {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: spacingFluidXSmall,
-                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
-                        animation: getAnimation(`slide-up-desktop-${isPrimary ? 'primary' : 'secondary'}`, 'moderate', 'base'),
-                    }),
-                    ...(isSecondary && {
-                        gridArea: '2/2/auto/-2',
-                        paddingBlockEnd: spacingFluidLarge,
-                    }),
-                    ...(isCascade && {
-                        display: 'contents',
-                    }),
+                '&:not([name])': {
+                    display: 'none',
+                    [mediaQueryMobile]: {
+                        ...(isSecondary && {
+                            gridArea: '4/2/auto/-2',
+                            zIndex: 0,
+                            display: 'grid',
+                            gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
+                            gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                            alignContent: 'start',
+                            alignItems: 'start',
+                            boxSizing: 'border-box',
+                            minHeight: '100%',
+                            height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                            paddingBlockEnd: spacingFluidLarge,
+                            animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
+                        }),
+                        ...((isPrimary || isCascade) && {
+                            display: 'contents',
+                        }),
+                    },
+                    [mediaQueryDesktop]: {
+                        ...((isPrimary || isSecondary) && {
+                            gridArea: '3/2/auto/-2',
+                            display: 'grid',
+                            gridTemplate: `var(${cssVariableGridTemplate},auto/auto)`,
+                            gap: `var(${cssVariableGap},${spacingFluidXSmall})`,
+                            alignContent: 'start',
+                            alignItems: 'start',
+                            boxSizing: 'border-box',
+                            minHeight: '100%',
+                            height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                            paddingBlockEnd: spacingFluidLarge,
+                            animation: getAnimation(`slide-up-desktop-${isPrimary ? 'primary' : 'secondary'}`, 'moderate', 'base'),
+                        }),
+                        ...(isSecondary && {
+                            gridArea: '2/2/auto/-2',
+                            paddingBlockEnd: spacingFluidLarge,
+                        }),
+                        ...(isCascade && {
+                            display: 'contents',
+                        }),
+                    },
                 },
             },
             h2: {
@@ -6557,54 +6458,27 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
-                        color: primaryColor, // enables color inheritance for slotted content
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            color: primaryColorDark,
-                        }),
+                        color: `var(${cssVarColorPrimary})`, // enables color inheritance for slotted content
                     }),
                 },
             },
             // If cascade we need to hide all children which are not primary or another cascade (e.g. all siblings of the primary or cascade item)
             ...(isCascade && {
-                '::slotted(*:not([primary],[cascade]))': {
+                '::slotted(*:not([primary],[cascade]))': addImportantToEachRule({
                     display: 'none',
-                },
+                }),
             }),
             ...(isPrimary && {
-                '::slotted(*:not([secondary]))': {
+                '::slotted(*:not([secondary]))': addImportantToEachRule({
                     [mediaQueryMobile]: {
                         display: 'none',
                     },
-                },
-            }),
-            '::slotted': {
-                '&(a)': {
-                    all: 'unset',
-                    alignSelf: 'flex-start',
-                    font: textMediumStyle.font,
-                    cursor: 'pointer',
-                    borderRadius: borderRadiusSmall,
-                    padding: addImportantToRule(spacingFluidSmall),
-                    marginInline: addImportantToRule(`calc(${spacingFluidSmall} * -1)`),
-                    color: primaryColor,
-                    textDecoration: 'underline',
-                    textDecorationColor: 'transparent',
-                    transition: `${getTransition('text-decoration-color')}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: primaryColorDark,
-                    }),
-                },
-                '&(a[aria-current])': {
-                    textDecoration: 'underline',
-                },
-                ...hoverMediaQuery({
-                    '&(a:hover)': {
-                        textDecorationColor: 'inherit',
-                    },
                 }),
-                ...getFocusJssStyle(theme, { slotted: 'a', offset: '-2px' }),
+            }),
+            '::slotted(*)': {
+                [cssVariableGridTemplate]: 'auto/auto', // reset css variable to prevent inheritance
+                [cssVariableGap]: spacingFluidXSmall, // reset css variable to prevent inheritance
             },
-            ...preventFoucOfNestedElementsStyles,
         },
         // drawer subgrid in combination with scroller grid ensures no content squeezing during slide up animation, potentially caused by scrollbar
         drawer: {
@@ -6634,10 +6508,7 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
             // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
             // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
             // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
-            background: scrollerBackground[theme],
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: scrollerBackground.dark,
-            }),
+            background: `var(${cssVarColorBackgroundScroller})`,
             [mediaQueryMobile]: {
                 ...(isSecondary && {
                     display: 'grid',
@@ -6650,10 +6521,7 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
                         position: 'sticky',
                         top: 0,
                         gridArea: '1/1/4/-1',
-                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
-                        }),
+                        background: `linear-gradient(180deg,var(${cssVarColorBackgroundBase}) 0%,var(${cssVarColorBackgroundBase}) 65%,transparent 100%)`,
                     },
                 }),
                 ...((isPrimary || isCascade) && {
@@ -6683,6 +6551,9 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
             },
             ...(!isPrimary &&
                 !isCascade && {
+                // TODO: not sure if this is ideal, since the consumer won't be able to change it when used with a custom
+                //  grid-template, maybe <p-drilldown-button slot="button" /> would be an option, similar to <p-drilldown-link />
+                gridColumn: '1/-1',
                 padding: spacingFluidSmall,
                 margin: `0 calc(${spacingFluidSmall} * -1)`,
             }),
@@ -6694,12 +6565,15 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
             ...(isPrimary && {
                 [mediaQueryMobile]: {
                     gridArea: '2/2',
+                    marginTop: '2px', // compensate negative margin of ::pseudo background of button-pure
                     width: 'fit-content',
                     height: 'fit-content',
-                    placeSelf: 'center flex-start',
+                    placeSelf: 'start',
                     zIndex: 2,
                 },
                 [mediaQueryDesktop]: {
+                    gridArea: '2/2',
+                    marginBottom: spacingFluidMedium,
                     width: 'fit-content',
                     height: 'fit-content',
                     marginInlineStart: '-4px', // improve visual alignment and compensate white space of arrow-left icon
@@ -6709,6 +6583,185 @@ const getComponentCss$T = (isPrimary, isSecondary, isCascade, theme) => {
     });
 };
 
+const getComponentCss$Y = (hasSlottedAnchor, isActive) => {
+    const anchorJssStyle = {
+        all: 'unset',
+        padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
+        margin: `-2px calc(${spacingFluidSmall} * -1 - 4px)`, // aligned with link-pure
+        borderRadius: borderRadiusSmall, // needed for focus outline
+        font: textMediumStyle.font,
+        color: `var(${cssVarColorPrimary})`,
+        textDecoration: 'underline',
+        textDecorationColor: isActive ? 'inherit' : 'transparent',
+        cursor: isActive ? 'default' : 'pointer',
+        transition: getTransition('text-decoration-color'),
+    };
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'grid',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            ...(hasSlottedAnchor
+                ? {
+                    '::slotted': addImportantToEachRule({
+                        '&(a)': anchorJssStyle,
+                        ...hoverMediaQuery({
+                            '&(a:hover)': {
+                                textDecorationColor: 'inherit',
+                            },
+                        }),
+                        // TODO: focus color is the same for all themes but could change in the future
+                        ...getFocusJssStyle('light', { slotted: 'a', offset: '-2px' }),
+                    }),
+                }
+                : {
+                    a: {
+                        ...anchorJssStyle,
+                        ...hoverMediaQuery({
+                            '&:hover': {
+                                textDecorationColor: 'inherit',
+                            },
+                        }),
+                        // TODO: focus color is the same for all themes but could change in the future
+                        ...getFocusJssStyle('light', { offset: '-2px' }),
+                    },
+                }),
+        },
+    });
+};
+
+const getComponentCss$X = (state, labelSize, hasLabel, theme) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            fieldset: {
+                margin: 0,
+                padding: 0,
+                border: 'none',
+            },
+            ...(hasLabel && {
+                legend: {
+                    margin: `0 0 ${spacingStaticMedium}`,
+                    padding: 0,
+                    color: getThemedColors(theme).primaryColor,
+                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
+                },
+            }),
+        },
+        ...getFunctionalComponentRequiredStyles(),
+        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+            message: {
+                marginTop: spacingStaticMedium,
+            },
+        }),
+    });
+};
+
+const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            fieldset: {
+                margin: 0,
+                padding: 0,
+                border: 'none',
+            },
+            ...(hasLabel && {
+                legend: {
+                    margin: `0 0 ${spacingStaticMedium}`,
+                    padding: 0,
+                    color: getThemedColors(theme).primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: getThemedColors('dark').primaryColor,
+                    }),
+                    ...(labelSize === 'small' ? headingSmallStyle : headingMediumStyle),
+                },
+            }),
+        },
+        ...getFunctionalComponentRequiredStyles(),
+        ...mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+            message: {
+                marginTop: spacingStaticMedium,
+            },
+        }),
+    });
+};
+
+const flexItemWidths = {
+    none: 0,
+    'one-quarter': 25,
+    'one-third': 33.333333,
+    half: 50,
+    'two-thirds': 66.666667,
+    'three-quarters': 75,
+    full: 100,
+    auto: 'auto',
+};
+const getComponentCss$V = (width, offset, alignSelf, grow, shrink, flex) => {
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule({
+                boxSizing: 'border-box',
+                ...hostHiddenStyles,
+                ...mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
+                    width: `${flexItemWidths[widthResponsive]}%`,
+                })), buildResponsiveStyles(offset, (offsetResponsive) => ({
+                    marginLeft: `${flexItemWidths[offsetResponsive]}%`,
+                })), buildResponsiveStyles(alignSelf, (alignSelfResponsive) => ({
+                    alignSelf: alignSelfResponsive,
+                })), flex !== 'initial' // flex shorthand conflicts with grow and shrink, which means even default grow or shrink props would override flex
+                    ? buildResponsiveStyles(flex, (flexResponsive) => ({
+                        flex: flexResponsive === 'equal' ? '1 1 0' : flexResponsive,
+                    }))
+                    : mergeDeep(buildResponsiveStyles(grow, (flexGrow) => ({ flexGrow })), buildResponsiveStyles(shrink, (flexShrink) => ({ flexShrink })))),
+            }),
+        },
+    });
+};
+
+const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+    return getCss({
+        '@global': {
+            ':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 headingTags = 'h1,h2,h3,h4,h5,h6';
 const dialogHostJssStyle = {
     '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
@@ -6875,7 +6928,7 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$S = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$T = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -6985,7 +7038,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$R = (size, offset) => {
+const getComponentCss$S = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7005,7 +7058,7 @@ const getComponentCss$R = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$Q = (direction, wrap) => {
+const getComponentCss$R = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7031,7 +7084,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$P = (size, align, color, ellipsis, theme) => {
+const getComponentCss$Q = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7091,7 +7144,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$O = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$P = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7202,7 +7255,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$N = (name, source, color, size, theme) => {
+const getComponentCss$O = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7321,7 +7374,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$M = (state, hasAction, hasClose, theme) => {
+const getComponentCss$N = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7361,6 +7414,238 @@ const getComponentCss$M = (state, hasAction, hasClose, theme) => {
     });
 };
 
+const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme, additionalDefaultJssStyle) => {
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return {
+        [`::slotted(${child})`]: {
+            display: 'block',
+            width: '100%',
+            height: child !== 'textarea'
+                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
+                : 'auto',
+            margin: 0,
+            outline: 0,
+            WebkitAppearance: 'none', // iOS safari
+            appearance: 'none',
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            background: 'transparent',
+            font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+            textIndent: 0,
+            color: primaryColor,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+                color: primaryColorDark,
+            }),
+            ...additionalDefaultJssStyle,
+        },
+        '::slotted(:not(input[type="password"]))': {
+            textOverflow: 'ellipsis',
+        },
+        ...(!isLoading &&
+            hoverMediaQuery({
+                // with the media query the selector has higher priority and overrides disabled styles
+                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
+                    borderColor: formStateHoverColor || primaryColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: formStateHoverColorDark || primaryColorDark,
+                    }),
+                },
+            })),
+        // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
+        [`::slotted(${child}:focus)`]: {
+            borderColor: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: primaryColorDark,
+            }),
+        },
+        [`::slotted(${child}:disabled)`]: {
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+                WebkitTextFillColor: disabledColorDark,
+            }),
+        },
+        ...(child !== 'select' && {
+            [`::slotted(${child}[readonly])`]: {
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: contrastLowColorDark,
+                    background: contrastLowColorDark,
+                }),
+            },
+        }),
+    };
+};
+const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
+const formElementLayeredSafeZone = `calc(${formElementLayeredGap} + ${borderWidthBase})`;
+// TODO: basic button/icon padding can already be set within style function instead of on component style level
+const formButtonOrIconPadding = spacingStaticXSmall;
+// TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
+//  unfortunately line-height alignment breaks for a select element for some reasons then
+// TODO: basic form element padding can already be set within style function instead of on component style level
+const formElementPaddingVertical = spacingStaticSmall;
+// TODO: basic form element padding can already be set within style function instead of on component style level
+const formElementPaddingHorizontal = spacingStaticMedium;
+const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
+    // when applied, font-family and font-size needs to be set too for correct calculation of ex-unit ($fontLineHeight)
+    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
+};
+// TODO: re-use in textarea-wrapper not only in text-field-wrapper
+const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
+    const { disabledColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
+    const { disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
+    return {
+        pointerEvents: 'none',
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        font: textSmallStyle.font,
+        color: contrastMediumColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: contrastMediumColorDark,
+        }),
+        ...(isDisabled && {
+            color: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+            }),
+        }),
+        ...(isReadonly && {
+            color: contrastHighColor,
+        })
+    };
+};
+
+const cssVarInternalInputPasswordScaling = '--p-internal-input-password-scaling';
+const getComponentCss$M = (disabled, hideLabel, state, toggle, compact, readOnly, theme) => {
+    // Determines the scaling factor for the input-password size. In "compact" mode, it uses 0.5 to achieve a 36px input-password (compact size).
+    // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputPasswordScaling`.
+    const scalingVar = `var(${cssVarInternalInputPasswordScaling}, ${compact ? 0.5 : 1})`;
+    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
+    // TODO: Ideally, 'compact' should only influence the calculation of scalingVar,
+    // ensuring that the paddingButton calculation solely depends on the scaling factor.
+    const paddingButton = compact ? '0px' : `calc(${formButtonOrIconPadding} * ${scalingVar})`;
+    const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const hoverStyles = {
+        borderColor: formStateHoverColor || primaryColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: formStateHoverColorDark || primaryColorDark,
+        }),
+    };
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            input: {
+                all: 'unset',
+                flex: 1,
+                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
+                height,
+                paddingBlock,
+                textIndent: 0,
+                color: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: primaryColorDark,
+                }),
+                width: '100%',
+                minWidth: '2rem',
+                '&[type="text"]': {
+                    textOverflow: 'ellipsis',
+                },
+            },
+        },
+        root: {
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        wrapper: {
+            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
+            borderRadius: borderRadiusSmall,
+            paddingInlineStart: paddingInline,
+            paddingInlineEnd: toggle ? paddingBlock : paddingInline, // TODO resolve inconsistency in Figma
+            display: 'flex',
+            gap: formElementLayeredGap,
+            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                borderColor: formStateColorDark || contrastMediumColorDark,
+            }),
+            '&:has(input:focus:not([readonly]))': {
+                borderColor: primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: primaryColorDark,
+                }),
+            },
+            ...hoverMediaQuery({
+                ...(!disabled &&
+                    !readOnly && {
+                    '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
+                }),
+            }),
+            ...(disabled && {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                borderColor: disabledColor,
+                WebkitTextFillColor: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                    borderColor: disabledColorDark,
+                    WebkitTextFillColor: disabledColorDark,
+                }),
+            }),
+            ...(readOnly && {
+                cursor: 'text',
+                borderColor: contrastLowColor,
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: contrastLowColorDark,
+                    background: contrastLowColorDark,
+                }),
+            }),
+        },
+        ...(toggle && {
+            button: {
+                placeSelf: 'center',
+                padding: paddingButton, // TODO resolve inconsistency in Figma
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
+            ...hoverMediaQuery({
+                ...(!disabled &&
+                    !readOnly && {
+                    '&:hover~.wrapper': hoverStyles,
+                }),
+            }),
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -8078,121 +8363,6 @@ const getComponentCss$E = (model, safeZone, size, color, theme) => {
     });
 };
 
-const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme, additionalDefaultJssStyle) => {
-    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    return {
-        [`::slotted(${child})`]: {
-            display: 'block',
-            width: '100%',
-            height: child !== 'textarea'
-                ? `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)` // we need 10px additionally so input height becomes 54px
-                : 'auto',
-            margin: 0,
-            outline: 0,
-            WebkitAppearance: 'none', // iOS safari
-            appearance: 'none',
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`,
-            borderRadius: borderRadiusSmall,
-            background: 'transparent',
-            font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is aligned with how Safari visualize date/time input highlighting
-            textIndent: 0,
-            color: primaryColor,
-            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: formStateColorDark || contrastMediumColorDark,
-                color: primaryColorDark,
-            }),
-            ...additionalDefaultJssStyle,
-        },
-        '::slotted(:not(input[type="password"]))': {
-            textOverflow: 'ellipsis',
-        },
-        ...(!isLoading &&
-            hoverMediaQuery({
-                // with the media query the selector has higher priority and overrides disabled styles
-                [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover),label:hover~.wrapper ::slotted(${child}:not(:disabled):not(:focus):not([readonly]))${child === 'select' ? ',label:hover~.wrapper ::part(select-wrapper-dropdown)' : ''}`]: {
-                    borderColor: formStateHoverColor || primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: formStateHoverColorDark || primaryColorDark,
-                    }),
-                },
-            })),
-        // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
-        [`::slotted(${child}:focus)`]: {
-            borderColor: primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: primaryColorDark,
-            }),
-        },
-        [`::slotted(${child}:disabled)`]: {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-            WebkitTextFillColor: disabledColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledColorDark,
-                borderColor: disabledColorDark,
-                WebkitTextFillColor: disabledColorDark,
-            }),
-        },
-        ...(child !== 'select' && {
-            [`::slotted(${child}[readonly])`]: {
-                borderColor: contrastLowColor,
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: contrastLowColorDark,
-                    background: contrastLowColorDark,
-                }),
-            },
-        }),
-    };
-};
-const formElementLayeredGap = '9px'; // to have same distance vertically and horizontally for e.g. button/icon within form element
-const formElementLayeredSafeZone = `calc(${formElementLayeredGap} + ${borderWidthBase})`;
-// TODO: basic button/icon padding can already be set within style function instead of on component style level
-const formButtonOrIconPadding = spacingStaticXSmall;
-// TODO: if we'd use 12px instead, it wouldn't be necessary for textarea to have a custom vertical padding,
-//  unfortunately line-height alignment breaks for a select element for some reasons then
-// TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingVertical = spacingStaticSmall;
-// TODO: basic form element padding can already be set within style function instead of on component style level
-const formElementPaddingHorizontal = spacingStaticMedium;
-const getCalculatedFormElementPaddingHorizontal = (buttonOrIconAmount) => {
-    // when applied, font-family and font-size needs to be set too for correct calculation of ex-unit ($fontLineHeight)
-    return `calc(${formElementLayeredGap} + ${formElementPaddingHorizontal} / 2 + (${fontLineHeight} + ${formButtonOrIconPadding} * 2) * ${buttonOrIconAmount})`;
-};
-// TODO: re-use in textarea-wrapper not only in text-field-wrapper
-const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
-    const { disabledColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
-    const { disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
-    return {
-        pointerEvents: 'none',
-        maxWidth: '100%',
-        boxSizing: 'border-box',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        font: textSmallStyle.font,
-        color: contrastMediumColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: contrastMediumColorDark,
-        }),
-        ...(isDisabled && {
-            color: disabledColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledColorDark,
-            }),
-        }),
-        ...(isReadonly && {
-            color: contrastHighColor,
-        })
-    };
-};
-
 const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, cssVarScaling, theme) => {
     const cssVarBackgroundColor = `--p-${componentName}-background-color`;
     const cssVarTextColor = `--p-${componentName}-text-color`;
@@ -11113,37 +11283,39 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$1a;
-exports.getBannerCss = getComponentCss$19;
-exports.getButtonCss = getComponentCss$15;
-exports.getButtonGroupCss = getComponentCss$18;
-exports.getButtonPureCss = getComponentCss$17;
-exports.getButtonTileCss = getComponentCss$16;
-exports.getCanvasCss = getComponentCss$14;
-exports.getCarouselCss = getComponentCss$13;
-exports.getCheckboxCss = getComponentCss$11;
-exports.getCheckboxWrapperCss = getComponentCss$12;
-exports.getContentWrapperCss = getComponentCss$10;
-exports.getCrestCss = getComponentCss$$;
-exports.getDisplayCss = getComponentCss$_;
-exports.getDividerCss = getComponentCss$Z;
-exports.getFieldsetCss = getComponentCss$X;
-exports.getFieldsetWrapperCss = getComponentCss$Y;
-exports.getFlexCss = getComponentCss$V;
-exports.getFlexItemCss = getComponentCss$W;
-exports.getFlyoutCss = getComponentCss$S;
-exports.getFlyoutMultilevelCss = getComponentCss$U;
-exports.getFlyoutMultilevelItemCss = getComponentCss$T;
+exports.getAccordionCss = getComponentCss$1c;
+exports.getBannerCss = getComponentCss$1b;
+exports.getButtonCss = getComponentCss$17;
+exports.getButtonGroupCss = getComponentCss$1a;
+exports.getButtonPureCss = getComponentCss$19;
+exports.getButtonTileCss = getComponentCss$18;
+exports.getCanvasCss = getComponentCss$16;
+exports.getCarouselCss = getComponentCss$15;
+exports.getCheckboxCss = getComponentCss$13;
+exports.getCheckboxWrapperCss = getComponentCss$14;
+exports.getContentWrapperCss = getComponentCss$12;
+exports.getCrestCss = getComponentCss$11;
+exports.getDisplayCss = getComponentCss$10;
+exports.getDividerCss = getComponentCss$$;
+exports.getDrilldownCss = getComponentCss$_;
+exports.getDrilldownItemCss = getComponentCss$Z;
+exports.getDrilldownLinkCss = getComponentCss$Y;
+exports.getFieldsetCss = getComponentCss$W;
+exports.getFieldsetWrapperCss = getComponentCss$X;
+exports.getFlexCss = getComponentCss$U;
+exports.getFlexItemCss = getComponentCss$V;
+exports.getFlyoutCss = getComponentCss$T;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$Q;
-exports.getGridItemCss = getComponentCss$R;
-exports.getHeadingCss = getComponentCss$P;
-exports.getHeadlineCss = getComponentCss$O;
-exports.getIconCss = getComponentCss$N;
-exports.getInlineNotificationCss = getComponentCss$M;
+exports.getGridCss = getComponentCss$R;
+exports.getGridItemCss = getComponentCss$S;
+exports.getHeadingCss = getComponentCss$Q;
+exports.getHeadlineCss = getComponentCss$P;
+exports.getIconCss = getComponentCss$O;
+exports.getInlineNotificationCss = getComponentCss$N;
+exports.getInputPasswordCss = getComponentCss$M;
 exports.getLinkCss = getComponentCss$K;
 exports.getLinkPureCss = getComponentCss$L;
 exports.getLinkSocialCss = getComponentCss$K;