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

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

@@ -60,15 +60,15 @@ const fontHyphenationStyle = {
 
 const fontLineHeight = 'calc(6px + 2.125ex)';
 
-const fontSizeTextXSmall = '.875rem';
+const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
 
 const fontSizeTextSmall = '1rem';
 
-const fontSizeTextMedium = 'clamp(1.2rem, .12vw + 1.18rem, 1.31rem)';
+const fontSizeTextMedium = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
 
-const fontSizeTextLarge = 'clamp(1.44rem, .3vw + 1.38rem, 1.71rem)';
+const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
 
-const fontSizeTextXLarge = 'clamp(1.73rem, .57vw + 1.61rem, 2.24rem)';
+const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
 
 const fontSizeText = {
     xSmall: fontSizeTextXSmall,
@@ -86,13 +86,13 @@ const fontSizeHeadingLarge = fontSizeTextLarge;
 
 const fontSizeHeadingXLarge = fontSizeTextXLarge;
 
-const fontSizeHeadingXXLarge = 'clamp(2.07rem, .96vw + 1.88rem, 2.94rem)';
+const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
 
-const fontSizeHeadingXXXLarge = 'clamp(2.49rem, 1.51vw + 2.19rem, 3.84rem)';
+const fontSizeHeadingXXXLarge = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
 
-const fontSizeDisplayMedium = 'clamp(2.07rem, 3.32vw + 1.41rem, 5.06rem)';
+const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
 
-const fontSizeDisplayLarge = 'clamp(2.49rem, 5.67vw + 1.35rem, 7.59rem)';
+const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
 const fontWeightRegular = 400;
 
@@ -146,7 +146,9 @@ function getMediaQueryMin(min) {
     return `@media(min-width:${breakpoint[min]})`;
 }
 
-const gridGap = 'clamp(16px, 3.6vw, 36px)';
+const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
+
+const gridGap = spacingFluidMedium;
 
 const gridWidthMin = '320px';
 
@@ -181,43 +183,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
 const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
 const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
 const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
+const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
 
-const _gridColumnSpan = 'span';
-const _cssVariableInternalGridSafeZone = '--pds-internal-grid-safe-zone';
-const getColumns = (repeat) => `repeat(${repeat}, minmax(0, 1fr))`;
-const getOuterColumn = () => `minmax(0, calc(var(${_cssVariableInternalGridSafeZone}) - ${gridGap}))`;
+const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
+const column = 'minmax(0, 1fr)';
+const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
+const getColumnSpan = (span) => `span ${span}`;
 const getGridTemplateColumns = (layout) => layout === 'mobile'
-    ? `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`
-    : `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`;
+    ? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
+    : `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
 ({
-    [_cssVariableInternalGridSafeZone]: gridSafeZoneBase,
-    [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 3`,
-    [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 3`,
-    [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 2`,
-    [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 4`,
-    [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 3`,
+    [_cssVariableGridSafeZone]: gridSafeZoneBase,
+    [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
+    [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
+    [_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
+    [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
+    [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
     display: 'grid',
     gridGap,
     gridTemplateColumns: getGridTemplateColumns('mobile'),
     minWidth: gridWidthMin,
     maxWidth: gridWidthMax,
     margin: 0,
-    padding: `0 max(0px, (100% - ${gridWidthMax}) / 2)`,
+    padding: `0 calc(50% - ${gridWidthMax} / 2)`,
     boxSizing: 'content-box',
     [getMediaQueryMin('s')]: {
-        // TODO: we should define those css variables in global scope by getInitialStyles() partial to reduce repetitive css declaration,
-        //  on the other hand, it's not necessary anymore as soon as CSS Subgrid is supported in all major browsers.
-        //  In addition, it wouldn't work in case only utilities are used without getInitialStyles() partials.
-        //  So maybe, keep it as is.
-        [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 7`,
-        [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
-        [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
-        [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
-        [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
+        [_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
+        [_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
+        [_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
+        [_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
+        [_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
         gridTemplateColumns: getGridTemplateColumns('desktop'),
     },
     [getMediaQueryMin('xxl')]: {
-        [_cssVariableInternalGridSafeZone]: gridSafeZoneXXL,
+        [_cssVariableGridSafeZone]: gridSafeZoneXXL,
     },
 });
 
@@ -237,6 +236,10 @@ const spacingStaticMedium = '16px';
 
 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} `;
@@ -265,6 +268,10 @@ const headingLargeStyle = {
     font: `${_headingFontPartA}${fontSizeHeadingLarge}${_headingFontPartB}`,
 };
 
+const headingXLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingXLarge}${_headingFontPartB}`,
+};
+
 const headingXXLargeStyle = {
     font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
 };
@@ -3739,7 +3746,7 @@ const themeDark = {
     hoverColor: 'rgba(126, 127, 130, 0.20)',
     hoverColorDarken: '#606163',
     activeColor: 'rgba(126, 127, 130, 0.20)',
-    focusColor: '#0A0AFF',
+    focusColor: '#1E5BEB',
     disabledColor: '#7E7F82',
     errorColor: '#CB3333',
     errorColorDarken: '#9A2727',
@@ -5787,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': {
@@ -5943,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})`,
                 },
@@ -5976,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)),
         },
     });
 };
@@ -6040,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 &&
@@ -6068,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',
@@ -6166,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';
@@ -6191,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',
@@ -6220,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',
         },
     })));
 };
