@porsche-design-system/components-react 3.10.0-rc.0 → 3.10.0-rc.2

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

@@ -3210,6 +3210,27 @@ const dropShadowHighStyle = {
 
 const themeLightStateFocus = '#1A44EA';
 
+const getFocusStyle = (opts) => {
+    const { borderRadius = 'small', offset = '2px' } = opts || {};
+    const outlineOffset = offset === 'small' ? '2px' : offset === 'none' ? 0 : offset || '2px';
+    const borderRadiusValue = borderRadius === 'small'
+        ? borderRadiusSmall
+        : borderRadius === 'medium'
+            ? borderRadiusMedium
+            : borderRadius || borderRadiusSmall;
+    return {
+        borderRadius: borderRadiusValue,
+        '&:focus': {
+            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+            outlineOffset,
+        },
+        // why? have a look at this article https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+        '&:focus:not(:focus-visible)': {
+            outlineColor: 'transparent',
+        },
+    };
+};
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -3457,6 +3478,11 @@ const headingXXLargeStyle = {
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
+const textXXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
     ...fontHyphenationStyle,
@@ -3833,10 +3859,13 @@ const getResetInitialStylesForSlottedAnchor = {
 };
 const focusPseudoJssStyle = {
     outline: 0,
-    '&:focus::before': {
+    '&::before': {
+        // needs to be defined always to have correct custom click area
         content: '""',
         position: 'absolute',
         ...getInsetJssStyle(),
+    },
+    '&:focus::before': {
         borderRadius: '1px',
         outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
         outlineOffset: '2px',
@@ -4044,6 +4073,9 @@ const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -4056,7 +4088,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$12 = (size, compact, open, theme) => {
+const getComponentCss$13 = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -4199,7 +4231,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$11 = (isOpen) => {
+const getComponentCss$12 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4262,7 +4294,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$10 = (direction) => {
+const getComponentCss$11 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4416,7 +4448,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$$ = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
@@ -4593,7 +4625,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$_ = (isDisabledOrLoading, ...args) => {
+const getComponentCss$$ = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4729,7 +4761,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$Z = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$_ = (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');
@@ -4801,7 +4833,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Y = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$Z = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5209,7 +5241,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$X = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5307,7 +5339,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$W = (width) => {
+const getComponentCss$X = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5349,7 +5381,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$V = () => {
+const getComponentCss$W = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5437,7 +5469,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$U = (size, align, color, ellipsis, theme) => {
+const getComponentCss$V = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5457,7 +5489,7 @@ const getComponentCss$U = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$T = (color, orientation, theme) => {
+const getComponentCss$U = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5500,7 +5532,7 @@ const getComponentCss$T = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$T = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5536,7 +5568,7 @@ const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$R = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5582,7 +5614,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$Q = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$R = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5604,7 +5636,7 @@ const getComponentCss$Q = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$P = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$Q = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5632,7 +5664,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$O = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5814,7 +5846,7 @@ const getContentJssStyle = () => {
 
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$N = (isSecondaryScrollerVisible, theme) => {
+const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5850,7 +5882,7 @@ const getComponentCss$N = (isSecondaryScrollerVisible, theme) => {
                 }),
             }),
             '::slotted(:is(h1, h2, h3, h4, h5, h6):not(:first-child))': addImportantToEachRule({
-                margin: `${spacingFluidSmall} 0 0`,
+                margin: `calc(${spacingFluidMedium} - ${spacingFluidXSmall}) 0 0`, // spacingFluidXSmall to compensate default gap
             }),
             '::slotted(p)': addImportantToEachRule({
                 ...textSmallStyle,
@@ -5988,13 +6020,13 @@ const getComponentCss$N = (isSecondaryScrollerVisible, theme) => {
                 color: primaryColorDark,
             }),
         },
-        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
+        content: mergeDeep(getContentJssStyle(), fadeInOutTransition, { alignItems: 'flex-start' }),
     });
 };
 
 const headerShadowClass = 'header--shadow';
 const footerShadowClass$1 = 'footer--shadow';
-const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const isPositionStart = position === 'start';
@@ -6139,7 +6171,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$L = (size, offset) => {
+const getComponentCss$M = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6159,7 +6191,7 @@ const getComponentCss$L = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$K = (direction, wrap) => {
+const getComponentCss$L = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6185,7 +6217,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$J = (size, align, color, ellipsis, theme) => {
+const getComponentCss$K = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6247,7 +6279,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$I = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$J = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6337,7 +6369,7 @@ const forceRerenderAnimationStyle = {
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
 const cssVariableFilter = '--p-internal-icon-filter';
-const getComponentCss$H = (color, size, theme) => {
+const getComponentCss$I = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -6437,7 +6469,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS$1 = getMediaQueryMax('s');
-const getComponentCss$G = (state, hasAction, hasClose, theme) => {
+const getComponentCss$H = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6470,7 +6502,7 @@ const getComponentCss$G = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
@@ -6514,7 +6546,7 @@ const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     const { linkColor } = getHighContrastColors();
@@ -6574,7 +6606,7 @@ const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 // 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$D = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -6625,6 +6657,151 @@ const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
     });
 };
 
+const slottedAnchorSelector = `a[slot='${anchorSlot}']`;
+const anchorJssStyle = {
+    position: 'absolute',
+    ...getInsetJssStyle(),
+    zIndex: 1,
+    borderRadius: borderRadiusMedium,
+};
+const getMultilineEllipsis = (lineClamp) => {
+    return {
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+    };
+};
+const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                position: 'relative',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            [`slot[name="${headerSlot}"]`]: {
+                display: 'block', // to ensure correct like button positioning when slot is unused
+            },
+            ...addImportantToEachRule({
+                '::slotted': {
+                    ...(hasSlottedAnchor && {
+                        [`&(${slottedAnchorSelector})`]: {
+                            ...anchorJssStyle,
+                            textIndent: '-999999px', // hide anchor label visually but still usable for a11y (only works in RTL-mode because of `overflow: hidden;` parent)
+                        },
+                        // TODO: Refactor getFocusStyles to support slotted selector
+                        [`&(${slottedAnchorSelector}:focus)`]: {
+                            outline: `${borderWidthBase} solid ${focusColor}`,
+                            outlineOffset: '2px',
+                            ...prefersColorSchemeDarkMediaQuery(theme, {
+                                outlineColor: focusColorDark,
+                            }),
+                        },
+                        [`&(${slottedAnchorSelector}:focus:not(:focus-visible))`]: {
+                            outlineColor: 'transparent',
+                        },
+                    }),
+                    [`&([slot="${headerSlot}"])`]: {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: spacingFluidXSmall,
+                    },
+                    '&(img), &(picture)': {
+                        display: 'block',
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        borderRadius: borderRadiusLarge,
+                        overflow: 'hidden', // needed for picture > img to have correct border-radius
+                    },
+                },
+            }),
+        },
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            aspectRatio: '3/4',
+            overflow: 'hidden',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusMedium,
+            padding: spacingFluidSmall,
+            color: primaryColor,
+            backgroundColor: backgroundSurfaceColor,
+            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
+                aspectRatio: ratio.replace(':', '/'),
+            })),
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                backgroundColor: backgroundSurfaceColorDark,
+            }),
+        },
+        ...(!hasSlottedAnchor && {
+            anchor: {
+                ...anchorJssStyle,
+                ...getFocusStyle({ borderRadius: 'medium' }),
+            },
+        }),
+        header: {
+            display: 'flex',
+            gap: spacingFluidSmall,
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+        },
+        ...(hasLikeButton && {
+            button: {
+                position: 'relative',
+                zIndex: 2, // Necessary to be on top of anchor link
+            },
+        }),
+        image: {
+            aspectRatio: '8/9',
+            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall}`,
+            overflow: 'hidden',
+            transition: getTransition('transform', 'moderate'),
+            [getMediaQueryMin('s')]: {
+                padding: `0 ${spacingFluidMedium}`, // ensures image is not getting to large
+            },
+            ...hoverMediaQuery({
+                '.root:hover &': {
+                    transform: 'scale3d(1.05,1.05,1.05)',
+                },
+            }),
+        },
+        wrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+            margin: 'auto',
+            textAlign: 'center',
+        },
+        heading: {
+            ...headingSmallStyle,
+            ...fontHyphenationStyle,
+            ...getMultilineEllipsis(3),
+            margin: '0 0 2px',
+        },
+        price: {
+            ...textXSmallStyle,
+            ...getMultilineEllipsis(2),
+            margin: 0, // ua-style reset
+        },
+        description: {
+            ...textXXSmallStyle,
+            ...getMultilineEllipsis(2),
+            margin: 0,
+            color: contrastHighColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastHighColorDark,
+            }),
+        },
+    });
+};
+
 const getComponentCss$C = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
@@ -9897,4 +10074,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$12 as getAccordionCss, getComponentCss$11 as getBannerCss, getComponentCss$Z as getButtonCss, getComponentCss$10 as getButtonGroupCss, getComponentCss$$ as getButtonPureCss, getComponentCss$_ as getButtonTileCss, getComponentCss$Y as getCarouselCss, getComponentCss$X as getCheckboxWrapperCss, getComponentCss$W as getContentWrapperCss, getComponentCss$V as getCrestCss, getComponentCss$U as getDisplayCss, getComponentCss$T as getDividerCss, getComponentCss$R as getFieldsetCss, getComponentCss$S as getFieldsetWrapperCss, getComponentCss$P as getFlexCss, getComponentCss$Q as getFlexItemCss, getComponentCss$M as getFlyoutCss, getComponentCss$O as getFlyoutNavigationCss, getComponentCss$N as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$K as getGridCss, getComponentCss$L as getGridItemCss, getComponentCss$J as getHeadingCss, getComponentCss$I as getHeadlineCss, getComponentCss$H as getIconCss, getComponentCss$G as getInlineNotificationCss, getComponentCss$E as getLinkCss, getComponentCss$F as getLinkPureCss, getComponentCss$E as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$D as getLinkTileModelSignatureCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$13 as getAccordionCss, getComponentCss$12 as getBannerCss, getComponentCss$_ as getButtonCss, getComponentCss$11 as getButtonGroupCss, getComponentCss$10 as getButtonPureCss, getComponentCss$$ as getButtonTileCss, getComponentCss$Z as getCarouselCss, getComponentCss$Y as getCheckboxWrapperCss, getComponentCss$X as getContentWrapperCss, getComponentCss$W as getCrestCss, getComponentCss$V as getDisplayCss, getComponentCss$U as getDividerCss, getComponentCss$S as getFieldsetCss, getComponentCss$T as getFieldsetWrapperCss, getComponentCss$Q as getFlexCss, getComponentCss$R as getFlexItemCss, getComponentCss$N as getFlyoutCss, getComponentCss$P as getFlyoutNavigationCss, getComponentCss$O as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$L as getGridCss, getComponentCss$M as getGridItemCss, getComponentCss$K as getHeadingCss, getComponentCss$J as getHeadlineCss, getComponentCss$I as getIconCss, getComponentCss$H as getInlineNotificationCss, getComponentCss$F as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$F as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$E as getLinkTileModelSignatureCss, getComponentCss$D as getLinkTileProductCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3564,6 +3564,8 @@ const hasDocument = typeof document !== 'undefined';
 const isThemeDark = (theme) => {
     return theme === 'dark';
 };
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
 
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
@@ -3911,4 +3913,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getRole, getSelectedOptionMap, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, modelSignatureHeight, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getRole, getSelectedOptionMap, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificSlottedTag, hasVisibleIcon, hasWindow, headerSlot, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, modelSignatureHeight, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRLinkTileProduct } from '../dsr-components/link-tile-product.mjs';
+
+const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'like', onLike);
+    const WebComponentTag = usePrefix('p-link-tile-product');
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || useTheme()];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme: theme || useTheme(), children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTileProduct };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.mjs

@@ -29,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
@@ -69,7 +70,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getAccordionCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$13 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRAccordion extends Component {
     host;
@@ -78,7 +79,7 @@ class DSRAccordion extends Component {
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
         const Heading = this.props.tag;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(this.props.size, this.props.compact, this.props.open, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.mjs

@@ -29,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
@@ -69,7 +70,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getBannerCss as getComponentCss$11 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getBannerCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRBanner extends Component {
     host;
@@ -81,7 +82,7 @@ class DSRBanner extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(this.props.open)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.open)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PInlineNotification, { heading: this.props.heading, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-group.mjs

@@ -3,13 +3,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonGroupCss as getComponentCss$10 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonGroupCss as getComponentCss$11 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRButtonGroup extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(this.props.direction)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.mjs

@@ -29,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
@@ -69,7 +70,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonPureCss as getComponentCss$$ } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonPureCss as getComponentCss$10 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRButtonPure extends Component {
@@ -86,7 +87,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$$(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }