@porsche-design-system/components-react 3.0.0-alpha.3 → 3.0.0-alpha.4

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

@@ -51,6 +51,10 @@ const dropShadowLowStyle = {
     filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
 };
 
+const dropShadowHighStyle = {
+    filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
+};
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -99,13 +103,13 @@ const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
 
 const fontWeightRegular = 400;
 
-const fontWeightSemiBold$1 = 600;
+const fontWeightSemiBold = 600;
 
 const fontWeightBold = 700;
 
 const fontWeight = {
     regular: fontWeightRegular,
-    semiBold: fontWeightSemiBold$1,
+    semiBold: fontWeightSemiBold,
     bold: fontWeightBold,
 };
 
@@ -174,15 +178,60 @@ const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
 
 const gridGap = spacingFluidMedium;
 
-const gridWidthMax = '2560px';
-
+const _gridWidthMax = '2560px';
 // fluid sizing calculated by https://fluidtypography.com/#app-get-started
-// gridSafeZoneBase: Viewport Width Range = 320 - 1920px / Size Range = 22 - 192px
-const gridSafeZoneBase = 'clamp(22px, 10.625vw - 12px, 192px)';
+const _gridSafeZoneBase = 'max(22px, 10.625vw - 12px)'; // viewport-width range = 320 - 760px / size range = 22 - 68.75px
+const _gridSafeZoneS = 'calc(5vw - 16px)'; // viewport-width range = 760 - 1920px / size range = 22(22.75) - 80(79.71)px
+const _gridSafeZoneXXL = 'min(50vw - 880px, 400px)'; // viewport-width range = 1920 - 2560px / size range = 80(79.71)px - 400(399.71)px
 
-// fluid sizing calculated by https://fluidtypography.com/#app-get-started
-// gridSafeZoneXXL: Viewport Width Range = 1920 - 2560px / Size Range = 192 - 512px
-const gridSafeZoneXXL = 'clamp(192px, 50vw - 768px, 512px)';
+const columnMap = {
+    narrow: 4,
+    basic: 2,
+    extended: 1,
+};
+const gridColumnWidthS = `calc((100vw - ${_gridSafeZoneS} * 2 - ${gridGap} * 15) / 16)`;
+const gridColumnWidthXXL = `calc((min(100vw, ${_gridWidthMax}) - ${_gridSafeZoneXXL} * 2 - ${gridGap} * 15) / 16)`;
+const _gridPadding = `max(0px, 50vw - ${_gridWidthMax} / 2)`;
+const _getGridOffsetS = (width) => `calc(${_gridSafeZoneS} + (${gridGap} + ${gridColumnWidthS}) * ${columnMap[width]})`;
+const _getGridOffsetXXL = (width) => `calc(${_gridPadding} + ${_gridSafeZoneXXL} + (${gridGap} + ${gridColumnWidthXXL}) * ${columnMap[width]})`;
+
+const gridFullOffset = _gridPadding;
+
+const gridExtendedOffsetBase = _gridSafeZoneBase;
+
+const gridExtendedOffsetS = _getGridOffsetS('extended');
+
+const gridExtendedOffsetXXL = _getGridOffsetXXL('extended');
+
+const gridExtendedOffset = {
+    base: gridExtendedOffsetBase,
+    s: gridExtendedOffsetS,
+    xxl: gridExtendedOffsetXXL,
+};
+
+const gridBasicOffsetBase = _gridSafeZoneBase;
+
+const gridBasicOffsetS = _getGridOffsetS('basic');
+
+const gridBasicOffsetXXL = _getGridOffsetXXL('basic');
+
+const gridBasicOffset = {
+    base: gridBasicOffsetBase,
+    s: gridBasicOffsetS,
+    xxl: gridBasicOffsetXXL,
+};
+
+const gridNarrowOffsetBase = _gridSafeZoneBase;
+
+const gridNarrowOffsetS = _getGridOffsetS('narrow');
+
+const gridNarrowOffsetXXL = _getGridOffsetXXL('narrow');
+
+const gridNarrowOffset = {
+    base: gridNarrowOffsetBase,
+    s: gridNarrowOffsetS,
+    xxl: gridNarrowOffsetXXL,
+};
 
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
@@ -219,7 +268,7 @@ const displayLargeStyle = {
     font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
 };
 