@@ -6336,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), {
@@ -6356,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)),
@@ -6421,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)),
@@ -6435,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': {
@@ -6450,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,
@@ -6474,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) => ({
@@ -6492,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) => ({
@@ -6514,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) => ({
@@ -6528,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 }))))),
@@ -6544,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)),
@@ -6597,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)),
@@ -6619,34 +6638,34 @@ const sizeMap$3 = {
     'x-large': fontSizeTextXLarge,
 };
 // TODO, use Tuple to reduce chunk size
-// TODO: shall icon component support 'disabled' color too? For e.g. button-pure disabled state?
-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,
-        '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,
@@ -6654,15 +6673,16 @@ const filter = {
         'notification-neutral': filterLightNotificationInfo, // deprecated
     },
     dark: {
-        primary: filterDarkPrimary,
-        brand: filterDarkPrimary,
-        default: filterDarkPrimary,
-        '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,
@@ -6680,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({
@@ -6746,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,
@@ -6764,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 && {
@@ -6796,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({
@@ -6869,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);
@@ -6923,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))),
@@ -6991,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
@@ -7049,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
@@ -7252,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',
@@ -7273,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',
@@ -7338,7 +7398,7 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
 const ITEM_PADDING = '17px';
 const ICON_SIZE = pxToRemWithUnit(24);
 const ICON_MARGIN = pxToRemWithUnit(4);
-const getColors$3 = (isDisabled, isSelected, theme) => {
+const getColors$2 = (isDisabled, isSelected, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     return {
         buttonColor: isDisabled ? disabledColor : primaryColor,
@@ -7349,7 +7409,7 @@ const getColors$3 = (isDisabled, isSelected, theme) => {
 };
 const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
     const { focusColor } = getThemedColors(theme);
-    const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$3(isDisabled, isSelected, theme);
+    const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'block', outline: 0 }, hostHiddenStyles)),
@@ -7526,90 +7586,63 @@ const getComponentCss$m = (size, theme) => {
     });
 };
 
