@porsche-design-system/components-react 3.0.0-alpha.1 → 3.0.0-alpha.2

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

@@ -238,6 +238,8 @@ const spacingStaticLarge = '32px';
 
 const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
 
+const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
+
 const themeDarkBackgroundShading = 'rgba(1, 2, 5, 0.67)';
 
 const _displayFontPartA = `${fontStyleItalic} ${fontVariant} ${fontWeightSemiBold$1} `;
@@ -266,6 +268,10 @@ const headingLargeStyle = {
     font: `${_headingFontPartA}${fontSizeHeadingLarge}${_headingFontPartB}`,
 };
 
+const headingXLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingXLarge}${_headingFontPartB}`,
+};
+
 const headingXXLargeStyle = {
     font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
 };
@@ -5788,7 +5794,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$S = (size, compact, open, theme) => {
+const getComponentCss$T = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const border = `1px solid ${contrastLowColor}`;
     return getCss(Object.assign(Object.assign({ '@global': {
@@ -5944,12 +5950,12 @@ const widthMap = {
     extended: 'extended',
     basic: 'basic',
 };
-const getComponentCss$R = (width) => {
+const getComponentCss$S = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign(Object.assign({ 
                 // TODO: Why is nothing set as important here?
-                [bannerPositionTopVar]: bannerOffset, [bannerPositionBottomVar]: bannerOffset, display: 'block', position: `var(${bannerPositionTypeVar},fixed)`, zIndex: `var(${bannerZIndexVar},${BANNER_Z_INDEX})`, opacity: 0, left: 0, right: 0, willChange: 'opacity,transform' }, mergeDeep(addImportantToEachRule(Object.assign(Object.assign({}, getContentWrapperStyle(widthMap[width])), hostHiddenStyles)), {
+                [bannerPositionTopVar]: bannerOffset, [bannerPositionBottomVar]: bannerOffset, position: `var(${bannerPositionTypeVar},fixed)`, zIndex: `var(${bannerZIndexVar},${BANNER_Z_INDEX})`, opacity: 0, left: 0, right: 0, willChange: 'opacity,transform' }, mergeDeep(addImportantToEachRule(Object.assign(Object.assign({}, getContentWrapperStyle(widthMap[width])), hostHiddenStyles)), {
                 [mediaQueryBase]: {
                     bottom: `var(${bannerPositionBottomVar})`,
                 },
@@ -5977,37 +5983,19 @@ const getDirectionJssStyle = (direction) => {
         column: {
             flexFlow: 'column nowrap',
             alignItems: 'stretch',
-            marginRight: 0,
-            marginLeft: 0,
         },
         row: {
             flexFlow: 'row wrap',
             alignItems: 'center',
-            marginRight: `-${spacingStaticSmall}`,
-            marginLeft: `-${spacingStaticSmall}`,
-        },
-    };
-    return style[direction];
-};
-const getDirectionSlottedJssStyle = (direction) => {
-    const style = {
-        column: {
-            marginRight: 0,
-            marginLeft: 0,
-        },
-        row: {
-            marginRight: spacingStaticSmall,
-            marginLeft: spacingStaticSmall,
         },
     };
     return style[direction];
 };
-const getComponentCss$Q = (direction) => {
+const getComponentCss$R = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            div: Object.assign({ display: 'flex', marginTop: `-${spacingStaticMedium}` }, buildResponsiveStyles(direction, getDirectionJssStyle)),
-            '::slotted(*)': addImportantToEachRule(Object.assign({ marginTop: spacingStaticMedium }, buildResponsiveStyles(direction, getDirectionSlottedJssStyle))),
+            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getDirectionJssStyle)),
         },
     });
 };
@@ -6041,7 +6029,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             alignItems: stretchValue ? 'center' : 'flex-start',
         })), buildResponsiveStyles(size, (sizeValue) => ({
             fontSize: getFontSizeText(sizeValue),
-        })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+        })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'absolute', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 right: hideLabelValue ? offsetVertical : offsetHorizontal,
                 left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
             }))), { borderRadius: borderRadiusSmall, transition: getTransition('background-color') }), (active && Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }))) }), (!isDisabledOrLoading &&
@@ -6069,7 +6057,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$P = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$Q = (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), Object.assign({ root: {
             appearance: 'none',
@@ -6167,7 +6155,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$O = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$P = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -6192,28 +6180,76 @@ const getComponentCss$O = (icon, iconSource, variant, hideLabel, disabled, loadi
         })) })));
 };
 
+const carouselTransitionDuration = 400;
 const bulletActiveClass = 'bullet--active';
+const selectorHeading = 'h2,::slotted([slot=heading])';
+const selectorDescription = 'p,::slotted([slot=description])';
 const mediaQueryS = getMediaQueryMin('s');
-const mediaQueryXl$1 = getMediaQueryMin('xl');
-const getComponentCss$N = (wrapContent, disablePagination, theme) => {
-    const { primaryColor, disabledColor } = getThemedColors(theme);
+const mediaQueryXXL = getMediaQueryMin('xxl');
+// we need an explicit grid template, therefor we need to calculate the button group width
+const buttonSize$1 = `calc(${spacingStaticSmall} * 2 + ${fontLineHeight})`;
+// + 2px, compensates hover offset of button-pure
+const buttonGroupWidth = `calc(${buttonSize$1} * 2 + ${spacingStaticXSmall} + 2px)`;
+// we don't need to abstract spacing definitions since component content-wrapper is deprecated and will be removed soon
+const gridColumn1FrS = `calc((100% - ${gridSafeZoneBase} * 2 - ${gridGap} * 13) / 14)`;
+const gridColumn1FrXXL = `calc((min(100%, ${gridWidthMax}) - ${gridSafeZoneXXL} * 2 - ${gridGap} * 13) / 14)`;
+const spacingMap = {
+    basic: {
+        padding: `0 ${gridSafeZoneBase}`,
+        [mediaQueryS]: {
+            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} + ${gridColumn1FrS})`,
+        },
+        [mediaQueryXXL]: {
+            padding: `0 calc(${gridSafeZoneXXL} + ${gridGap} + ${gridColumn1FrXXL})`,
+        },
+    },
+    extended: {
+        padding: `0 ${gridSafeZoneBase}`,
+        [mediaQueryXXL]: {
+            padding: `0 ${gridSafeZoneXXL}`,
+        },
+    },
+};
+const getComponentCss$O = (width, disablePagination, alignHeader, theme) => {
+    const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+    const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'grid', maxWidth: gridWidthMax, marginLeft: 'auto', marginRight: 'auto', gap: pxToRemWithUnit(24), gridAutoFlow: 'row', [mediaQueryXl$1]: {
-                    gap: pxToRemWithUnit(32),
-                } }, hostHiddenStyles)),
-            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMediumStyle), { margin: 0, color: primaryColor, maxWidth: pxToRemWithUnit(900) })),
-            'p,::slotted([slot=description])': addImportantToEachRule(Object.assign(Object.assign({}, textSmallStyle), { margin: 0, color: primaryColor, maxWidth: pxToRemWithUnit(550), gridColumn: 1 })),
+            ':host': addImportantToEachRule(Object.assign({ display: 'flex', gap: spacingFluidMedium, flexDirection: 'column', maxWidth: gridWidthMax, 
+                // relevant for viewport width > 2560px
+                paddingLeft: `calc(50% - ${gridWidthMax} / 2)`, paddingRight: `calc(50% - ${gridWidthMax} / 2)`, boxSizing: 'content-box' }, hostHiddenStyles)),
+            [selectorHeading]: addImportantToEachRule(Object.assign(Object.assign({}, headingXLargeStyle), { maxWidth: '56.25rem', margin: 0 })),
+            [selectorDescription]: addImportantToEachRule(Object.assign(Object.assign({}, textSmallStyle), { maxWidth: '34.375rem', margin: `${spacingFluidXSmall} 0 0` })),
+            [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
+                color: primaryColor,
+                [mediaQueryS]: isHeaderAlignCenter
+                    ? {
+                        gridColumn: 2,
+                        textAlign: 'center', // relevant when text becomes multiline
+                    }
+                    : {
+                        gridColumn: '1 / 3',
+                    },
+            }),
+        }, header: Object.assign({ display: 'grid' }, mergeDeep(spacingMap[width], {
+            [mediaQueryS]: Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
+                justifyItems: 'center', // relevant when max-width of heading or description is reached
+            })),
+        })), nav: {
+            display: 'none',
+            [mediaQueryS]: {
+                display: 'flex',
+                gap: spacingStaticXSmall,
+                gridArea: '1 / 3 / 3 / auto',
+                alignItems: 'end',
+            },
+        }, btn: {
+            padding: spacingStaticSmall,
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
-            '&__track': Object.assign(Object.assign({ cursor: 'grab' }, (wrapContent &&
-                addImportantToEachRule({
-                    // TODO: 0 calc(${gridSafeZoneBase} + ${gridGap})
-                    padding: `0 calc(${gridSafeZoneBase} + 7%) 0 ${gridSafeZoneBase}`,
-                    [mediaQueryXl$1]: {
-                        padding: `0 calc(${gridSafeZoneBase} + 7%) 0 ${gridSafeZoneBase}`,
-                    },
-                }))), { '&--draggable': {
+            '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule(Object.assign(Object.assign({}, spacingMap[width]), { [getMediaQueryMax('xs')]: {
+                    paddingRight: `calc(${gridSafeZoneBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
+                } }))), { '&--draggable': {
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
@@ -6221,42 +6257,21 @@ const getComponentCss$N = (wrapContent, disablePagination, theme) => {
             '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
             '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
             '&__sr': getScreenReaderOnlyJssStyle(), // appears in the DOM when sliding
-        }, 
-        // .splide.is-initialized,
-        // .splide.is-rendered {
-        //     visibility: visible,
-        //   }
-        // .splide.is-initialized:not(.is-active) .splide__list {
-        //     display: block,
-        //   }
-        header: {
-            display: 'grid',
-            gap: gridGap,
-            padding: wrapContent ? `0 ${gridSafeZoneBase}` : null,
-            [mediaQueryS]: {
-                gridTemplateColumns: `minmax(0px, 1fr) ${pxToRemWithUnit(80)}`,
-                position: 'relative',
-                minHeight: pxToRemWithUnit(40), // actual height of prev/next buttons
-            },
-        }, nav: {
-            display: 'none',
-            [mediaQueryS]: {
-                display: 'grid',
-                gridAutoFlow: 'column',
-                position: 'absolute',
-                right: wrapContent ? gridSafeZoneBase : 0,
-                bottom: 0,
-            },
-        }, btn: {
-            padding: pxToRemWithUnit(8),
-        } }, (disablePagination !== true && {
-        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(disablePagination, (value) => ({ display: value ? 'none' : 'grid' }))), { gridAutoColumns: pxToRemWithUnit(8), gridAutoFlow: 'column', justifyContent: 'center', gap: pxToRemWithUnit(8), height: pxToRemWithUnit(8) }),
+        } }, (!disablePagination && {
+        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(disablePagination, (disablePaginationValue) => ({
+            display: disablePaginationValue ? 'none' : 'flex',
+        }))), { justifyContent: 'center', gap: spacingStaticSmall }),
         bullet: {
-            borderRadius: pxToRemWithUnit(4),
-            background: disabledColor,
+            borderRadius: borderRadiusSmall,
+            background: contrastMediumColor,
+            // set transition to have the same speed as switching slides in splide
+            transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
+            width: '8px',
+            height: '8px',
         },
         [bulletActiveClass]: {
             background: primaryColor,
+            width: '20px',
         },
     })));
 };
@@ -6337,7 +6352,7 @@ 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 getComponentCss$M = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$N = (hideLabel, state, isDisabled, theme) => {
     const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
     const indeterminateIconColor = getThemedColors(theme).primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
@@ -6357,7 +6372,7 @@ const getComponentCss$M = (hideLabel, state, isDisabled, theme) => {
     }));
 };
 
-const getComponentCss$L = (width) => {
+const getComponentCss$M = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6422,7 +6437,7 @@ const sizeMap$5 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$K = (size, align, color, ellipsis, theme) => {
+const getComponentCss$L = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6436,12 +6451,15 @@ const getComponentCss$K = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$J = (color, orientation, theme) => {
+const getComponentCss$K = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'neutral-contrast-low': contrastLowColor,
         'neutral-contrast-medium': contrastMediumColor,
         'neutral-contrast-high': contrastHighColor,
+        'contrast-low': contrastLowColor,
+        'contrast-medium': contrastMediumColor,
+        'contrast-high': contrastHighColor,
     };
     return getCss({
         '@global': {
@@ -6451,7 +6469,7 @@ const getComponentCss$J = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$I = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$J = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -6475,7 +6493,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$H = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -6493,7 +6511,7 @@ const getComponentCss$H = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$G = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$H = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -6515,7 +6533,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$F = (size, offset) => {
+const getComponentCss$G = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ paddingLeft: gutter$1, paddingRight: gutter$1, boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
@@ -6529,7 +6547,7 @@ const getComponentCss$F = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$E = (direction, wrap) => {
+const getComponentCss$F = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'flex', flex: 'auto', width: 'auto', marginLeft: gutter, marginRight: gutter }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))))),
@@ -6545,7 +6563,7 @@ const sizeMap$4 = {
     'xx-large': fontSizeHeadingXXLarge,
     'xxx-large': fontSizeHeadingXXXLarge,
 };
-const getComponentCss$D = (size, align, color, ellipsis, theme) => {
+const getComponentCss$E = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6598,7 +6616,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$C = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6620,34 +6638,34 @@ const sizeMap$3 = {
     'x-large': fontSizeTextXLarge,
 };
 // TODO, use Tuple to reduce chunk size
-const filterLightPrimary = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
-const filterLightContrastLow = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
-const filterLightContrastMedium = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
-const filterLightContrastHigh = 'invert(40%) sepia(2%) saturate(686%) hue-rotate(187deg) brightness(80%) contrast(94%)';
+const filterLightPrimary$1 = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
+const filterLightContrastLow$1 = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
+const filterLightContrastMedium$1 = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
+const filterLightContrastHigh$1 = 'invert(40%) sepia(2%) saturate(686%) hue-rotate(187deg) brightness(80%) contrast(94%)';
 const filterLightNotificationSuccess = 'invert(62%) sepia(61%) saturate(551%) hue-rotate(86deg) brightness(86%) contrast(80%)';
 const filterLightNotificationWarning = 'invert(74%) sepia(91%) saturate(343%) hue-rotate(348deg) brightness(92%) contrast(86%)';
 const filterLightNotificationError = 'invert(25%) sepia(62%) saturate(2003%) hue-rotate(335deg) brightness(100%) contrast(97%)';
 const filterLightNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
-const filterDarkPrimary = 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)';
-const filterDarkContrastLow = 'invert(20%) sepia(7%) saturate(421%) hue-rotate(202deg) brightness(97%) contrast(82%)';
-const filterDarkContrastMedium = 'invert(54%) sepia(4%) saturate(229%) hue-rotate(187deg) brightness(91%) contrast(84%)';
-const filterDarkContrastHigh = 'invert(68%) sepia(6%) saturate(108%) hue-rotate(187deg) brightness(104%) contrast(88%)';
+const filterDarkPrimary$1 = 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)';
+const filterDarkContrastLow$1 = 'invert(20%) sepia(7%) saturate(421%) hue-rotate(202deg) brightness(97%) contrast(82%)';
+const filterDarkContrastMedium$1 = 'invert(54%) sepia(4%) saturate(229%) hue-rotate(187deg) brightness(91%) contrast(84%)';
+const filterDarkContrastHigh$1 = 'invert(68%) sepia(6%) saturate(108%) hue-rotate(187deg) brightness(104%) contrast(88%)';
 const filterDarkNotificationSuccess = 'invert(59%) sepia(22%) saturate(1342%) hue-rotate(86deg) brightness(96%) contrast(88%)';
 const filterDarkNotificationWarning = 'invert(72%) sepia(94%) saturate(303%) hue-rotate(354deg) brightness(89%) contrast(94%)';
 const filterDarkNotificationError = 'invert(28%) sepia(34%) saturate(3133%) hue-rotate(333deg) brightness(95%) contrast(100%)';
 const filterDarkNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
 const filter = {
     light: {
-        primary: filterLightPrimary,
-        brand: filterLightPrimary,
-        default: filterLightPrimary,
-        disabled: filterLightContrastMedium,
-        'contrast-low': filterLightContrastLow,
-        'neutral-contrast-low': filterLightContrastLow,
-        'contrast-medium': filterLightContrastMedium,
-        'neutral-contrast-medium': filterLightContrastMedium,
-        'contrast-high': filterLightContrastHigh,
-        'neutral-contrast-high': filterLightContrastHigh,
+        primary: filterLightPrimary$1,
+        brand: filterLightPrimary$1,
+        default: filterLightPrimary$1,
+        disabled: filterLightContrastMedium$1,
+        'contrast-low': filterLightContrastLow$1,
+        'neutral-contrast-low': filterLightContrastLow$1,
+        'contrast-medium': filterLightContrastMedium$1,
+        'neutral-contrast-medium': filterLightContrastMedium$1,
+        'contrast-high': filterLightContrastHigh$1,
+        'neutral-contrast-high': filterLightContrastHigh$1,
         'notification-success': filterLightNotificationSuccess,
         'notification-warning': filterLightNotificationWarning,
         'notification-error': filterLightNotificationError,
@@ -6655,16 +6673,16 @@ const filter = {
         'notification-neutral': filterLightNotificationInfo, // deprecated
     },
     dark: {
-        primary: filterDarkPrimary,
-        brand: filterDarkPrimary,
-        default: filterDarkPrimary,
-        disabled: filterDarkContrastMedium,
-        'contrast-low': filterDarkContrastLow,
-        'neutral-contrast-low': filterDarkContrastLow,
-        'contrast-medium': filterDarkContrastMedium,
-        'neutral-contrast-medium': filterDarkContrastMedium,
-        'contrast-high': filterDarkContrastHigh,
-        'neutral-contrast-high': filterDarkContrastHigh,
+        primary: filterDarkPrimary$1,
+        brand: filterDarkPrimary$1,
+        default: filterDarkPrimary$1,
+        disabled: filterDarkContrastMedium$1,
+        'contrast-low': filterDarkContrastLow$1,
+        'neutral-contrast-low': filterDarkContrastLow$1,
+        'contrast-medium': filterDarkContrastMedium$1,
+        'neutral-contrast-medium': filterDarkContrastMedium$1,
+        'contrast-high': filterDarkContrastHigh$1,
+        'neutral-contrast-high': filterDarkContrastHigh$1,
         'notification-success': filterDarkNotificationSuccess,
         'notification-warning': filterDarkNotificationWarning,
         'notification-error': filterDarkNotificationError,
@@ -6682,7 +6700,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$B = (color, size, theme) => {
+const getComponentCss$C = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -6748,7 +6766,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$A = (state, hasAction, hasClose, theme) => {
+const getComponentCss$B = (state, hasAction, hasClose, theme) => {
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
             h5: headingSmallStyle,
@@ -6766,7 +6784,7 @@ const getComponentCss$A = (state, hasAction, hasClose, theme) => {
     })));
 };
 
-const getComponentCss$z = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
@@ -6798,7 +6816,7 @@ const getComponentCss$z = (icon, iconSource, active, stretch, size, hideLabel, a
         } })));
 };
 
-const getComponentCss$y = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -6871,7 +6889,7 @@ const sizeMap$2 = {
     },
     default: { fontSize: '1.25rem' },
 };
-const getComponentCss$x = (aspectRatio, size, weight, align, compact, hasGradient) => {
+const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradient) => {
     const isTopAligned = align === 'top';
     const paddingSizeXS = pxToRemWithUnit(24);
     const gradientPadding = pxToRemWithUnit(72);
@@ -6925,7 +6943,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$w = (size) => {
+const getComponentCss$x = (size) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ position: 'relative', display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
@@ -6993,7 +7011,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, disableCloseButton) => {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$v = (open, fullscreen, disableCloseButton, hasHeader) => {
+const getComponentCss$w = (open, fullscreen, disableCloseButton, hasHeader) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
     return getCss(Object.assign(Object.assign({ '@global': {
             ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (open
@@ -7051,6 +7069,41 @@ const getComponentCss$v = (open, fullscreen, disableCloseButton, hasHeader) => {
         } }));
 };
 
+const toFilter = (values) => `invert(${values[0]}%) sepia(${values[1]}%) saturate(${values[2]}%) hue-rotate(${values[3]}deg) brightness(${values[4]}%) contrast(${values[5]}%)`;
+// copied from icon-styles
+const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
+const filterLightContrastLow = toFilter([93, 11, 36, 201, 89, 102]);
+const filterLightContrastMedium = toFilter([65, 6, 119, 187, 90, 92]);
+const filterLightContrastHigh = toFilter([40, 2, 686, 187, 80, 94]);
+const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
+const filterDarkContrastLow = toFilter([20, 7, 421, 202, 97, 82]);
+const filterDarkContrastMedium = toFilter([54, 4, 229, 187, 91, 84]);
+const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
+const colorToFilterMap = {
+    light: {
+        primary: filterLightPrimary,
+        'contrast-low': filterLightContrastLow,
+        'contrast-medium': filterLightContrastMedium,
+        'contrast-high': filterLightContrastHigh,
+    },
+    dark: {
+        primary: filterDarkPrimary,
+        'contrast-low': filterDarkContrastLow,
+        'contrast-medium': filterDarkContrastMedium,
+        'contrast-high': filterDarkContrastHigh,
+    },
+};
+const getComponentCss$v = (size, color, theme) => {
+    const isSizeInherit = size === 'inherit';
+    const isColorInherit = color === 'inherit';
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            img: Object.assign(Object.assign({ display: 'block', pointerEvents: 'none' }, (!isColorInherit && { filter: colorToFilterMap[theme][color] })), (isSizeInherit && { height: size })),
+        },
+    });
+};
+
 const mediaQueryMinS = getMediaQueryMin('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
@@ -7254,17 +7307,24 @@ const gradientColorMap = {
 };
 const getGradient = (theme, gradientColorTheme) => {
     const gradientColor = gradientColorMap[theme][gradientColorTheme];
-    return (`rgba(${gradientColor},1) 0%,` +
-        `rgba(${gradientColor},0.9) 10%,` +
-        `rgba(${gradientColor},0.668116) 40%,` +
-        `rgba(${gradientColor},0.331884) 60%,` +
-        `rgba(${gradientColor},0.0816599) 80%,` +
+    return (`rgba(${gradientColor},1) 20%,` +
+        `rgba(${gradientColor},0.6) 48%,` +
+        `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
 const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
-    const { backgroundColor, backgroundSurfaceColor, focusColor } = getThemedColors('light');
-    const { hoverColor } = getThemedColors(theme);
+    const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const isDarkTheme = isThemeDark(theme);
+    const backgroundColorMap = {
+        dark: {
+            default: backgroundSurfaceColor,
+            surface: backgroundColor,
+        },
+        light: {
+            default: backgroundColor,
+            surface: backgroundSurfaceColor,
+        },
+    };
     const actionPrevNextStyles = {
         position: 'relative',
         padding: '4px 0',
@@ -7275,19 +7335,17 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'block', height: 'inherit' }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', pointerEvents: 'auto', alignItems: 'center', justifyContent: 'center' }, textSmallStyle), { height: `calc(${fontLineHeight} + 4px)`, width: `calc(${fontLineHeight} + 4px)`, border: 0, outline: 0, cursor: 'pointer', background: gradientColorTheme === 'surface' ? backgroundSurfaceColor : backgroundColor, borderRadius: borderRadiusSmall }), frostedGlassStyle), { visibility: 'hidden' }), (!isDarkTheme && dropShadowLowStyle)), hoverMediaQuery({
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', pointerEvents: 'auto', alignItems: 'center', justifyContent: 'center' }, textSmallStyle), { height: `calc(${fontLineHeight} + 4px)`, width: `calc(${fontLineHeight} + 4px)`, border: 0, outline: 0, cursor: 'pointer', background: backgroundColorMap[theme][gradientColorTheme], borderRadius: borderRadiusSmall }), frostedGlassStyle), { visibility: 'hidden' }), (!isDarkTheme && dropShadowLowStyle)), hoverMediaQuery({
                 transition: getTransition('background-color'),
-                '&:hover': Object.assign({ background: hoverColor }, (isDarkTheme && {
-                    '& > .icon': {
-                        filter: 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)', // TODO: this is not shared from icon?
-                    },
-                })),
+                '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
             })),
         },