-const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold} `;
 const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
 const headingSmallStyle = {
@@ -3754,13 +3803,10 @@ const addImportantToEachRule = (input) => {
             typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
             result), {});
 };
-const getHoverJssStyle = ({ theme } = { theme: 'light' }) => {
-    return {
-        transition: getTransition('color'),
-        '&:hover': {
-            color: getThemedColors(theme).hoverColor,
-        },
-    };
+// TODO: this is workaround, in order the colors to be bundled in the main bundle, we need to have at least one function here, which is used in project and which calls "getThemedColors"
+// TODO: This mechanism needs to be investigated as part of refactoring
+const doGetThemedColors = (theme = 'light') => {
+    return getThemedColors(theme);
 };
 const getInsetJssStyle = (value = 0) => {
     value = value === 0 || value === 'auto' ? value : `${value}px`;
@@ -3915,14 +3961,14 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-
 const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const hasDocument = typeof document !== 'undefined';
+
+hasDocument && 'scrollBehavior' in document.documentElement.style;
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -3935,7 +3981,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$T = (size, compact, open, theme) => {
+const getComponentCss$W = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const border = `1px solid ${contrastLowColor}`;
     return getCss(Object.assign(Object.assign({ '@global': {
@@ -4004,50 +4050,9 @@ const getComponentCss$T = (size, compact, open, theme) => {
         } }));
 };
 
-const TOAST_Z_INDEX = 999999;
-const MODAL_Z_INDEX = 99999;
-const POPOVER_Z_INDEX = 9999;
-const BANNER_Z_INDEX = 99;
-
-const oneColumnWidthS = `calc((100% - ${gridSafeZoneBase} * 2 - ${gridGap} * 13) / 14)`;
-const oneColumnWidthXXL = `calc((min(100%, ${gridWidthMax}) - ${gridSafeZoneXXL} * 2 - ${gridGap} * 13) / 14)`;
-const offsetHorizontalXXL = `max(0px, (100% - ${gridWidthMax}) / 2)`;
-const widthMap$1 = {
-    narrow: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('s')]: {
-            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} * 3 + ${oneColumnWidthS} * 3)`,
-        },
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} * 3 + ${oneColumnWidthXXL} * 3)`,
-        },
-    },
-    basic: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('s')]: {
-            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} + ${oneColumnWidthS})`,
-        },
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} + ${oneColumnWidthXXL})`,
-        },
-    },
-    extended: {
-        padding: `0 ${gridSafeZoneBase}`,
-        [getMediaQueryMin('xxl')]: {
-            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL})`,
-        },
-    },
-};
-const getContentWrapperStyle = (width) => {
-    return Object.assign({ display: 'block', margin: 0, padding: `0 ${offsetHorizontalXXL}`, width: 'auto', minWidth: 0, maxWidth: gridWidthMax }, widthMap$1[width]);
-};
-
 const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
 const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
 const ANIMATION_DURATION = 600;
-const getBoxShadow = () => ({
-    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05),0 15px 20px 0 rgba(0,0,0,0.2)',
-});
 const getAnimationIn = (keyframesName, durationVar) => {
     const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
     return {
@@ -4074,69 +4079,67 @@ const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
 
-const bannerPositionTypeVar = '--p-banner-position-type';
-const bannerPositionTopVar = '--p-banner-position-top';
-const bannerPositionBottomVar = '--p-banner-position-bottom';
-const bannerZIndexVar = '--p-internal-banner-z-index';
-const bannerAnimationDurationVar = '--p-animation-duration';
-const bannerOffset = '56px';
-const mediaQueryBase = getMediaQueryMinMax('base', 's');
+const TOAST_Z_INDEX = 999999;
+const MODAL_Z_INDEX = 99999;
+const POPOVER_Z_INDEX = 9999;
+const BANNER_Z_INDEX = 99;
+
+const cssVariableTop = '--p-banner-position-top';
+const cssVariableBottom = '--p-banner-position-bottom';
+const cssVariableAnimationDuration = '--p-animation-duration';
+const cssVariableZIndex = '--p-internal-banner-z-index';
+const mediaQueryBaseToS = getMediaQueryMinMax('base', 's');
 const mediaQueryS$1 = getMediaQueryMin('s');
+const mediaQueryXXL$1 = getMediaQueryMin('xxl');
 const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
     opacity: 0,
     transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
 });