-// source for svg can be found in sprite.sketch file
-// svg is created via Sketch export, then run through ImageOptim and optimized via icons package
-const getSvg = (color) => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" fill="${color}" width="90" height="10" viewBox="0 0 90 10"><path d="M5.524 9h.996V.456h-.828L3.16 1.464v.912l2.364-.888zm7.006 0h5.017v-.792H13.49v-.156c0-.804.396-1.224 1.476-1.956l.924-.612c.84-.552 1.74-1.236 1.74-2.724 0-1.548-.84-2.448-2.652-2.448-1.908 0-2.604 1.056-2.664 2.832h.936c.096-1.452.624-1.92 1.728-1.92 1.056 0 1.656.444 1.656 1.536 0 1.164-.768 1.68-1.524 2.184l-.924.612c-.948.636-1.656 1.332-1.656 2.652zm9.689-2.592c.084 1.86.9 2.736 2.808 2.736 1.788 0 2.736-.924 2.736-2.424 0-1.236-.504-1.86-1.32-2.136.756-.348 1.128-1.08 1.128-1.848 0-1.524-.852-2.424-2.664-2.424-1.872 0-2.592 1.092-2.688 2.832h.948c.096-1.44.672-1.92 1.74-1.92 1.056 0 1.68.456 1.68 1.512 0 .948-.528 1.488-1.62 1.488h-.804V5.1h.864c1.26 0 1.752.564 1.752 1.62 0 1.152-.588 1.632-1.752 1.632-1.26 0-1.776-.552-1.872-1.944zm9.736.624h3.876V9h.96V7.032h1.212v-.84H36.79V.456h-1.392l-3.444 5.832zm1.044-.84 2.832-4.848v4.848zm9.411-.648h.889c.204-.732.66-1.14 1.704-1.14 1.332 0 1.8.636 1.8 1.944 0 1.344-.444 2.004-1.8 2.004-1.236 0-1.728-.552-1.788-1.656h-.948c.072 1.632.984 2.448 2.736 2.448 1.776 0 2.784-.828 2.784-2.832 0-1.86-.876-2.736-2.688-2.736-.768 0-1.368.24-1.74.66l.252-2.868h3.792V.456h-4.584L42.41 5.16zm9.809.768c0 2.004.984 2.832 2.796 2.832 1.776 0 2.784-.828 2.784-2.832 0-1.86-.9-2.736-2.688-2.736-.396 0-.744.072-1.068.228L56.25.456h-1.068l-2.16 3.312c-.516.792-.804 1.488-.804 2.544zm.996.048c0-1.332.468-1.956 1.8-1.956s1.788.624 1.788 1.956-.444 1.992-1.788 1.992c-1.356 0-1.8-.66-1.8-1.992zm9.075-4.992h4.369L63.215 9h1.02l3.48-7.824v-.72H62.29zm9.929 5.352c0 1.68.96 2.424 2.784 2.424s2.784-.744 2.784-2.424c0-1.008-.408-1.716-1.308-2.052.66-.324 1.116-.9 1.116-1.956 0-1.488-.804-2.4-2.592-2.4-1.764 0-2.592.912-2.592 2.4 0 1.056.468 1.632 1.104 1.956-.9.336-1.296 1.044-1.296 2.052zm.984-.012c0-1.068.564-1.572 1.8-1.572s1.8.504 1.8 1.572c0 1.152-.564 1.644-1.8 1.644s-1.8-.492-1.8-1.644zm1.8-2.4c-1.164 0-1.608-.588-1.608-1.56 0-1.068.54-1.524 1.608-1.524s1.608.456 1.608 1.524c0 .972-.444 1.56-1.608 1.56zm9.904 1.608c.348 0 .684-.06.984-.192L83.767 9h1.068l2.124-3.348c.504-.792.792-1.488.792-2.568 0-1.98-.996-2.772-2.748-2.772-1.764 0-2.76.804-2.76 2.784 0 1.86.888 2.82 2.664 2.82zm.096-.828c-1.284 0-1.764-.66-1.764-1.992 0-1.2.444-1.872 1.764-1.872 1.308 0 1.764.672 1.764 1.872 0 1.332-.48 1.992-1.764 1.992z"/></svg>`)}")`;
-const getColors$2 = (state, theme) => {
-    const { primaryColor, hoverColor, warningColor, successColor, disabledColor } = getThemedColors(theme);
-    const stateToColorMap = {
-        current: 'inherit',
-        complete: successColor,
-        warning: warningColor,
-    };
-    return {
-        primaryColor,
-        hoverColor,
-        iconColor: stateToColorMap[state],
-        invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
-        disabledColor,
-    };
+const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
+    // # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
+    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => (Object.assign(Object.assign({}, result), { [key]: value.replace(/#/g, '%23') })), {});
+    const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
+    const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
+    const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
+    // Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
+    // The optimized file can be found in ./numbers_optim.svg.
+    const svgNumberedCirclePaths = [
+        `${svgCirclePath}<path fill="${fillColor}" d="m12.33 8.67-2.43.91v-.94l2.6-1.03h.85v8.78h-1.02z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m9.46 15.58c0-1.35.73-2.07 1.7-2.72l.95-.63c.78-.52 1.57-1.05 1.57-2.24 0-1.12-.62-1.58-1.7-1.58s-1.68.48-1.78 1.97h-.96c.06-1.82.78-2.91 2.74-2.91s2.72.92 2.72 2.52-.92 2.23-1.79 2.8l-.95.63c-1.11.75-1.52 1.18-1.52 2.01v.16h4.17v.81h-5.15v-.81z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m10.1 13.73c.1 1.43.63 2 1.92 2 1.2 0 1.8-.49 1.8-1.68 0-1.08-.51-1.66-1.8-1.66h-.89v-.9h.83c1.12 0 1.66-.56 1.66-1.53 0-1.08-.64-1.55-1.73-1.55s-1.69.49-1.79 1.97h-.97c.1-1.79.84-2.91 2.76-2.91s2.74.92 2.74 2.49c0 .79-.38 1.54-1.16 1.9.84.28 1.36.92 1.36 2.19 0 1.54-.97 2.49-2.81 2.49-1.96 0-2.8-.9-2.88-2.81z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m8.87 13.6 3.54-5.99h1.43v5.89h1.25v.86h-1.25v2.02h-.99v-2.02h-3.98zm3.98-.1v-4.98l-2.91 4.98z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m9.34 12.45.42-4.83h4.71v.94h-3.9l-.26 2.95c.38-.43 1-.68 1.79-.68 1.86 0 2.76.9 2.76 2.81 0 2.06-1.03 2.91-2.86 2.91s-2.74-.84-2.81-2.51h.97c.06 1.13.57 1.7 1.84 1.7 1.39 0 1.85-.68 1.85-2.06s-.48-2-1.85-2c-1.07 0-1.54.42-1.75 1.17h-.91v-.39z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m9.97 11.02 2.22-3.4h1.1l-2.27 3.44c.33-.16.69-.23 1.1-.23 1.84 0 2.76.9 2.76 2.81 0 2.06-1.04 2.91-2.86 2.91s-2.87-.85-2.87-2.91c0-1.08.3-1.8.83-2.61zm2.05 4.71c1.38 0 1.84-.68 1.84-2.05s-.47-2.01-1.84-2.01-1.85.64-1.85 2.01.46 2.05 1.85 2.05z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m9.21 7.61h5.57v.74l-3.58 8.04h-1.05l3.54-7.84h-4.49v-.94z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m10.47 11.94c-.65-.33-1.13-.92-1.13-2.01 0-1.53.85-2.47 2.66-2.47s2.66.94 2.66 2.47c0 1.08-.47 1.68-1.15 2.01.92.35 1.34 1.07 1.34 2.11 0 1.73-.99 2.49-2.86 2.49s-2.86-.76-2.86-2.49c0-1.04.41-1.76 1.33-2.11zm1.53 3.78c1.27 0 1.85-.51 1.85-1.69 0-1.1-.58-1.61-1.85-1.61s-1.85.52-1.85 1.61c0 1.18.58 1.69 1.85 1.69zm1.65-5.76c0-1.1-.56-1.56-1.65-1.56s-1.65.47-1.65 1.56c0 1 .46 1.6 1.65 1.6s1.65-.6 1.65-1.6z"/>`,
+        `${svgCirclePath}<path fill="${fillColor}" d="m9.16 10.33c0-2.03 1.02-2.86 2.83-2.86s2.82.81 2.82 2.85c0 1.11-.3 1.82-.81 2.64l-2.18 3.44h-1.1l2.18-3.37c-.31.14-.65.2-1.01.2-1.82 0-2.74-.99-2.74-2.9zm4.65 0c0-1.23-.47-1.92-1.81-1.92s-1.81.69-1.81 1.92c0 1.37.49 2.05 1.81 2.05s1.81-.68 1.81-2.05z"/>`,
+    ];
+    return svgNumberedCirclePaths[stepCount];
 };
-// following constants are defined in em to ensure proportional size based on parents font size
-// TODO: to be sure counter sizing and positioning is in sync with icon, then we need to use a svg instead
-// TODO: simplify calculation of positioning by using css grid and/or svg
-const spriteStepSize = 0.625; // 10px / font size in px
-const spriteWidth = `${9 * spriteStepSize}em`; // 9 steps
-const spriteHeight = `${spriteStepSize}em`; // height of sprite / font size in px
-const counterCirclePosition = '0.171875em'; // 2.75px
-const counterCircleSize = `calc(${fontLineHeight} - ${counterCirclePosition} * 2)`;
-const counterValuePosition = `calc((${fontLineHeight} - ${spriteStepSize}em) / 2)`;
-const counterValueSize = spriteHeight;
 const getComponentCss$l = (state, disabled, theme) => {
-    const { primaryColor, hoverColor, iconColor, invertedBaseColor, disabledColor } = getColors$2(state, theme);
-    const isStateCurrentOrUndefined = !state || state === 'current';
+    const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
+    const isStateCurrent = state === 'current';
+    const isStateCurrentOrUndefined = !state || isStateCurrent;
     const isDisabled = !state || disabled;
     return getCss(Object.assign(Object.assign({ '@global': {
             ':host': Object.assign(Object.assign({}, (isStateCurrentOrUndefined &&
-                Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::after`]: {
-                        backgroundPositionX: `${-i * spriteStepSize}em`,
+                Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::before`]: {
+                        backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
+                            primaryColor,
+                            invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
+                            disabledColor,
+                        }, isStateCurrent)),
                     } })), {}))), addImportantToEachRule(Object.assign(Object.assign({ fontSize: 'inherit' }, hostHiddenStyles), { '&(:not(:last-of-type))': {
-                    marginRight: '1em',
+                    margin: `0 ${spacingFluidXSmall} 0 0`,
                 } }))),
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), margin: 0, padding: `0 0 0 calc(${fontLineHeight} + ${pxToRemWithUnit(4)})`, background: 0, border: 0 }, textSmallStyle), { fontSize: 'inherit', whiteSpace: 'nowrap' }), getFocusJssStyle()), (isStateCurrentOrUndefined
-                ? // counter circle icon via css
-                    {
-                        cursor: isDisabled ? 'not-allowed' : 'auto',
-                        // TODO: combine &::before and &::after element
-                        '&::before': Object.assign({ 
-                            // circle of counter element
-                            content: '""', position: 'absolute', top: '50%', transform: 'translateY(-50%)', left: counterCirclePosition, height: counterCircleSize, width: counterCircleSize, borderRadius: '50%' }, (isDisabled
-                            ? {
-                                boxSizing: 'border-box',
-                                border: `1px solid ${disabledColor}`,
-                            }
-                            : {
-                                background: primaryColor,
-                            })),
-                        '&::after': {
-                            // value of counter element
-                            content: '""',
-                            position: 'absolute',
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            left: counterValuePosition,
-                            width: counterValueSize,
-                            height: counterValueSize,
-                            background: `${getSvg(isDisabled ? disabledColor : invertedBaseColor)} 0 50% / ${spriteWidth} ${spriteHeight} no-repeat`,
-                        },
-                    }
-                : // other icons via icon component
-                    isDisabled
-                        ? {
-                            cursor: 'not-allowed',
-                            textDecoration: 'none',
-                        }
-                        : Object.assign({ cursor: 'pointer', textDecoration: 'underline' }, hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover .icon': {
-                                color: hoverColor,
-                            } }))))),
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', gap: '3px', color: isDisabled ? disabledColor : primaryColor, padding: '4px 10px 4px 6px', background: 0, border: 0, outline: 0 }, textSmallStyle), { fontSize: 'inherit', width: 'max-content', cursor: isDisabled ? 'not-allowed' : 'pointer', borderRadius: borderRadiusSmall }), (isStateCurrent && Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }))), (!isDisabled &&
+                hoverMediaQuery({
+                    transition: getTransition('background-color'),
+                    '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
+                }))), (isStateCurrentOrUndefined && {
+                // counter
+                // Pseudo element is needed to center the counter to the text, as it is not working optimal directly on the button
+                '&::before': {
+                    content: '""',
+                    height: fontLineHeight,
+                    width: fontLineHeight,
+                },
+            })), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(0)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
+                    borderColor: 'transparent',
+                } }),
         } }, (!isStateCurrentOrUndefined && {
-        // other icons via icon component
+        // complete / warning icons via icon component
         icon: {
-            position: 'absolute',
-            left: 0,
             height: fontLineHeight,
             width: fontLineHeight,
-            color: isDisabled ? disabledColor : iconColor,
-            transition: getTransition('color'),
         },
     })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
 };
@@ -7619,7 +7652,7 @@ const getComponentCss$k = (size) => {
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
         },
-        scroller: Object.assign(Object.assign({ display: 'flex' }, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
+        scroller: Object.assign(Object.assign({}, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
     });
 };
 
@@ -7824,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])')]: {
@@ -8103,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
+            },
+        }),
     });
 };
 
@@ -8208,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;
@@ -8260,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;