-        root: Object.assign(Object.assign({ display: 'grid', gridTemplateColumns: '48px minmax(0, 1fr) 48px' }, hoverMediaQuery({
-            // distinguish gradient width on mobile and desktop
-            gridTemplateColumns: '64px minmax(0, 1fr) 64px',
-        })), { margin: '0 -4px', height: 'inherit' }),
+        root: {
+            display: 'grid',
+            gridTemplateColumns: `calc(${fontLineHeight} + 24px) minmax(0, 1fr) calc(${fontLineHeight} + 24px)`,
+            margin: '0 -4px',
+            height: 'inherit',
+        },
         'scroll-area': {
             gridArea: '1 / 1 / 1 / -1',
             padding: '4px',
@@ -7799,7 +7857,9 @@ const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.re
 const getComponentCss$b = (size, weight, theme) => {
     const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', transform: 'translate3d(0,0,0)' }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({ 
+        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', 
+                // TODO: probably not needed because there is no style with position: fixed
+                transform: 'translate3d(0,0,0)' }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({ 
             // would be nice to use shared selector like '::slotted([role])'
             // but this doesn't work reliably when rendering in browser
             [transformSelector('::slotted([role])')]: {
@@ -8078,36 +8138,50 @@ const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
 };
 
-const cssVariableOrderedSuffix = '--p-internal-text-list-item-ordered-suffix';
-const cssVariableUnorderedWidth = '--p-internal-text-list-item-unordered-width';
-const cssVariableUnorderedHeight = '--p-internal-text-list-item-unordered-height';
-const cssVariableUnorderedTop = '--p-internal-text-list-item-unordered-top';
-const getComponentCss$5 = (listType, orderType) => {
-    const isOrdered = listType === 'ordered';
-    const beforeJssStyles = {
-        position: 'absolute',
-        left: 0,
-    };
+const isListTypeOrdered = (listType) => listType === 'ordered';
+const isOrderTypeNumbered = (orderType) => orderType === 'numbered';
+
+const cssVariablePseudoSuffix = '--p-internal-text-list-pseudo-suffix';
+const cssVariablePaddingTop = '--p-internal-text-list-padding-top';
+const cssVariablePaddingBottom = '--p-internal-text-list-padding-bottom';
+const cssVariableUnorderedPaddingLeft = '--p-internal-text-list-unordered-padding-left';
+const cssVariableOrderedPaddingLeft = '--p-internal-text-list-ordered-padding-left';
+const cssVariableListStyleType = '--p-internal-text-list-list-style-type';
+const counter = 'p-text-list-counter';
+const getComponentCss$5 = (listType, orderType, theme) => {
+    const isOrderedList = isListTypeOrdered(listType);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ position: 'relative', display: 'list-item', color: 'inherit', listStyleType: 'none', paddingLeft: pxToRemWithUnit(isOrdered ? 40 : 24) }, hostHiddenStyles), { '&:before': isOrdered
-                    ? Object.assign(Object.assign(Object.assign({}, beforeJssStyles), { content: `counters(section,".",${orderType === 'numbered' ? 'decimal' : 'lower-latin'}) var(${cssVariableOrderedSuffix},".")`, top: 0, width: pxToRemWithUnit(24), height: 'auto', counterIncrement: 'section', textAlign: 'right', backgroundColor: 'transparent' }), textSmallStyle) : Object.assign(Object.assign({}, beforeJssStyles), { content: '""', width: `var(${cssVariableUnorderedWidth},${pxToRemWithUnit(4)})`, height: `var(${cssVariableUnorderedHeight},${pxToRemWithUnit(4)})`, top: `var(${cssVariableUnorderedTop},calc(1.5em / 2 - 0.125em))`, backgroundColor: 'currentColor' }) })),
-            '::slotted(*)': {
-                [cssVariableOrderedSuffix]: '""',
-                [cssVariableUnorderedWidth]: pxToRemWithUnit(8),
-                [cssVariableUnorderedHeight]: '1px',
-                [cssVariableUnorderedTop]: 'calc(1.5em / 2)',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ counterReset: counter }, hostHiddenStyles))),
+            'ol,ul': Object.assign(Object.assign({}, textSmallStyle), { color: getThemedColors(theme).primaryColor, margin: 0, padding: `var(${cssVariablePaddingTop},0) 0 var(${cssVariablePaddingBottom},0) ${isOrderedList
+                    ? `var(${cssVariableOrderedPaddingLeft},1.5rem)` // reserves space for ::before (root ordered list)
+                    : `var(${cssVariableUnorderedPaddingLeft},.375rem)` // reserves space for ::marker "•" (root unordered list)
+                }`, listStyleType: isOrderedList ? 'none' : `var(${cssVariableListStyleType},'•')` }),
+            // css selector for text-list-item
+            '::slotted(*)': addImportantToEachRule(Object.assign({ [cssVariablePaddingTop]: spacingStaticXSmall, 
+                // TODO: in case it's last root list item with a nested list it would result in outer spacing which is not desired
+                [cssVariablePaddingBottom]: spacingStaticMedium, [cssVariableOrderedPaddingLeft]: '2rem', [cssVariableUnorderedPaddingLeft]: '.625rem', [cssVariableListStyleType]: '"–"' }, (isOrderedList && {
+                '&::before': {
+                    content: `counters(${counter},'.',${isOrderTypeNumbered(orderType) ? 'decimal' : 'lower-latin'}) var(${cssVariablePseudoSuffix},'.')`,
+                    counterIncrement: counter,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    transform: 'translate(-100%,0)',
+                },
+            }))),
         },
     });
 };
 