-const widthMap = {
-    fluid: 'extended',
-    extended: 'extended',
-    basic: 'basic',
-};
-const getComponentCss$S = (width) => {
+const getComponentCss$V = () => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({ 
-                // TODO: Why is nothing set as important here?
-                [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})`,
-                },
-                [mediaQueryS$1]: {
-                    top: `var(${bannerPositionTopVar})`,
-                },
-            })), { '&(.hydrated),&(.ssr)': {
-                    [mediaQueryBase]: getAnimationIn('mobileIn', bannerAnimationDurationVar),
-                    [mediaQueryS$1]: getAnimationIn('desktopIn', bannerAnimationDurationVar),
+            ':host': Object.assign(Object.assign({ opacity: 0 }, addImportantToEachRule(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, willChange: 'opacity,transform' }, dropShadowHighStyle), { [mediaQueryS$1]: {
+                    top: `var(${cssVariableTop})`,
+                    bottom: 'auto',
+                    left: gridExtendedOffsetS,
+                    right: gridExtendedOffsetS,
+                }, [mediaQueryXXL$1]: {
+                    left: gridExtendedOffsetXXL,
+                    right: gridExtendedOffsetXXL,
+                } }), hostHiddenStyles))), { '&(.hydrated),&(.ssr)': {
+                    [mediaQueryBaseToS]: getAnimationIn('mobileIn', cssVariableAnimationDuration),
+                    [mediaQueryS$1]: getAnimationIn('desktopIn', cssVariableAnimationDuration),
                 }, '&(.banner--close)': {
-                    [mediaQueryBase]: getAnimationOut('mobileOut'),
+                    [mediaQueryBaseToS]: getAnimationOut('mobileOut'),
                     [mediaQueryS$1]: getAnimationOut('desktopOut'),
                 } }),
-            '@keyframes mobileIn': getKeyframesMobile('in', bannerPositionBottomVar),
-            '@keyframes mobileOut': getKeyframesMobile('out', bannerPositionBottomVar),
-            '@keyframes desktopIn': getKeyframesDesktop('in', bannerPositionTopVar),
-            '@keyframes desktopOut': getKeyframesDesktop('out', bannerPositionTopVar),
+            '@keyframes mobileIn': getKeyframesMobile('in', cssVariableBottom),
+            '@keyframes mobileOut': getKeyframesMobile('out', cssVariableBottom),
+            '@keyframes desktopIn': getKeyframesDesktop('in', cssVariableTop),
+            '@keyframes desktopOut': getKeyframesDesktop('out', cssVariableTop),
         },
-        root: getBoxShadow(),
     });
 };
 
-const getDirectionJssStyle = (direction) => {
-    const style = {
-        column: {
-            flexFlow: 'column nowrap',
-            alignItems: 'stretch',
-        },
-        row: {
-            flexFlow: 'row wrap',
-            alignItems: 'center',
-        },
-    };
-    return style[direction];
+const groupDirectionJssStyles = {
+    column: {
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch',
+    },
+    row: {
+        flexFlow: 'row wrap',
+        alignItems: 'center',
+    },
+};
+const getGroupDirectionJssStyles = (direction) => {
+    return groupDirectionJssStyles[direction];
 };
-const getComponentCss$R = (direction) => {
+
+const getComponentCss$U = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getDirectionJssStyle)),
+            div: Object.assign({ display: 'flex', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getGroupDirectionJssStyles)),
         },
     });
 };
@@ -4157,7 +4160,7 @@ const getFontSizeText = (size) => {
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
-        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle(0)), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
+        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
@@ -4199,7 +4202,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$Q = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$T = (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',
@@ -4222,6 +4225,111 @@ const getComponentCss$Q = (icon, iconSource, active, isLoading, isDisabledOrLoad
     }))));
 };
 
+const fontWeightMap = {
+    regular: fontWeightRegular,
+    'semi-bold': fontWeightSemiBold,
+    bold: fontWeightBold,
+};
+const getFontWeight = (weight) => {
+    return fontWeightMap[weight];
+};
+
+const getThemedTypographyColor = (theme, textColor) => {
+    // TODO: don't destructure for better minification
+    const { primaryColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, infoColor, } = getThemedColors(theme);
+    const colorMap = {
+        primary: primaryColor,
+        default: primaryColor,
+        'contrast-low': contrastLowColor,
+        'contrast-medium': contrastMediumColor,
+        'contrast-high': contrastHighColor,
+        'notification-success': successColor,
+        'notification-warning': warningColor,
+        'notification-error': errorColor,
+        'notification-info': infoColor,
+        inherit: 'currentColor',
+    };
+    return colorMap[textColor];
+};
+
+const aspectRatioPaddingMap = {
+    '1:1': '100%',
+    '4:3': '75%',
+    '3:4': '133.33%',
+    '16:9': '56.25%',
+    '9:16': '177.75%',
+};
+const getTileBaseStyles = (aspectRatio, isDisabled) => {
+    return {
+        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)) }, addImportantToEachRule({
+            '::slotted': {
+                '&(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle()),
+                '&(img)': {
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'cover',
+                },
+            },
+        })),
+        root: Object.assign(Object.assign({ position: 'relative', height: 0, overflow: 'hidden', transform: 'translate3d(0,0,0)', borderRadius: borderRadiusMedium, color: getThemedTypographyColor('dark', 'primary') }, buildResponsiveStyles(aspectRatio, (ratio) => ({
+            paddingTop: aspectRatioPaddingMap[ratio],
+        }))), (!isDisabled &&
+            hoverMediaQuery({
+                '&:hover .image-container': {
+                    transform: 'scale3d(1.05,1.05,1.05)',
+                },
+            }))),
+        'image-container': Object.assign({ position: 'absolute', transition: getTransition('transform') }, getInsetJssStyle()),
+        content: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            display: 'flex',
+            justifyItems: 'start',
+            gap: spacingStaticMedium,
+            borderRadius: borderRadiusMedium,
+            '@media (forced-colors: active)': {
+                background: 'rgba(0,0,0,0.7)',
+            },
+        },
+    };
+};
+
+const sizeMap$5 = {
+    inherit: { fontSize: 'inherit' },
+    default: { fontSize: fontSizeTextMedium },
+};
+const getButtonLinkTileStyles = (aspectRatio, size, weight, // to get deprecated semibold typed
+align, compact, hasGradient, isDisabled) => {
+    const isTopAligned = align === 'top';
+    return Object.assign({}, mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
+        '@global': {
+            p: Object.assign(Object.assign({ maxWidth: pxToRemWithUnit(550), margin: 0 }, textLargeStyle), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
+                fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
+            })))),
+        },
+        content: Object.assign(Object.assign(Object.assign({ display: 'grid' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { padding: isTopAligned
+                ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
+                : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}` }), mergeDeep(hasGradient &&
+            buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
+            ? Object.assign({ alignItems: 'center', gridTemplateColumns: 'auto 24px', gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : {
+            gridTemplateRows: 'auto auto',
+            gridTemplateColumns: 'auto',
+        }))),
+        'link-or-button-pure': buildResponsiveStyles(compact, (isCompact) => ({
+            display: isCompact ? 'inline-block' : 'none',
+        })),
+        'link-or-button': Object.assign({ minHeight: '54px' }, buildResponsiveStyles(compact, (isCompact) => ({
+            display: isCompact ? 'none' : 'inline-block',
+        }))),
+    }));
+};
+
+const getComponentCss$S = (isDisabledOrLoading, ...args) => {
+    const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
+    return getCss(Object.assign(Object.assign({}, buttonLinkTileStyles), { root: Object.assign(Object.assign({}, buttonLinkTileStyles.root), { cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer' }) }));
+};
+
 const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor$1 } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
@@ -4297,7 +4405,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$P = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$R = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4332,33 +4440,15 @@ const mediaQueryXXL = getMediaQueryMin('xxl');
 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}`,
-        },
-    },
+    basic: gridBasicOffset,
+    extended: gridExtendedOffset,
 };
-const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
+const getComponentCss$Q = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
-            ':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)),
+            ':host': addImportantToEachRule(Object.assign({ display: 'flex', gap: spacingFluidMedium, flexDirection: 'column', 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({
@@ -4372,11 +4462,16 @@ const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
                         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 && {
+        }, header: {
+            display: 'grid',
+            padding: `0 ${spacingMap[width].base}`,
+            [mediaQueryS]: Object.assign(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: {
+            })), { padding: `0 ${spacingMap[width].s}` }),
+            [mediaQueryXXL]: {
+                padding: `0 ${spacingMap[width].xxl}`,
+            },
+        }, nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4389,9 +4484,18 @@ const getComponentCss$O = (width, hasPagination, alignHeader, theme) => {
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
-            '&__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': {
+            '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule({
+                padding: `0 ${spacingMap[width].base}`,
+                [getMediaQueryMax('xs')]: {
+                    paddingRight: `calc(${gridBasicOffsetBase} + ${gridGap})`, // we need to give cut off slides a bit more space on mobile views
+                },
+                [mediaQueryS]: {
+                    padding: `0 ${spacingMap[width].s}`,
+                },
+                [mediaQueryXXL]: {
+                    padding: `0 ${spacingMap[width].xxl}`,
+                },
+            })), { '&--draggable': {
                     userSelect: 'none',
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
@@ -4494,7 +4598,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$N = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$P = (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), {
@@ -4514,34 +4618,34 @@ const getComponentCss$N = (hideLabel, state, isDisabled, theme) => {
     }));
 };
 
-const getComponentCss$M = (width) => {
+const widthMap = {
+    narrow: gridNarrowOffset,
+    basic: gridBasicOffset,
+    extended: gridExtendedOffset,
+};
+const getComponentCss$O = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
         },
-        root: getContentWrapperStyle(width),
+        root: Object.assign({ minWidth: 0 }, (['full', 'fluid'].includes(width)
+            ? {
+                padding: `0 ${gridFullOffset}`,
+            }
+            : {
+                padding: `0 ${widthMap[width].base}`,
+                [getMediaQueryMin('s')]: {
+                    padding: `0 ${widthMap[width].s}`,
+                },
+                [getMediaQueryMin('xxl')]: {
+                    padding: `0 ${widthMap[width].xxl}`,
+                },
+            })),
     });
 };
 
 const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getThemedTypographyColor = (theme, textColor) => {
-    const { primaryColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, infoColor, } = getThemedColors(theme);
-    const colorMap = {
-        primary: primaryColor,
-        default: primaryColor,
-        'contrast-low': contrastLowColor,
-        'contrast-medium': contrastMediumColor,
-        'contrast-high': contrastHighColor,
-        'notification-success': successColor,
-        'notification-warning': warningColor,
-        'notification-error': errorColor,
-        'notification-info': infoColor,
-        inherit: 'currentColor',
-    };
-    return colorMap[textColor];
-};
-
 const getTypographyRootJssStyle = (baseTextStyle, responsiveStyle, align, color, ellipsis, theme) => {
     return Object.assign(Object.assign(Object.assign(Object.assign({ margin: 0, padding: 0 }, baseTextStyle), { color: getThemedTypographyColor(theme, color), textAlign: align, letterSpacing: 'normal', listStyleType: 'none', whiteSpace: 'inherit' }), (ellipsis && {
         maxWidth: '100%',
@@ -4570,12 +4674,12 @@ const getTypographySlottedJssStyle = () => {
     };
 };
 
-const sizeMap$5 = {
+const sizeMap$4 = {
     small: fontSizeDisplaySmall,
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$L = (size, align, color, ellipsis, theme) => {
+const getComponentCss$N = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4584,12 +4688,12 @@ const getComponentCss$L = (size, align, color, ellipsis, theme) => {
             },
         },
         root: getTypographyRootJssStyle(displayLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
-            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$5[sizeValue],
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
         })), align, color, ellipsis, theme),
     });
 };
 
-const getComponentCss$K = (color, orientation, theme) => {
+const getComponentCss$M = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -4604,7 +4708,21 @@ const getComponentCss$K = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$J = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$L = (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,
+                border: 'none',
+            } }, (hasLabel && {
+            legend: Object.assign({ margin: `0 0 ${spacingStaticMedium}`, padding: 0, color: getThemedColors(theme).primaryColor }, (labelSize === 'small' ? headingSmallStyle : headingMediumStyle)),
+        })) }, getFunctionalComponentRequiredStyles()), mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+        message: {
+            marginTop: spacingStaticMedium,
+        },
+    })));
+};
+
+const getComponentCss$K = (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,
@@ -4628,7 +4746,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$J = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -4646,7 +4764,7 @@ const getComponentCss$I = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$H = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$I = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -4668,7 +4786,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$G = (size, offset) => {
+const getComponentCss$H = (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) => ({
@@ -4682,7 +4800,7 @@ const getComponentCss$G = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$F = (direction, wrap) => {
+const getComponentCss$G = (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 }))))),
@@ -4690,14 +4808,14 @@ const getComponentCss$F = (direction, wrap) => {
     });
 };
 
-const sizeMap$4 = {
+const sizeMap$3 = {
     small: fontSizeHeadingSmall,
     medium: fontSizeHeadingMedium,
     large: fontSizeHeadingLarge,
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$E = (size, align, color, ellipsis, theme) => {
+const getComponentCss$F = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4706,7 +4824,7 @@ const getComponentCss$E = (size, align, color, ellipsis, theme) => {
             },
         },
         root: getTypographyRootJssStyle(headingXXLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
-            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$3[sizeValue],
         })), align, color, ellipsis, theme),
     });
 };
@@ -4751,7 +4869,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$E = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4777,16 +4895,16 @@ const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
 const filterLightNotificationSuccess = toFilter([62, 61, 551, 86, 86, 80]);
 const filterLightNotificationWarning = toFilter([74, 91, 343, 348, 92, 86]);
 const filterLightNotificationError = toFilter([25, 62, 2003, 335, 100, 97]);
-const filterLightNotificationInfo = toFilter([31, 32, 5493, 216, 90, 107]);
+const filterLightNotificationInfo = toFilter([44, 100, 492, 195, 86, 221]);
 const filterDarkNotificationSuccess = toFilter([59, 22, 1342, 86, 96, 88]);
 const filterDarkNotificationWarning = toFilter([72, 94, 303, 354, 89, 94]);
 const filterDarkNotificationError = toFilter([28, 34, 3133, 333, 95, 100]);
-const filterDarkNotificationInfo = toFilter([31, 32, 5493, 216, 90, 107]);
+const filterDarkNotificationInfo = toFilter([56, 77, 4175, 198, 104, 98]);
 
 const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
 const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
 
-const sizeMap$3 = {
+const sizeMap$2 = {
     'xx-small': fontSizeTextXXSmall,
     'x-small': fontSizeTextXSmall,
     small: fontSizeTextSmall,
@@ -4828,7 +4946,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$C = (color, size, theme) => {
+const getComponentCss$D = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -4844,7 +4962,7 @@ const getComponentCss$C = (color, size, theme) => {
                 : {
                     width: fontLineHeight,
                     height: fontLineHeight,
-                    font: `${sizeMap$3[size]} ${fontFamily}`,
+                    font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
             [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
         })),
@@ -4895,7 +5013,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$B = (state, hasAction, hasClose, theme) => {
+const getComponentCss$C = (state, hasAction, hasClose, theme) => {
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
             h5: headingSmallStyle,
@@ -4913,7 +5031,7 @@ const getComponentCss$B = (state, hasAction, hasClose, theme) => {
     })));
 };
 
-const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$B = (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 && {
@@ -4940,7 +5058,7 @@ const getComponentCss$A = (icon, iconSource, active, stretch, size, hideLabel, a
         } })));
 };
 
-const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$A = (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({
@@ -4965,67 +5083,27 @@ const getComponentCss$z = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }))));
 };
 
-const fontWeightMap = {
-    regular: fontWeightRegular,
-    'semi-bold': fontWeightSemiBold$1,
-    bold: fontWeightBold,
-};
-const getFontWeight = (weight) => {
-    return fontWeightMap[weight];
-};
+const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const aspectRatioPaddingTop = {
-    '1:1': '100%',
-    '4:3': '75%',
-    '3:4': '133.33%',
-    '16:9': '56.25%',
-    '9:16': '177.75%',
-};
-const getGradientBackground = (isCompact, isTopAligned) => {
-    return isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle;
-};
-const sizeMap$2 = {
-    inherit: { fontSize: 'inherit' },
-    default: { fontSize: fontSizeTextMedium },
+const getComponentCss$z = (aspectRatio, weight, direction, hasDescription) => {
+    const tileBaseStyles = getTileBaseStyles(aspectRatio);
+    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({}, tileBaseStyles), { '@global': Object.assign(Object.assign({}, tileBaseStyles['@global']), { [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
+                margin: addImportantToRule(0),
+            } }), content: Object.assign(Object.assign(Object.assign({}, tileBaseStyles.content), { flexDirection: 'column', bottom: 0, padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}` }), gradientToTopStyle), model: {
+            position: 'absolute',
+            top: spacingFluidMedium,
+            left: spacingFluidMedium,
+        }, heading: Object.assign(Object.assign({ margin: 0 }, textLargeStyle), buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) }))) }), (hasDescription && {
+        description: Object.assign({ margin: '-12px 0 0 ' }, textSmallStyle),
+    })), { 'link-group': Object.assign({ display: 'flex', width: '100%', gap: spacingFluidSmall }, buildResponsiveStyles(direction, getGroupDirectionJssStyles)), 'link-overlay': Object.assign({ 
+            // covers entire tile, used for expanded click-area only
+            position: 'fixed' }, getInsetJssStyle()) }));
 };
