@porsche-design-system/components-react 3.16.0 → 3.17.0-rc.0

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

@@ -33,11 +33,11 @@ function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r );
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r ? String : Number)(t);
+  return (String )(t);
 }
 
 function toPropertyKey(t) {
@@ -56,7 +56,6 @@ function _defineProperties(target, props) {
 }
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
   Object.defineProperty(Constructor, "prototype", {
     writable: false
   });
@@ -3161,6 +3160,18 @@ const hasWindow = typeof window !== 'undefined';
 
 const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
+const lighten = (hsl) => {
+    return changeColor(hsl, 10);
+};
+const darken = (hsl) => {
+    return changeColor(hsl, -10);
+};
+const changeColor = (hsl, lightness) => {
+    return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
+        return ` ${Math.min(Math.max(parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
+    });
+};
+
 const parseJSON = (prop) => {
     if (typeof prop === 'string') {
         try {
@@ -3461,6 +3472,11 @@ const textSmallStyle = {
     ...fontHyphenationStyle,
 };
 
+const textMediumStyle = {
+    font: `${_textFontPartA}${fontSizeTextMedium}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
 const textLargeStyle = {
     font: `${_textFontPartA}${fontSizeTextLarge}${_textFontPartB}`,
     ...fontHyphenationStyle,
@@ -3477,6 +3493,7 @@ const themeLight = {
     backgroundSurfaceColorDarken: '#CBCED7',
     backgroundSurfaceColorLighten: '#FFFFFF',
     backgroundShadingColor: 'rgba(1, 2, 5, 0.67)',
+    backgroundFrostedColor: 'hsl(240 4% 85%/35%)',
     contrastLowColor: '#D8D8DB',
     contrastMediumColor: '#6B6D70',
     contrastHighColor: '#535457',
@@ -3516,6 +3533,7 @@ const themeDark = {
     backgroundSurfaceColorDarken: '#040405',
     backgroundSurfaceColorLighten: '#3E4045',
     backgroundShadingColor: 'rgba(38, 38, 41, 0.67)',
+    backgroundFrostedColor: 'hsl(240 3% 26%/35%)',
     contrastLowColor: '#404044',
     contrastMediumColor: '#88898C',
     contrastHighColor: '#AFB0B3',
@@ -3848,185 +3866,12 @@ hasWindow &&
         }
     });
 
-/* eslint-disable no-undefined,no-param-reassign,no-shadow */
-
-/**
- * Throttle execution of a function. Especially useful for rate limiting
- * execution of handlers on events like resize and scroll.
- *
- * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
- *                                            are most useful.
- * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
- *                                            as-is, to `callback` when the throttled-function is executed.
- * @param {object} [options] -              An object to configure options.
- * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
- *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
- *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
- *                                            `delay` milliseconds, the internal counter is reset).
- * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
- *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
- *                                            callback will never executed if both noLeading = true and noTrailing = true.
- * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
- *                                            false (at end), schedule `callback` to execute after `delay` ms.
- *
- * @returns {Function} A new, throttled, function.
- */
-function throttle (delay, callback, options) {
-  var _ref = options || {},
-      _ref$noTrailing = _ref.noTrailing,
-      noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
-      _ref$noLeading = _ref.noLeading,
-      noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
-      _ref$debounceMode = _ref.debounceMode,
-      debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
-  /*
-   * After wrapper has stopped being called, this timeout ensures that
-   * `callback` is executed at the proper times in `throttle` and `end`
-   * debounce modes.
-   */
-
-
-  var timeoutID;
-  var cancelled = false; // Keep track of the last time `callback` was executed.
-
-  var lastExec = 0; // Function to clear existing timeout
-
-  function clearExistingTimeout() {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-  } // Function to cancel next exec
-
-
-  function cancel(options) {
-    var _ref2 = options || {},
-        _ref2$upcomingOnly = _ref2.upcomingOnly,
-        upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
-
-    clearExistingTimeout();
-    cancelled = !upcomingOnly;
-  }
-  /*
-   * The `wrapper` function encapsulates all of the throttling / debouncing
-   * functionality and when executed will limit the rate at which `callback`
-   * is executed.
-   */
-
-
-  function wrapper() {
-    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
-      arguments_[_key] = arguments[_key];
-    }
-
-    var self = this;
-    var elapsed = Date.now() - lastExec;
-
-    if (cancelled) {
-      return;
-    } // Execute `callback` and update the `lastExec` timestamp.
-
-
-    function exec() {
-      lastExec = Date.now();
-      callback.apply(self, arguments_);
-    }
-    /*
-     * If `debounceMode` is true (at begin) this is used to clear the flag
-     * to allow future `callback` executions.
-     */
-
-
-    function clear() {
-      timeoutID = undefined;
-    }
-
-    if (!noLeading && debounceMode && !timeoutID) {
-      /*
-       * Since `wrapper` is being called for the first time and
-       * `debounceMode` is true (at begin), execute `callback`
-       * and noLeading != true.
-       */
-      exec();
-    }
-
-    clearExistingTimeout();
-
-    if (debounceMode === undefined && elapsed > delay) {
-      if (noLeading) {
-        /*
-         * In throttle mode with noLeading, if `delay` time has
-         * been exceeded, update `lastExec` and schedule `callback`
-         * to execute after `delay` ms.
-         */
-        lastExec = Date.now();
-
-        if (!noTrailing) {
-          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
-        }
-      } else {
-        /*
-         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
-         * `callback`.
-         */
-        exec();
-      }
-    } else if (noTrailing !== true) {
-      /*
-       * In trailing throttle mode, since `delay` time has not been
-       * exceeded, schedule `callback` to execute `delay` ms after most
-       * recent execution.
-       *
-       * If `debounceMode` is true (at begin), schedule `clear` to execute
-       * after `delay` ms.
-       *
-       * If `debounceMode` is false (at end), schedule `callback` to
-       * execute after `delay` ms.
-       */
-      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
-    }
-  }
-
-  wrapper.cancel = cancel; // Return the wrapper function.
-
-  return wrapper;
-}
-
-/* eslint-disable no-undefined */
-/**
- * Debounce execution of a function. Debouncing, unlike throttling,
- * guarantees that a function is only executed a single time, either at the
- * very beginning of a series of calls, or at the very end.
- *
- * @param {number} delay -               A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
- * @param {Function} callback -          A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
- *                                        to `callback` when the debounced-function is executed.
- * @param {object} [options] -           An object to configure options.
- * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
- *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
- *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
- *
- * @returns {Function} A new, debounced function.
- */
-
-function debounce (delay, callback, options) {
-  var _ref = options || {},
-      _ref$atBegin = _ref.atBegin,
-      atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
-
-  return throttle(delay, callback, {
-    debounceMode: atBegin !== false
-  });
-}
-
-debounce(800, (el, ariaElement) => {
-    ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
-});
-
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
+// index.ts
+var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
-const OPTION_HEIGHT = 40; // optgroups are higher and ignored
+const OPTION_HEIGHT = 40;
 const MULTI_SELECT_OPTION_HEIGHT = 44;
 const getNoResultsOptionJssStyle = () => ({
     '&[role=status]': {
@@ -4086,7 +3931,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$16 = (size, compact, open, theme, sticky) => {
+const getComponentCss$17 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4255,7 +4100,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$15 = (isOpen) => {
+const getComponentCss$16 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4326,7 +4171,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$14 = (direction) => {
+const getComponentCss$15 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4369,7 +4214,6 @@ const getVisibilityJssStyle = (hideLabel) => {
         : {
             whiteSpace: 'inherit',
             textIndent: 0,
-            zIndex: 1, // fix Firefox bug on :hover (#2583)
             overflow: 'visible',
         };
 };
@@ -4459,7 +4303,8 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                         height: `round(down, ${fontLineHeight}, 1px)`,
                     },
                 },
-                label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                label: mergeDeep({ zIndex: '1' }, // fix Firefox bug on :hover (#2583) & pure-link with nested anchor & hidden label (#3349)
+                buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
                     // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
                     order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
                 }))),
@@ -4478,7 +4323,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$13 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$14 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4516,157 +4361,136 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getThemedTypographyColor = (theme, textColor // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
-) => {
-    const themedColors = getThemedColors(theme);
-    const colorMap = {
-        primary: themedColors.primaryColor,
-        default: themedColors.primaryColor, // deprecated but part of HeadlineColor
-        'contrast-low': themedColors.contrastLowColor,
-        'contrast-medium': themedColors.contrastMediumColor,
-        'contrast-high': themedColors.contrastHighColor,
-        'notification-success': themedColors.successColor,
-        'notification-warning': themedColors.warningColor,
-        'notification-error': themedColors.errorColor,
-        'notification-info': themedColors.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 {
+const getComponentCss$13 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+    const isTopAligned = align === 'top';
+    return getCss({
         '@global': {
             ':host': {
-                display: 'block',
-                hyphens: 'auto',
+                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            ...addImportantToEachRule({
-                '::slotted': {
-                    '&(picture)': {
-                        position: 'absolute',
-                        inset: 0,
-                    },
-                    '&(img)': {
-                        height: '100%',
-                        width: '100%',
-                        objectFit: 'cover',
-                    },
+            slot: {
+                display: 'block',
+                '&:not([name])': {
+                    width: '100%',
+                    height: '100%',
+                    transition: getTransition('transform', 'moderate'),
+                },
+                '&[name="header"]': {
+                    gridArea: `${isTopAligned ? 4 : 2}/2`,
+                    zIndex: 3,
                 },
+            },
+            '::slotted(:is(img,picture))': addImportantToEachRule({
+                display: 'block',
+                width: '100%',
+                height: '100%',
             }),
+            '::slotted(img)': addImportantToEachRule({
+                objectFit: 'cover',
+            }),
+            a: {
+                gridArea: '1/1/-1 /-1',
+                zIndex: 4,
+                outline: 0, // reset focus style since this element is used to improve mouse interaction only
+            },
+            p: {
+                ...textMediumStyle,
+                zIndex: 3,
+                margin: 0, // reset ua-style
+                maxWidth: '34.375rem',
+                hyphens: 'inherit',
+                ...mergeDeep(buildResponsiveStyles(size, (sizeValue) => ({
+                    fontSize: getFontSizeText(sizeValue === 'default' ? 'medium' : sizeValue), // mapping of the deprecated size 'default'
+                })), buildResponsiveStyles(weight, (weightValue) => ({
+                    fontWeight: getFontWeight(weightValue),
+                })), buildResponsiveStyles(background, (backgroundValue) => ({
+                    color: getThemedColors(backgroundValue).primaryColor,
+                }))),
+            },
         },
         root: {
-            position: 'relative',
-            overflow: 'hidden',
-            transform: 'translate3d(0,0,0)', // change stacking context for position fixed
-            borderRadius: borderRadiusLarge,
-            color: getThemedTypographyColor('dark', 'primary'),
-            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
-                paddingTop: aspectRatioPaddingMap[ratio],
+            ...buildResponsiveStyles(aspectRatio, (aspectRatioValue) => ({
+                aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
             })),
+            cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+            width: '100%', // necessary in case tile content overflows in grid or flex context
+            height: '100%', // necessary in case tile content overflows in grid or flex context
+            display: 'grid',
+            gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
+            ...(hasGradient &&
+                isThemeDark(background) && {
+                '&::after': {
+                    content: '""',
+                    zIndex: 2,
+                    ...(isTopAligned
+                        ? {
+                            gridArea: '1/1/3/-1',
+                            ...gradientToBottomStyle,
+                            marginBottom: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            borderStartStartRadius: borderRadiusLarge,
+                            borderStartEndRadius: borderRadiusLarge,
+                        }
+                        : {
+                            gridArea: '4/1/6/-1',
+                            ...gradientToTopStyle,
+                            marginTop: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            borderEndStartRadius: borderRadiusLarge,
+                            borderEndEndRadius: borderRadiusLarge,
+                        }),
+                    ...forcedColorsMediaQuery({
+                        background: 'rgba(0,0,0,0.7)',
+                    }),
+                },
+            }),
             ...(!isDisabled &&
                 hoverMediaQuery({
-                    '&:hover .image-container': {
+                    '&:hover slot:not([name])': {
                         transform: 'scale3d(1.05,1.05,1.05)',
                     },
                 })),
         },
-        'image-container': {
-            position: 'absolute',
-            inset: 0,
-            transition: getTransition('transform', 'moderate'),
+        media: {
+            gridArea: '1/1/-1 /-1',
+            zIndex: 1,
+            overflow: 'hidden', // relevant for scaling of nested image
+            borderRadius: borderRadiusLarge,
         },
-        content: {
-            position: 'absolute',
-            left: 0,
-            right: 0,
+        footer: {
+            gridArea: `${isTopAligned ? 2 : 4}/2`,
             display: 'flex',
-            justifyItems: 'start',
             gap: spacingStaticMedium,
-            borderRadius: borderRadiusLarge, // for gradient
-            '@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
-background, align, compact, hasGradient, isDisabled) => {
-    const isTopAligned = align === 'top';
-    return mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
-        '@global': {
-            p: {
-                maxWidth: '34.375rem', // in this case rem unit makes sense to scale up available space
-                margin: 0,
-                ...textLargeStyle,
-                hyphens: 'inherit',
-                ...mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$5[s]), buildResponsiveStyles(weight, (w) => ({
-                    fontWeight: getFontWeight(w === 'semibold' ? 'semi-bold' : w), // mapping of the deprecated weight semibold
-                }))),
-                ...buildResponsiveStyles(background, (b) => ({
-                    color: getThemedColors(b).primaryColor,
-                })),
-            },
-        },
-        content: {
-            display: 'grid', // TODO: flex via getTileBaseStyles
-            ...(isTopAligned ? { top: 0 } : { bottom: 0 }),
-            padding: isTopAligned
-                ? `${spacingFluidMedium} ${spacingFluidMedium} ${spacingFluidLarge}`
-                : `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
-            ...mergeDeep(hasGradient &&
-                isThemeDark(background) &&
-                buildResponsiveStyles(compact, (isCompact) => isCompact && isTopAligned ? gradientToBottomStyle : gradientToTopStyle), buildResponsiveStyles(compact, (isCompact) => isCompact // TODO: use flex
+            justifyContent: 'space-between',
+            ...buildResponsiveStyles(compact, (compactValue) => compactValue
                 ? {
                     alignItems: 'center',
-                    gridTemplateColumns: 'auto 24px',
-                    gridTemplateRows: 'auto',
-                    ...(isTopAligned ? { top: 0 } : { bottom: 0 }),
+                    flexDirection: 'row',
                 }
                 : {
-                    gridTemplateRows: 'auto auto',
-                    gridTemplateColumns: 'auto',
-                })),
+                    alignItems: 'flex-start',
+                    flexDirection: 'column',
+                }),
+        },
+        'link-or-button-pure': {
+            zIndex: 5,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                display: compactValue ? 'inline-block' : 'none',
+            })),
         },
-        'link-or-button-pure': buildResponsiveStyles(compact, (isCompact) => ({
-            display: isCompact ? 'inline-block' : 'none',
-        })),
         'link-or-button': {
             minHeight: '54px', // prevent content shift
-            ...buildResponsiveStyles(compact, (isCompact) => ({
-                display: isCompact ? 'none' : 'inline-block',
+            zIndex: 5,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                display: compactValue ? 'none' : 'inline-block',
             })),
         },
     });
 };
 
-const getComponentCss$12 = (isDisabledOrLoading, ...args) => {
-    const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
-    return getCss({
-        ...buttonLinkTileStyles,
-        root: {
-            ...buttonLinkTileStyles.root,
-            cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
-        },
-    });
-};
-
 const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
@@ -4780,7 +4604,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$11 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$12 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4844,7 +4668,7 @@ const sidebarWidths = {
     medium: '320px',
     large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
 };
-const getComponentCss$10 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+const getComponentCss$11 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4953,7 +4777,7 @@ const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$10 = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -4976,6 +4800,10 @@ const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingS
                     gridColumnStart: 1,
                     gridRowStart: 3,
                     alignSelf: 'center', // ensures vertical alignment to prev/next buttons
+                    ...(isHeaderAlignCenter &&
+                        !hasNavigation && {
+                        justifySelf: 'center',
+                    }),
                 },
             }),
             ...addImportantToEachRule({
@@ -5026,8 +4854,8 @@ const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingS
             padding: `0 ${spacingMap[width].base}`,
             [mediaQueryS]: {
                 gridTemplateColumns: 'minmax(0px, 1fr) auto',
-                columnGap: spacingStaticMedium,
                 padding: `0 ${spacingMap[width].s}`,
+                ...(hasNavigation && { columnGap: spacingStaticMedium }),
             },
             [mediaQueryXXL]: {
                 padding: `0 ${spacingMap[width].xxl}`,
@@ -5089,6 +4917,14 @@ const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingS
                 transform: 'translateZ(0)', // fixes mobile safari flickering, https://github.com/nolimits4web/swiper/issues/3527#issuecomment-609088939
             },
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
+            ...(isHeaderAlignCenter && {
+                '&:not(.is-overflow) .splide__list': {
+                    justifyContent: 'center',
+                },
+                '&:not(.is-overflow) .splide__slide:last-child': {
+                    marginInlineEnd: addImportantToRule('0'),
+                },
+            }),
         },
         ...(hasPagination && {
             'pagination-container': {
@@ -5372,7 +5208,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$_ = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$$ = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5467,7 +5303,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Z = (width) => {
+const getComponentCss$_ = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5509,7 +5345,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$Y = () => {
+const getComponentCss$Z = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5555,6 +5391,24 @@ const getComponentCss$Y = () => {
 
 const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
+const getThemedTypographyColor = (theme, textColor // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
+) => {
+    const themedColors = getThemedColors(theme);
+    const colorMap = {
+        primary: themedColors.primaryColor,
+        default: themedColors.primaryColor, // deprecated but part of HeadlineColor
+        'contrast-low': themedColors.contrastLowColor,
+        'contrast-medium': themedColors.contrastMediumColor,
+        'contrast-high': themedColors.contrastHighColor,
+        'notification-success': themedColors.successColor,
+        'notification-warning': themedColors.warningColor,
+        'notification-error': themedColors.errorColor,
+        'notification-info': themedColors.infoColor,
+        inherit: 'currentColor',
+    };
+    return colorMap[textColor];
+};
+
 const getTypographyRootJssStyle = (baseTextStyle, responsiveStyle, align, // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
 color, // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
 ellipsis, theme) => {
@@ -5590,7 +5444,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$X = (size, align, color, ellipsis, theme) => {
+const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5608,7 +5462,7 @@ const getComponentCss$X = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$W = (color, orientation, theme) => {
+const getComponentCss$X = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5651,7 +5505,7 @@ const getComponentCss$W = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$W = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5687,7 +5541,7 @@ const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$U = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$V = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5733,7 +5587,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$T = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$U = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5755,7 +5609,7 @@ const getComponentCss$T = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$S = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$T = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5796,7 +5650,7 @@ const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
 const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
 const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$R = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$S = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5935,7 +5789,7 @@ const getContentJssStyle = () => {
 
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
+const getComponentCss$R = (isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -6295,7 +6149,7 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$P = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$Q = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     return getCss({
         '@global': {
@@ -6369,7 +6223,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$O = (size, offset) => {
+const getComponentCss$P = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6389,7 +6243,7 @@ const getComponentCss$O = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$N = (direction, wrap) => {
+const getComponentCss$O = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6415,7 +6269,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$M = (size, align, color, ellipsis, theme) => {
+const getComponentCss$N = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6475,7 +6329,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$L = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$M = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6583,7 +6437,7 @@ const isFlippableIcon = (name, source) => {
             name === 'logout' ||
             name === 'send'));
 };
-const getComponentCss$K = (name, source, color, size, theme) => {
+const getComponentCss$L = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -6700,7 +6554,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$J = (state, hasAction, hasClose, theme) => {
+const getComponentCss$K = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6731,7 +6585,7 @@ const getComponentCss$J = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$I = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$J = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -6759,7 +6613,7 @@ const getComponentCss$I = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$H = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$I = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
@@ -6801,58 +6655,120 @@ const getComponentCss$H = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
-// array is redefined instead of using the one from in model-signature
-// because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
-const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
-
-const getComponentCss$G = (aspectRatio, weight, direction, hasDescription) => {
-    const tileBaseStyles = getTileBaseStyles(aspectRatio);
+const getComponentCss$H = (aspectRatio, weight, // to get deprecated semibold typed
+direction, hasDescription) => {
     return getCss({
-        ...tileBaseStyles,
         '@global': {
-            ...tileBaseStyles['@global'],
-            [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
-                margin: addImportantToRule(0),
+            ':host': {
+                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            slot: {
+                '&:not([name])': {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    transition: getTransition('transform', 'moderate'),
+                },
+                '&[name=primary]': {
+                    pointerEvents: 'auto',
+                },
+                '&[name=secondary]': {
+                    pointerEvents: 'auto',
+                },
+            },
+            '::slotted(:is(img,picture))': addImportantToEachRule({
+                display: 'block',
+                width: '100%',
+                height: '100%',
+            }),
+            '::slotted(img)': addImportantToEachRule({
+                objectFit: 'cover',
+            }),
+            a: {
+                gridArea: '1/1/-1 /-1',
+                zIndex: 4,
+                outline: 0, // reset focus style since this element is used to improve mouse interaction only
             },
+            'h1,h2,h3,h4,h5,h6': {
+                margin: 0,
+                zIndex: 3,
+                maxWidth: '34.375rem',
+                ...textLargeStyle,
+                hyphens: 'inherit',
+                color: getThemedColors('dark').primaryColor,
+                ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
+            },
+            ...(hasDescription && {
+                p: {
+                    margin: '-12px 0 0 ',
+                    zIndex: 3,
+                    maxWidth: '34.375rem',
+                    ...textSmallStyle,
+                    color: getThemedColors('dark').primaryColor,
+                    hyphens: 'inherit',
+                },
+            }),
         },
-        content: {
-            ...tileBaseStyles.content,
-            flexDirection: 'column',
-            bottom: 0,
-            padding: `${spacingFluidLarge} ${spacingFluidMedium} ${spacingFluidMedium}`,
-            ...gradientToTopStyle,
+        root: {
+            ...buildResponsiveStyles(aspectRatio, (aspectRatioValue) => ({
+                aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
+            })),
+            width: '100%', // necessary in case tile content overflows in grid or flex context
+            height: '100%', // necessary in case tile content overflows in grid or flex context
+            display: 'grid',
+            gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
+            '&::after': {
+                content: '""',
+                zIndex: 2,
+                gridArea: '4/1/6/-1',
+                ...gradientToTopStyle,
+                marginTop: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                borderEndStartRadius: borderRadiusLarge,
+                borderEndEndRadius: borderRadiusLarge,
+                ...forcedColorsMediaQuery({
+                    background: 'rgba(0,0,0,0.7)',
+                }),
+            },
+            ...hoverMediaQuery({
+                '&:hover slot:not([name])': {
+                    transform: 'scale3d(1.05,1.05,1.05)',
+                },
+            }),
         },
-        signature: {
-            position: 'absolute',
-            top: spacingFluidMedium,
-            left: spacingFluidMedium,
-            right: spacingFluidMedium,
+        header: {
+            gridArea: '2/2',
+            zIndex: 3,
             display: 'flex',
+            flexDirection: 'column',
+            gap: spacingFluidSmall,
         },
-        heading: {
-            margin: 0,
-            ...textLargeStyle,
-            hyphens: 'inherit',
-            ...buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })),
+        media: {
+            gridArea: '1/1/-1 /-1',
+            zIndex: 1,
+            overflow: 'hidden', // relevant for scaling of nested image
+            borderRadius: borderRadiusLarge,
+        },
+        footer: {
+            gridArea: '4/2',
+            display: 'flex',
+            gap: spacingStaticMedium,
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            flexDirection: 'column',
         },
-        ...(hasDescription && {
-            description: {
-                margin: '-12px 0 0 ', // TODO: perhaps gap should be overridden instead
-                ...textSmallStyle,
-                hyphens: 'inherit',
-            },
-        }),
         'link-group': {
+            zIndex: 5,
             display: 'flex',
             width: '100%',
+            pointerEvents: 'none',
             gap: spacingFluidSmall,
             ...buildResponsiveStyles(direction, getGroupDirectionJssStyles),
         },
-        'link-overlay': {
-            // covers entire tile, used for expanded click-area only
-            position: 'fixed',
-            inset: 0,
-        },
     });
 };
 
@@ -6871,7 +6787,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+const getComponentCss$G = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
@@ -7009,13 +6925,131 @@ const getComponentCss$F = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$E = (...args) => {
+const getComponentCss$F = (aspectRatio, size, weight, // to get deprecated semibold typed
+background, align, compact, hasGradient, isDisabled) => {
+    const isTopAligned = align === 'top';
     return getCss({
-        ...getButtonLinkTileStyles(...args),
-        'link-overlay': {
-            // covers entire tile, used for expanded click-area only
-            position: 'fixed',
-            inset: 0,
+        '@global': {
+            ':host': {
+                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            slot: {
+                display: 'block',
+                '&:not([name])': {
+                    width: '100%',
+                    height: '100%',
+                    transition: getTransition('transform', 'moderate'),
+                },
+                '&[name="header"]': {
+                    gridArea: `${isTopAligned ? 4 : 2}/2`,
+                    zIndex: 3,
+                },
+            },
+            '::slotted(:is(img,picture))': addImportantToEachRule({
+                display: 'block',
+                width: '100%',
+                height: '100%',
+            }),
+            '::slotted(img)': addImportantToEachRule({
+                objectFit: 'cover',
+            }),
+            a: {
+                gridArea: '1/1/-1 /-1',
+                zIndex: 4,
+                outline: 0, // reset focus style since this element is used to improve mouse interaction only
+            },
+            p: {
+                ...textMediumStyle,
+                zIndex: 3,
+                margin: 0, // reset ua-style
+                maxWidth: '34.375rem',
+                hyphens: 'inherit',
+                ...mergeDeep(buildResponsiveStyles(size, (sizeValue) => ({
+                    fontSize: getFontSizeText(sizeValue === 'default' ? 'medium' : sizeValue), // mapping of the deprecated size 'default'
+                })), buildResponsiveStyles(weight, (weightValue) => ({
+                    fontWeight: getFontWeight(weightValue === 'semibold' ? 'semi-bold' : weightValue), // mapping of the deprecated weight 'semibold'
+                })), buildResponsiveStyles(background, (backgroundValue) => ({
+                    color: getThemedColors(backgroundValue).primaryColor,
+                }))),
+            },
+        },
+        root: {
+            ...buildResponsiveStyles(aspectRatio, (aspectRatioValue) => ({
+                aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
+            })),
+            width: '100%', // necessary in case tile content overflows in grid or flex context
+            height: '100%', // necessary in case tile content overflows in grid or flex context
+            display: 'grid',
+            gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
+            ...(hasGradient &&
+                isThemeDark(background) && {
+                '&::after': {
+                    content: '""',
+                    zIndex: 2,
+                    ...(isTopAligned
+                        ? {
+                            gridArea: '1/1/3/-1',
+                            ...gradientToBottomStyle,
+                            marginBottom: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            borderStartStartRadius: borderRadiusLarge,
+                            borderStartEndRadius: borderRadiusLarge,
+                        }
+                        : {
+                            gridArea: '4/1/6/-1',
+                            ...gradientToTopStyle,
+                            marginTop: `calc(${spacingFluidLarge} * -1)`, // to increase the gradient area without reserving additional layout space
+                            borderEndStartRadius: borderRadiusLarge,
+                            borderEndEndRadius: borderRadiusLarge,
+                        }),
+                    ...forcedColorsMediaQuery({
+                        background: 'rgba(0,0,0,0.7)',
+                    }),
+                },
+            }),
+            ...(hoverMediaQuery({
+                    '&:hover slot:not([name])': {
+                        transform: 'scale3d(1.05,1.05,1.05)',
+                    },
+                })),
+        },
+        media: {
+            gridArea: '1/1/-1 /-1',
+            zIndex: 1,
+            overflow: 'hidden', // relevant for scaling of nested image
+            borderRadius: borderRadiusLarge,
+        },
+        footer: {
+            gridArea: `${isTopAligned ? 2 : 4}/2`,
+            display: 'flex',
+            gap: spacingStaticMedium,
+            justifyContent: 'space-between',
+            ...buildResponsiveStyles(compact, (compactValue) => compactValue
+                ? {
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                }
+                : {
+                    alignItems: 'flex-start',
+                    flexDirection: 'column',
+                }),
+        },
+        'link-or-button-pure': {
+            zIndex: 5,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                display: compactValue ? 'inline-block' : 'none',
+            })),
+        },
+        'link-or-button': {
+            minHeight: '54px', // prevent content shift
+            zIndex: 5,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                display: compactValue ? 'none' : 'inline-block',
+            })),
         },
     });
 };
@@ -7030,7 +7064,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$D = (size) => {
+const getComponentCss$E = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7080,7 +7114,7 @@ const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-
 const safeZoneVertical = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const safeZoneHorizontal = `${spacingFluidLarge}`;
 const cssClassNameStretchToFullModalWidth = 'stretch-to-full-modal-width';
-const getComponentCss$C = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$D = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7217,7 +7251,7 @@ const getThemedColor = (color, themedColors) => {
     };
     return colorMap[color];
 };
-const getComponentCss$B = (model, safeZone, size, color, theme) => {
+const getComponentCss$C = (model, safeZone, size, color, theme) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -7261,7 +7295,8 @@ const getComponentCss$B = (model, safeZone, size, color, theme) => {
     });
 };
 
-const getComponentCss$A = (theme) => {
+const cssVariableMultiSelectPaddingInlineStart = '--p-internal-multi-select-option-padding-left';
+const getComponentCss$B = (theme) => {
     const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     const { highlightColor } = getHighContrastColors();
@@ -7277,6 +7312,7 @@ const getComponentCss$A = (theme) => {
             justifyContent: 'space-between',
             gap: '12px',
             padding: `${spacingStaticSmall} 12px`,
+            paddingInlineStart: `var(${cssVariableMultiSelectPaddingInlineStart}, 12px)`,
             flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
             color: contrastHighColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -7474,7 +7510,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
 
 const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$A = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -7554,7 +7590,6 @@ const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWi
 };
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
 const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
-    const isDirectionDown = direction === 'down';
     const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -7605,10 +7640,10 @@ const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
         border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
         borderRadius: borderRadiusSmall,
         ...(isOpen && {
-            [isDirectionDown ? 'paddingBottom' : 'paddingTop']: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
-            [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
-            [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
-            [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            ['paddingBottom' ]: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
+            ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
+            ['borderBottomLeftRadius' ]: 0,
+            ['borderBottomRightRadius' ]: 0,
         }),
         ...(isDisabled && {
             ...getPlaceholderJssStyle({ color: disabledColor }),
@@ -7622,7 +7657,7 @@ const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
             background: backgroundColorDark,
             border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
             ...(isOpen && {
-                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
+                ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
             }),
             ...(isDisabled && {
                 ...getPlaceholderJssStyle({ color: disabledColorDark }),
@@ -7634,7 +7669,6 @@ const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
     };
 };
 const getListStyles$2 = (isOpen, direction, theme) => {
-    const isDirectionDown = direction === 'down';
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return {
@@ -7648,17 +7682,17 @@ const getListStyles$2 = (isOpen, direction, theme) => {
         zIndex: 10,
         left: 0,
         right: 0,
-        [isDirectionDown ? 'top' : 'bottom']: '100%',
+        ['top' ]: '100%',
         boxSizing: 'border-box',
         maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`, // 8.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
         overflowY: 'auto',
         WebkitOverflowScrolling: 'touch',
         background: backgroundColor,
         border: `2px solid ${primaryColor}`,
-        [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
+        ['borderTop' ]: 'none',
         borderRadius: borderRadiusSmall,
-        [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
-        [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+        ['borderTopLeftRadius' ]: 0,
+        ['borderTopRightRadius' ]: 0,
         scrollbarWidth: 'thin', // firefox
         scrollbarColor: 'auto', // firefox
         transition: getTransition('border-color'),
@@ -7670,6 +7704,136 @@ const getListStyles$2 = (isOpen, direction, theme) => {
     };
 };
 
+const cssVariableSelectPaddingInlineStart = '--p-internal-select-option-padding-left';
+// TODO: Enforce order of slotted text, img
+const getComponentCss$z = (theme) => {
+    return getCss({
+        '@global': addImportantToEachRule({
+            ':host': {
+                scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                ...hostHiddenStyles,
+            },
+            '::slotted(img)': {
+                height: fontLineHeight,
+                borderRadius: borderRadiusSmall,
+            },
+        }),
+        ...getOptionStyles(theme),
+        icon: {
+            marginInlineStart: 'auto',
+        },
+    });
+};
+// TODO: Copied from multi-select and select-wrapper-dropdown, extract and reuse
+const getOptionStyles = (theme) => {
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        option: {
+            fontWeight: fontWeightRegular,
+            display: 'flex',
+            gap: '12px',
+            padding: `${spacingStaticSmall} 12px`,
+            paddingInlineStart: `var(${cssVariableSelectPaddingInlineStart}, 12px)`,
+            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
+            minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+            cursor: 'pointer',
+            textAlign: 'start',
+            wordBreak: 'break-word',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusSmall,
+            transition: `${getTransition('background-color')}, ${getTransition('color')}`,
+            ...getNoResultsOptionJssStyle(),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: contrastLowColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: contrastLowColorDark,
+                    }),
+                },
+            }),
+            '&--selected': {
+                cursor: 'default',
+                pointerEvents: 'none',
+                background: backgroundSurfaceColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundSurfaceColorDark,
+                }),
+            },
+            '&--highlighted': {
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: contrastLowColorDark,
+                }),
+            },
+            '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: isHighContrastMode ? highlightColor : primaryColorDark,
+                }),
+            },
+            '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            },
+            '&--hidden': {
+                display: 'none',
+            },
+        },
+    };
+};
+
+const getComponentCss$y = (isDisabled, theme) => getCss({
+    '@global': {
+        ':host': addImportantToEachRule({
+            ...colorSchemeStyles,
+            ...hostHiddenStyles,
+        }),
+        '::slotted(*)': {
+            [cssVariableSelectPaddingInlineStart]: '28px',
+            [cssVariableMultiSelectPaddingInlineStart]: '28px',
+        },
+    },
+    ...getOptgroupStyles(isDisabled, theme),
+});
+const getOptgroupStyles = (isDisabled, theme) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    return {
+        optgroup: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacingStaticSmall,
+        },
+        label: {
+            color: primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+            }),
+            ...(isDisabled && {
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            }),
+            display: 'block',
+            padding: `${spacingStaticSmall} 12px`,
+            fontSize: fontSizeTextXSmall,
+            fontWeight: fontWeightSemiBold,
+        },
+    };
+};
+
 const mediaQueryMinS = getMediaQueryMin('s');
 const mediaQueryMaxS = getMediaQueryMax('s');
 // button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
@@ -7680,7 +7844,7 @@ const disabledCursorStyle = {
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
 const hiddenStyle = { display: 'none' };
-const getComponentCss$y = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$x = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -7815,7 +7979,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+const getComponentCss$w = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -7996,7 +8160,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
+const getComponentCss$v = (direction, isNativePopoverCase, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -8106,7 +8270,7 @@ const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
 const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$u = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = isHighContrastMode
         ? getHighContrastColors().canvasColor
         : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
@@ -8204,7 +8368,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0)`);
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$u = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$t = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const backgroundColorLight = {
@@ -8371,7 +8535,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     };
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
-const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
+const getComponentCss$s = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
@@ -8444,7 +8608,7 @@ const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$s = (maxWidth, columns) => {
+const getComponentCss$r = (maxWidth, columns) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
@@ -8692,6 +8856,12 @@ const getListStyles$1 = (direction, theme) => {
                     }),
                 },
             }),
+            '&--highlighted': {
+                background: contrastLowColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: contrastLowColorDark,
+                }),
+            },
             '&--selected': {
                 cursor: 'default',
                 pointerEvents: 'none',
@@ -8700,12 +8870,6 @@ const getListStyles$1 = (direction, theme) => {
                     background: backgroundSurfaceColorDark,
                 }),
             },
-            '&--highlighted': {
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: contrastLowColorDark,
-                }),
-            },
             '&--highlighted, &--selected': {
                 color: isHighContrastMode ? highlightColor : primaryColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -8722,25 +8886,32 @@ const getListStyles$1 = (direction, theme) => {
             '&--hidden': {
                 display: 'none',
             },
+            '&--indent': {
+                paddingLeft: '28px',
+            },
         },
         optgroup: {
-            color: contrastMediumColor,
+            '&--hidden': {
+                display: 'none',
+            },
+            '&--disabled': {
+                color: disabledColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: disabledColorDark,
+                }),
+            },
+            color: primaryColor,
             display: 'block',
-            padding: '3px 14px',
+            padding: `${spacingStaticSmall} 12px`,
+            fontSize: fontSizeTextXSmall,
             fontWeight: fontWeightSemiBold,
             ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastMediumColorDark,
+                color: primaryColorDark,
             }),
-            '&:not(:first-child)': {
-                marginTop: spacingStaticSmall,
-            },
-            '&~$option': {
-                paddingLeft: '24px',
-            },
         },
     };
 };
-const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
+const getComponentCss$q = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8763,7 +8934,7 @@ const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativeP
         : getButtonStyles$1(direction, isOpen, state, theme), isOpen && getListStyles$1(direction, theme)));
 };
 
-const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
+const getComponentCss$p = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8818,93 +8989,6 @@ const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, them
     });
 };
 
-// TODO: Enforce order of slotted text, img
-const getComponentCss$p = (theme) => {
-    return getCss({
-        '@global': addImportantToEachRule({
-            ':host': {
-                scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
-                ...hostHiddenStyles,
-            },
-            '::slotted(img)': {
-                height: fontLineHeight,
-                borderRadius: borderRadiusSmall,
-            },
-        }),
-        ...getOptionStyles(theme),
-        icon: {
-            marginInlineStart: 'auto',
-        },
-    });
-};
-// TODO: Copied from multi-select and select-wrapper-dropdown, extract and reuse
-const getOptionStyles = (theme) => {
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor, disabledColor, contrastLowColor } = getThemedColors(theme);
-    const { highlightColor } = getHighContrastColors();
-    return {
-        option: {
-            display: 'flex',
-            // justifyContent: 'space-between', // TODO: Commenented out
-            gap: '12px',
-            padding: `${spacingStaticSmall} 12px`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
-            minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
-            }),
-            cursor: 'pointer',
-            textAlign: 'start',
-            wordBreak: 'break-word',
-            boxSizing: 'border-box',
-            borderRadius: borderRadiusSmall,
-            transition: `${getTransition('background-color')}, ${getTransition('color')}`,
-            ...getNoResultsOptionJssStyle(),
-            ...hoverMediaQuery({
-                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
-                    color: isHighContrastMode ? highlightColor : primaryColor,
-                    background: contrastLowColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: isHighContrastMode ? highlightColor : primaryColorDark,
-                        background: contrastLowColorDark,
-                    }),
-                },
-            }),
-            '&--selected': {
-                cursor: 'default',
-                pointerEvents: 'none',
-                background: backgroundSurfaceColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: backgroundSurfaceColorDark,
-                }),
-            },
-            '&--highlighted': {
-                background: contrastLowColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: contrastLowColorDark,
-                }),
-            },
-            '&--highlighted, &--selected': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: isHighContrastMode ? highlightColor : primaryColorDark,
-                }),
-            },
-            '&--disabled': {
-                cursor: 'not-allowed',
-                color: disabledColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: disabledColorDark,
-                }),
-            },
-            '&--hidden': {
-                display: 'none',
-            },
-        },
-    };
-};
-
 const INTERNAL_SELECT_SLOT = 'internal-select';
 
 const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
@@ -8965,7 +9049,6 @@ const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWi
 // TODO: Rename to JSSStyles
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
 const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
-    const isDirectionDown = direction === 'down';
     const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -9019,10 +9102,10 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
         border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
         borderRadius: borderRadiusSmall,
         ...(isOpen && {
-            [isDirectionDown ? 'paddingBottom' : 'paddingTop']: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
-            [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColor}`),
-            [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
-            [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            ['paddingBottom' ]: `calc(${formElementPaddingVertical} + 1px)`, // Add padding to keep same height when border changes
+            ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColor}`),
+            ['borderBottomLeftRadius' ]: 0,
+            ['borderBottomRightRadius' ]: 0,
         }),
         ...(isDisabled && {
             ...getPlaceholderJssStyle({ color: disabledColor }),
@@ -9036,7 +9119,7 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
             background: backgroundColorDark,
             border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
             ...(isOpen && {
-                [isDirectionDown ? 'borderBottom' : 'borderTop']: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
+                ['borderBottom' ]: addImportantToRule(`1px solid ${contrastMediumColorDark}`),
             }),
             ...(isDisabled && {
                 ...getPlaceholderJssStyle({ color: disabledColorDark }),
@@ -9050,7 +9133,6 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
 // TODO: Rename to JSSStyles
 // TODO: Copied from multi-select, extract and use in select and multi-select
 const getListStyles = (isOpen, direction, theme) => {
-    const isDirectionDown = direction === 'down';
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return {
@@ -9065,17 +9147,17 @@ const getListStyles = (isOpen, direction, theme) => {
         // TODO: Inset inline 0
         left: 0,
         right: 0,
-        [isDirectionDown ? 'top' : 'bottom']: '100%',
+        ['top' ]: '100%',
         boxSizing: 'border-box',
-        maxHeight: `${8.5 * (MULTI_SELECT_OPTION_HEIGHT + 8) + 6 + 2}px`, // 8.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
+        maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, // 8.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
         overflowY: 'auto',
         WebkitOverflowScrolling: 'touch',
         background: backgroundColor,
         border: `2px solid ${primaryColor}`,
-        [isDirectionDown ? 'borderTop' : 'borderBottom']: 'none',
+        ['borderTop' ]: 'none',
         borderRadius: borderRadiusSmall,
-        [isDirectionDown ? 'borderTopLeftRadius' : 'borderBottomLeftRadius']: 0,
-        [isDirectionDown ? 'borderTopRightRadius' : 'borderBottomRightRadius']: 0,
+        ['borderTopLeftRadius' ]: 0,
+        ['borderTopRightRadius' ]: 0,
         scrollbarWidth: 'thin', // firefox
         scrollbarColor: 'auto', // firefox
         transition: getTransition('border-color'),
@@ -9824,6 +9906,7 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     const colorMap = {
         'background-base': themedColors.backgroundColor,
         'background-surface': themedColors.backgroundSurfaceColor,
+        'background-frosted': themedColors.backgroundFrostedColor,
         primary: themedColors.primaryColor,
         'notification-info-soft': themedColors.infoSoftColor,
         'notification-warning-soft': themedColors.warningSoftColor,
@@ -9912,6 +9995,9 @@ const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
     const colorMap = {
         'background-base': themedColors[`backgroundColor${keySuffix}`],
         'background-surface': themedColors[`backgroundSurfaceColor${keySuffix}`],
+        'background-frosted': isDark
+            ? lighten(themedColors.backgroundFrostedColor)
+            : darken(themedColors.backgroundFrostedColor),
         primary: isDark ? themedColors.contrastHighColorLighten : themedColors.contrastHighColor,
         'notification-info-soft': themedColors[`infoSoftColor${keySuffix}`],
         'notification-success-soft': themedColors[`successSoftColor${keySuffix}`],
@@ -9921,50 +10007,50 @@ const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
     return colorMap[tagColor];
 };
 
-const getColors = (themedColors, tagColor, theme) => {
+const getColors = (tagColor, theme) => {
+    const themedColors = getThemedColors(theme);
     const { primaryColor } = tagColor === 'primary' ? getInvertedThemedColors(theme) : themedColors;
     return {
-        primaryColor,
+        textColor: primaryColor,
         backgroundColor: getThemedBackgroundColor(tagColor, themedColors),
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
 };
-const getComponentCss$8 = (tagColor, isFocusable, theme) => {
-    const themedColors = getThemedColors(theme);
-    const themedColorsDark = getThemedColors('dark');
-    const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
-    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundHoverColor: backgroundHoverColorDark, } = getColors(themedColorsDark, tagColor, 'dark');
+const getComponentCss$8 = (tagColor, compact, isFocusable, hasIcon, theme) => {
+    const { textColor, backgroundColor, backgroundHoverColor } = getColors(tagColor, theme);
+    const { textColor: textColorDark, backgroundColor: backgroundColorDark, backgroundHoverColor: backgroundHoverColorDark, } = getColors(tagColor, 'dark');
+    const isBackgroundFrosted = tagColor === 'background-frosted';
     return getCss({
         '@global': {
             ':host': {
                 display: 'inline-flex',
-                verticalAlign: 'top',
-                whiteSpace: 'nowrap',
+                verticalAlign: 'top', // TODO: should we set this CSS style at all?
+                whiteSpace: 'nowrap', // TODO: should either be exposed by a controlled CSS variable or a component prop or whitelist as supported custom styles
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
             span: {
+                position: 'relative', // necessary as relative anchor to ensure click area of optional slotted focusable element is in sync
                 display: 'flex',
                 gap: '2px',
-                alignItems: 'center',
-                position: 'relative',
-                padding: '4px 9px',
+                padding: compact ? '1px 6px' : `${spacingStaticXSmall} 9px`,
                 borderRadius: borderRadiusSmall,
-                background: backgroundColor,
-                color: primaryColor,
                 font: textXSmallStyle.font,
+                color: textColor,
+                background: backgroundColor,
+                ...(isBackgroundFrosted && frostedGlassStyle),
                 ...(isHighContrastMode && {
                     outline: '1px solid transparent',
                 }),
+                transition: `${getTransition('color')}, ${getTransition('background-color')}, ${getTransition('backdrop-filter')}`, // transition style should always be applied to have a smooth color change in case color prop gets updated during runtime
                 ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: textColorDark,
                     background: backgroundColorDark,
-                    color: primaryColorDark,
                 }),
                 ...(isFocusable &&
                     hoverMediaQuery({
-                        transition: getTransition('background-color'),
                         '&:hover': {
                             background: backgroundHoverColor,
                             ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -9975,17 +10061,11 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
             },
             '::slotted': addImportantToEachRule({
                 '&(a),&(button)': {
-                    ...getResetInitialStylesForSlottedAnchor,
-                    display: 'inline',
-                    position: 'static',
+                    all: 'unset', // resets any ua-style + custom style set in light dom
                     textDecoration: 'underline',
                     cursor: 'pointer',
                     font: 'inherit',
                     color: 'inherit',
-                    WebkitAppearance: 'none', // iOS safari
-                    appearance: 'none',
-                    border: 0,
-                    textAlign: 'start',
                 },
                 '&(a)::before,&(button)::before': {
                     content: '""',
@@ -10000,15 +10080,15 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                 },
             }),
         },
-        icon: {
-            marginInlineStart: '-2px', // compensate white space of svg icon and optimize visual alignment
-            alignSelf: 'flex-start',
-            ...(['neutral-contrast-high', 'primary'].includes(tagColor) && {
-                ...prefersColorSchemeDarkMediaQuery(theme, {
+        ...(hasIcon && {
+            icon: {
+                marginInlineStart: '-2px', // compensate white space of svg icon and optimize visual alignment
+                ...(!isHighContrastMode &&
+                    tagColor === 'primary' && {
                     filter: 'invert(1)',
                 }),
-            }),
-        },
+            },
+        }),
     });
 };
 
@@ -10402,58 +10482,59 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$16;
-exports.getBannerCss = getComponentCss$15;
-exports.getButtonCss = getComponentCss$11;
-exports.getButtonGroupCss = getComponentCss$14;
-exports.getButtonPureCss = getComponentCss$13;
-exports.getButtonTileCss = getComponentCss$12;
-exports.getCanvasCss = getComponentCss$10;
-exports.getCarouselCss = getComponentCss$$;
-exports.getCheckboxWrapperCss = getComponentCss$_;
-exports.getContentWrapperCss = getComponentCss$Z;
-exports.getCrestCss = getComponentCss$Y;
-exports.getDisplayCss = getComponentCss$X;
-exports.getDividerCss = getComponentCss$W;
-exports.getFieldsetCss = getComponentCss$U;
-exports.getFieldsetWrapperCss = getComponentCss$V;
-exports.getFlexCss = getComponentCss$S;
-exports.getFlexItemCss = getComponentCss$T;
-exports.getFlyoutCss = getComponentCss$P;
-exports.getFlyoutMultilevelCss = getComponentCss$R;
-exports.getFlyoutMultilevelItemCss = getComponentCss$Q;
+exports.getAccordionCss = getComponentCss$17;
+exports.getBannerCss = getComponentCss$16;
+exports.getButtonCss = getComponentCss$12;
+exports.getButtonGroupCss = getComponentCss$15;
+exports.getButtonPureCss = getComponentCss$14;
+exports.getButtonTileCss = getComponentCss$13;
+exports.getCanvasCss = getComponentCss$11;
+exports.getCarouselCss = getComponentCss$10;
+exports.getCheckboxWrapperCss = getComponentCss$$;
+exports.getContentWrapperCss = getComponentCss$_;
+exports.getCrestCss = getComponentCss$Z;
+exports.getDisplayCss = getComponentCss$Y;
+exports.getDividerCss = getComponentCss$X;
+exports.getFieldsetCss = getComponentCss$V;
+exports.getFieldsetWrapperCss = getComponentCss$W;
+exports.getFlexCss = getComponentCss$T;
+exports.getFlexItemCss = getComponentCss$U;
+exports.getFlyoutCss = getComponentCss$Q;
+exports.getFlyoutMultilevelCss = getComponentCss$S;
+exports.getFlyoutMultilevelItemCss = getComponentCss$R;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$N;
-exports.getGridItemCss = getComponentCss$O;
-exports.getHeadingCss = getComponentCss$M;
-exports.getHeadlineCss = getComponentCss$L;
-exports.getIconCss = getComponentCss$K;
-exports.getInlineNotificationCss = getComponentCss$J;
-exports.getLinkCss = getComponentCss$H;
-exports.getLinkPureCss = getComponentCss$I;
-exports.getLinkSocialCss = getComponentCss$H;
-exports.getLinkTileCss = getComponentCss$E;
-exports.getLinkTileModelSignatureCss = getComponentCss$G;
-exports.getLinkTileProductCss = getComponentCss$F;
-exports.getMarqueCss = getComponentCss$D;
-exports.getModalCss = getComponentCss$C;
-exports.getModelSignatureCss = getComponentCss$B;
-exports.getMultiSelectCss = getComponentCss$z;
-exports.getMultiSelectOptionCss = getComponentCss$A;
-exports.getPaginationCss = getComponentCss$y;
-exports.getPinCodeCss = getComponentCss$x;
-exports.getPopoverCss = getComponentCss$w;
-exports.getRadioButtonWrapperCss = getComponentCss$v;
-exports.getScrollerCss = getComponentCss$u;
-exports.getSegmentedControlCss = getComponentCss$s;
-exports.getSegmentedControlItemCss = getComponentCss$t;
+exports.getGridCss = getComponentCss$O;
+exports.getGridItemCss = getComponentCss$P;
+exports.getHeadingCss = getComponentCss$N;
+exports.getHeadlineCss = getComponentCss$M;
+exports.getIconCss = getComponentCss$L;
+exports.getInlineNotificationCss = getComponentCss$K;
+exports.getLinkCss = getComponentCss$I;
+exports.getLinkPureCss = getComponentCss$J;
+exports.getLinkSocialCss = getComponentCss$I;
+exports.getLinkTileCss = getComponentCss$F;
+exports.getLinkTileModelSignatureCss = getComponentCss$H;
+exports.getLinkTileProductCss = getComponentCss$G;
+exports.getMarqueCss = getComponentCss$E;
+exports.getModalCss = getComponentCss$D;
+exports.getModelSignatureCss = getComponentCss$C;
+exports.getMultiSelectCss = getComponentCss$A;
+exports.getMultiSelectOptionCss = getComponentCss$B;
+exports.getOptgroupCss = getComponentCss$y;
+exports.getPaginationCss = getComponentCss$x;
+exports.getPinCodeCss = getComponentCss$w;
+exports.getPopoverCss = getComponentCss$v;
+exports.getRadioButtonWrapperCss = getComponentCss$u;
+exports.getScrollerCss = getComponentCss$t;
+exports.getSegmentedControlCss = getComponentCss$r;
+exports.getSegmentedControlItemCss = getComponentCss$s;
 exports.getSelectCss = getComponentCss$o;
-exports.getSelectOptionCss = getComponentCss$p;
-exports.getSelectWrapperCss = getComponentCss$q;
-exports.getSelectWrapperDropdownCss = getComponentCss$r;
+exports.getSelectOptionCss = getComponentCss$z;
+exports.getSelectWrapperCss = getComponentCss$p;
+exports.getSelectWrapperDropdownCss = getComponentCss$q;
 exports.getSpinnerCss = getComponentCss$n;
 exports.getStepperHorizontalCss = getComponentCss$l;
 exports.getStepperHorizontalItemCss = getComponentCss$m;