-const getComponentCss$4 = (theme) => {
+const getComponentCss$4 = () => {
     return getCss({
-        '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ counterReset: 'section' }, hostHiddenStyles))),
-            '[role]': Object.assign({ display: 'block', padding: 0, margin: 0, color: getThemedColors(theme).primaryColor }, textSmallStyle),
-        },
+        '@global': addImportantToEachRule({
+            ':host': Object.assign({ display: 'list-item', position: 'relative', font: 'inherit', color: 'inherit', listStyleType: 'inherit', paddingLeft: spacingStaticMedium }, hostHiddenStyles),
+            '::slotted(*)': {
+                [cssVariablePseudoSuffix]: '""', // don't show suffix "." for nested ordered list
+            },
+        }),
     });
 };
 
@@ -8183,33 +8257,34 @@ const getComponentCss = () => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$S;
-exports.getBannerCss = getComponentCss$R;
-exports.getButtonCss = getComponentCss$O;
-exports.getButtonGroupCss = getComponentCss$Q;
-exports.getButtonPureCss = getComponentCss$P;
-exports.getCarouselCss = getComponentCss$N;
-exports.getCheckboxWrapperCss = getComponentCss$M;
-exports.getContentWrapperCss = getComponentCss$L;
-exports.getDisplayCss = getComponentCss$K;
-exports.getDividerCss = getComponentCss$J;
-exports.getFieldsetWrapperCss = getComponentCss$I;
-exports.getFlexCss = getComponentCss$G;
-exports.getFlexItemCss = getComponentCss$H;
+exports.getAccordionCss = getComponentCss$T;
+exports.getBannerCss = getComponentCss$S;
+exports.getButtonCss = getComponentCss$P;
+exports.getButtonGroupCss = getComponentCss$R;
+exports.getButtonPureCss = getComponentCss$Q;
+exports.getCarouselCss = getComponentCss$O;
+exports.getCheckboxWrapperCss = getComponentCss$N;
+exports.getContentWrapperCss = getComponentCss$M;
+exports.getDisplayCss = getComponentCss$L;
+exports.getDividerCss = getComponentCss$K;
+exports.getFieldsetWrapperCss = getComponentCss$J;
+exports.getFlexCss = getComponentCss$H;
+exports.getFlexItemCss = getComponentCss$I;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$E;
-exports.getGridItemCss = getComponentCss$F;
-exports.getHeadingCss = getComponentCss$D;
-exports.getHeadlineCss = getComponentCss$C;
-exports.getIconCss = getComponentCss$B;
-exports.getInlineNotificationCss = getComponentCss$A;
-exports.getLinkCss = getComponentCss$y;
-exports.getLinkPureCss = getComponentCss$z;
-exports.getLinkSocialCss = getComponentCss$y;
-exports.getLinkTileCss = getComponentCss$x;
-exports.getMarqueCss = getComponentCss$w;
-exports.getModalCss = getComponentCss$v;
+exports.getGridCss = getComponentCss$F;
+exports.getGridItemCss = getComponentCss$G;
+exports.getHeadingCss = getComponentCss$E;
+exports.getHeadlineCss = getComponentCss$D;
+exports.getIconCss = getComponentCss$C;
+exports.getInlineNotificationCss = getComponentCss$B;
+exports.getLinkCss = getComponentCss$z;
+exports.getLinkPureCss = getComponentCss$A;
+exports.getLinkSocialCss = getComponentCss$z;
+exports.getLinkTileCss = getComponentCss$y;
+exports.getMarqueCss = getComponentCss$x;
+exports.getModalCss = getComponentCss$w;
+exports.getModelSignatureCss = getComponentCss$v;
 exports.getPaginationCss = getComponentCss$u;
 exports.getPopoverCss = getComponentCss$t;
 exports.getRadioButtonWrapperCss = getComponentCss$s;
@@ -8235,7 +8310,7 @@ exports.getTagCss = getComponentCss$7;
 exports.getTagDismissibleCss = getComponentCss$8;
 exports.getTextCss = getComponentCss$3;
 exports.getTextFieldWrapperCss = getComponentCss$6;
-exports.getTextListCss = getComponentCss$4;
-exports.getTextListItemCss = getComponentCss$5;
+exports.getTextListCss = getComponentCss$5;
+exports.getTextListItemCss = getComponentCss$4;
 exports.getTextareaWrapperCss = getComponentCss$2;
 exports.getToastCss = getComponentCss;