-const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradient) => {
-    const isTopAligned = align === 'top';
-    return getCss({
-        '@global': Object.assign(Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)) }, addImportantToEachRule({
-            '::slotted(picture),::slotted(img)': Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle()),
-            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle(0)),
-            '::slotted(img)': {
-                height: '100%',
-                width: '100%',
-                objectFit: 'cover',
-            },
-        })), { p: Object.assign(Object.assign({ color: getThemedTypographyColor('dark', 'primary'), maxWidth: pxToRemWithUnit(550), margin: 0 }, textLargeStyle), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$2[s]), buildResponsiveStyles(weight, (w) => ({
-                fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w),
-            })))) }),
-        root: Object.assign(Object.assign({ height: 0, position: 'relative', transform: 'translate3d(0,0,0)' }, hoverMediaQuery({
-            '&:hover': {
-                '& ::slotted(picture),::slotted(img)': addImportantToEachRule({
-                    transform: 'scale3d(1.05, 1.05, 1.05)',
-                }),
-            },
-        })), buildResponsiveStyles(aspectRatio, (ratio) => ({
-            paddingTop: aspectRatioPaddingTop[ratio],
-        }))),
-        'image-container': Object.assign({ position: 'absolute', overflow: 'hidden', borderRadius: borderRadiusMedium }, getInsetJssStyle(0)),
-        content: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { left: 0, right: 0, display: 'grid', justifyItems: 'start', borderRadius: borderRadiusMedium, padding: align === 'bottom'
-                ? `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`
-                : `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`, gap: spacingStaticMedium }), mergeDeep(hasGradient &&
-            buildResponsiveStyles(compact, (isCompact) => getGradientBackground(isCompact, isTopAligned)), buildResponsiveStyles(compact, (isCompact) => isCompact
-            ? Object.assign({ alignItems: 'center', gridTemplateColumns: 'auto 24px', gridTemplateRows: 'auto' }, (isTopAligned ? { top: 0 } : { bottom: 0 })) : { gridTemplateRows: 'auto auto', gridTemplateColumns: 'auto' }))), { '@media (forced-colors: active)': {
-                background: 'rgba(0,0,0,0.7)',
-            } }),
-        'link-pure': buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'inline-block' : 'none',
-        })),
-        link: Object.assign({ minHeight: '54px' }, buildResponsiveStyles(compact, (isCompact) => ({ display: isCompact ? 'none' : 'inline-block' }))),
-        // is used for expanded click-area only
-        'link-overlay': Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle(0)), { outline: 0 }),
-    });
+
+const getComponentCss$y = (...args) => {
+    return getCss(Object.assign(Object.assign({}, getButtonLinkTileStyles(...args)), { 'link-overlay': Object.assign({ 
+            // covers entire tile, used for expanded click-area only
+            position: 'fixed' }, getInsetJssStyle()) }));
 };
 
 const baseSizes = {
@@ -5073,10 +5151,10 @@ const getFullscreenJssStyles = (fullscreen) => {
             borderRadius: 0,
         }
         : {
-            minWidth: pxToRemWithUnit(275.2),
-            maxWidth: pxToRemWithUnit(1536),
+            minWidth: '276px',
+            maxWidth: '1535.5px',
             minHeight: 'auto',
-            margin: `clamp(16px, 7vh, 192px) ${gridSafeZoneBase}`,
+            margin: `clamp(16px, 7vh, 192px) ${gridExtendedOffsetBase}`,
             borderRadius: borderRadiusMedium,
         };
 };
@@ -5144,7 +5222,7 @@ const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
                 border: 0,
             },
             [mediaQueryXl]: {
-                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridSafeZoneBase}`,
+                margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
         }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
         header: {
@@ -5393,7 +5471,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
+const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const isDarkTheme = isThemeDark(theme);
     const backgroundColorMap = {
@@ -5427,16 +5505,14 @@ const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             margin: '0 -4px',
             height: 'inherit',
         },
-        'scroll-area': {
-            gridArea: '1 / 1 / 1 / -1',
-            padding: '4px',
-            overflow: 'scroll hidden',
+        'scroll-area': Object.assign({ gridArea: '1 / 1 / 1 / -1', padding: '4px', overflow: 'auto hidden' }, (!hasScrollbar && {
+            // If scrollbar is disabled - hide scrollbar
             msOverflowStyle: 'none' /* IE and Edge */,
             scrollbarWidth: 'none' /* Firefox */,
             '&::-webkit-scrollbar': {
                 display: 'none',
             },
-        },
+        })),
         // Extra wrapper needed to compensate different offset parent calculation depending on browser.
         // Needed for position of status bar.
         'scroll-wrapper': {
@@ -5719,7 +5795,7 @@ const getComponentCss$l = (state, disabled, theme) => {
                     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': {
+            })), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
                     borderColor: 'transparent',
                 } }),
         } }, (!isStateCurrentOrUndefined && {
@@ -5821,7 +5897,7 @@ const getComponentCss$i = () => {
 const getComponentCss$h = (multiline) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: pxToRemWithUnit(12), margin: 0, borderBottom: `1px solid ${getThemedColors('light').contrastLowColor}`, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: spacingFluidSmall, margin: 0, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
         },
     });
 };
@@ -5831,31 +5907,76 @@ const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
 
-const { contrastMediumColor, primaryColor: primaryColor$1 } = getThemedColors('light');
-const { semiBold: fontWeightSemiBold } = fontWeight;
-const getComponentCss$g = (active, direction, hideLabel, multiline) => {
+const cssVariableTableHoverColor = '--p-internal-table-hover-color';
+const cssVariableTableBorderColor = '--p-internal-table-border-color';
+const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
+const getComponentCss$g = (theme) => {
+    const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ display: 'block' }, textSmallStyle), { color: primaryColor, textAlign: 'left' }), hostHiddenStyles)),
+            '::slotted(*)': addImportantToEachRule({
+                [cssVariableTableHoverColor]: hoverColor,
+                [cssVariableTableBorderColor]: contrastLowColor,
+                [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
+            }),
+        },
+        caption: {
+            marginBottom: spacingFluidMedium,
+        },
+        table: {
+            display: 'table',
+            borderCollapse: 'collapse',
+            width: '100%',
+            whiteSpace: 'nowrap', // shouldn't be inherited for caption, that's why it's defined here
+        },
+    });
+};
+
+const { hoverColor, focusColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
+const buttonBeforeOffsetVertical = '-2px';
+const buttonBeforeOffsetHorizontal = '-4px';
+const getComponentCss$f = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
-    return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'table-cell', padding: `${pxToRemWithUnit(2)} ${pxToRemWithUnit(12)} ${pxToRemWithUnit(8)}`, borderBottom: `1px solid ${contrastMediumColor}`, verticalAlign: 'bottom', fontWeight: fontWeightSemiBold, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
+    return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'table-cell', padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`, verticalAlign: 'bottom', whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
             ? {
-                button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-end', padding: 0, boxSizing: 'border-box', appearance: 'none', border: 'none' }, textSmallStyle), { fontWeight: fontWeightSemiBold, color: primaryColor$1, textDecoration: 'none', textAlign: 'left', background: 'transparent', cursor: 'pointer' }), getFocusJssStyle({ offset: 1 })), hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover, &:focus': {
+                button: Object.assign(Object.assign({ position: 'relative', display: 'flex', gap: spacingStaticXSmall, width: 'auto', margin: 0, padding: 0, font: 'inherit', color: 'inherit', outline: 0, alignItems: 'flex-end', appearance: 'none', background: 'transparent', textAlign: 'left', border: 0, zIndex: 0, cursor: 'pointer', '&::before': {
+                        content: '""',
+                        position: 'absolute',
+                        top: buttonBeforeOffsetVertical,
+                        bottom: buttonBeforeOffsetVertical,
+                        right: buttonBeforeOffsetHorizontal,
+                        left: buttonBeforeOffsetHorizontal,
+                        borderRadius: borderRadiusSmall,
+                        zIndex: -1,
+                        transition: getTransition('background-color'),
+                    } }, hoverMediaQuery({
+                    '&:hover, &:focus': {
                         '& .icon': {
                             opacity: 1,
                         },
-                    } }))),
+                    },
+                    '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
+                })), { '&:focus::before': {
+                        border: `${borderWidthBase} solid ${focusColor}`,
+                    }, '&:not(:focus-visible)::before': {
+                        border: 0,
+                    } }),
             }
             : hideLabel && {
                 span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
-            marginLeft: spacingStaticXSmall,
+            transition: getTransition('opacity'),
             opacity: active ? 1 : 0,
             transform: `rotate3d(0,0,1,${isDirectionAsc(direction) ? 0 : 180}deg)`,
-            transformOrigin: '50% 50%', // for iOS
+            transformOrigin: '50% 50%',
+            filter: `var(${cssVariableTableHeadCellIconFilter})`,
         },
     })));
 };
 
-const getComponentCss$f = () => {
+const getComponentCss$e = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-row' }, hostHiddenStyles)),
@@ -5863,79 +5984,27 @@ const getComponentCss$f = () => {
     });
 };
 
-const getComponentCss$e = () => {
+const getComponentCss$d = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group' }, hostHiddenStyles)),
+            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group', fontSize: fontSizeTextXSmall, lineHeight: fontLineHeight, fontWeight: fontWeightSemiBold }, hostHiddenStyles)),
         },
     });
 };
 
-const getComponentCss$d = () => {
+const getComponentCss$c = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row' }, hostHiddenStyles), hoverMediaQuery({
-                transition: getTransition('background-color'),
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row', borderTop: `1px solid var(${cssVariableTableBorderColor})`, borderBottom: `1px solid var(${cssVariableTableBorderColor})`, transition: getTransition('background') }, hostHiddenStyles), hoverMediaQuery({
                 '&(:hover)': {
-                    backgroundColor: getThemedColors('light').backgroundSurfaceColor,
+                    // ...frostedGlassStyle, // will result in not smooth transition when applied
+                    background: `var(${cssVariableTableHoverColor})`,
                 },
             }))),
         },
     });
 };
 
-const { primaryColor } = getThemedColors('light');
-const getComponentCss$c = () => {
-    return getCss({
-        '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
-        },
-        caption: {
-            marginBottom: spacingStaticSmall,
-            [getMediaQueryMin('m')]: {
-                marginBottom: spacingStaticMedium,
-            },
-        },
-        root: {
-            position: 'relative',
-        },
-        'scroll-area': Object.assign({ overflow: 'auto visible' }, getFocusJssStyle({ offset: -1 })),
-        table: Object.assign(Object.assign({ position: 'relative', width: '100%', display: 'table' }, textSmallStyle), { textAlign: 'left', color: primaryColor, whiteSpace: 'nowrap' }),
-        'scroll-trigger': {
-            position: 'absolute',
-            top: 0,
-            right: '1px',
-            width: '1px',
-            height: '1px',
-            visibility: 'hidden',
-        },
-        'scroll-indicator': {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingLeft: spacingStaticLarge,
-            pointerEvents: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%)',
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                bottom: 0,
-                width: pxToRemWithUnit(48),
-                pointerEvents: 'auto',
-            },
-        },
-        'scroll-button': {
-            padding: pxToRemWithUnit(12),
-            pointerEvents: 'auto',
-        },
-    });
-};
-
 const tabsTransitionDuration = '.4s';
 const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.replace(/\[role]/g, tag)).join();
 const getComponentCss$b = (size, weight, theme) => {
@@ -6273,54 +6342,57 @@ const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     })));
 };
 
-const toastPositionBottomVarPublic = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
-const toastPositionBottomVarInternal = '--p-internal-toast-position-bottom';
+const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
+const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const toastCloseClassName = 'close';
 const getComponentCss = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridSafeZoneBase, right: gridSafeZoneBase, 
+            ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, 
                 // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
-                [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 56px)`, bottom: `var(${toastPositionBottomVarInternal})`, maxWidth: '42rem', zIndex: TOAST_Z_INDEX, [getMediaQueryMin('s')]: {
+                [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`, bottom: `var(${cssVariablePositionBottomInternal})`, maxWidth: '42rem', zIndex: TOAST_Z_INDEX, [getMediaQueryMin('s')]: {
                     left: '64px',
                     right: 'auto',
-                    [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 64px)`,
-                    bottom: `var(${toastPositionBottomVarInternal})`,
+                    [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 64px)`,
+                    bottom: `var(${cssVariablePositionBottomInternal})`,
                 } }, hostHiddenStyles)),
-            '@keyframes in': getKeyframesMobile('in', toastPositionBottomVarInternal),
-            '@keyframes out': getKeyframesMobile('out', toastPositionBottomVarInternal),
+            '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
+            '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
         hydrated: getAnimationIn('in', "production" !== 'production'  ),
         [toastCloseClassName]: getAnimationOut('out'),
     });
 };
 
-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.getAccordionCss = getComponentCss$W;
+exports.getBannerCss = getComponentCss$V;
+exports.getButtonCss = getComponentCss$R;
+exports.getButtonGroupCss = getComponentCss$U;
+exports.getButtonPureCss = getComponentCss$T;
+exports.getButtonTileCss = getComponentCss$S;
+exports.getCarouselCss = getComponentCss$Q;
+exports.getCheckboxWrapperCss = getComponentCss$P;
+exports.getContentWrapperCss = getComponentCss$O;
+exports.getDisplayCss = getComponentCss$N;
+exports.getDividerCss = getComponentCss$M;
+exports.getFieldsetCss = getComponentCss$K;
+exports.getFieldsetWrapperCss = getComponentCss$L;
+exports.getFlexCss = getComponentCss$I;
+exports.getFlexItemCss = getComponentCss$J;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-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.getGridCss = getComponentCss$G;
+exports.getGridItemCss = getComponentCss$H;
+exports.getHeadingCss = getComponentCss$F;
+exports.getHeadlineCss = getComponentCss$E;
+exports.getIconCss = getComponentCss$D;
+exports.getInlineNotificationCss = getComponentCss$C;
+exports.getLinkCss = getComponentCss$A;
+exports.getLinkPureCss = getComponentCss$B;
+exports.getLinkSocialCss = getComponentCss$A;
 exports.getLinkTileCss = getComponentCss$y;
+exports.getLinkTileModelSignatureCss = getComponentCss$z;
 exports.getMarqueCss = getComponentCss$x;
 exports.getModalCss = getComponentCss$w;
 exports.getModelSignatureCss = getComponentCss$v;
@@ -6337,11 +6409,11 @@ exports.getStepperHorizontalItemCss = getComponentCss$l;
 exports.getSwitchCss = getComponentCss$j;
 exports.getTableBodyCss = getComponentCss$i;
 exports.getTableCellCss = getComponentCss$h;
-exports.getTableCss = getComponentCss$c;
-exports.getTableHeadCellCss = getComponentCss$g;
-exports.getTableHeadCss = getComponentCss$e;
-exports.getTableHeadRowCss = getComponentCss$f;
-exports.getTableRowCss = getComponentCss$d;
+exports.getTableCss = getComponentCss$g;
+exports.getTableHeadCellCss = getComponentCss$f;
+exports.getTableHeadCss = getComponentCss$d;
+exports.getTableHeadRowCss = getComponentCss$e;
+exports.getTableRowCss = getComponentCss$c;
 exports.getTabsBarCss = getComponentCss$b;
 exports.getTabsCss = getComponentCss$9;
 exports.getTabsItemCss = getComponentCss$a;