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

package/CHANGELOG.md

@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.10.0-rc.2] - 2023-12-12
+
 ### [3.10.0-rc.1] - 2023-12-11
 
 #### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.10.0-rc.1",
+  "version": "3.10.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.10.0-rc.1"
+    "@porsche-design-system/components-js": "3.10.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

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

@@ -5884,7 +5884,7 @@ const getComponentCss$O = (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,
@@ -6022,7 +6022,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
                 color: primaryColorDark,
             }),
         },
-        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
+        content: mergeDeep(getContentJssStyle(), fadeInOutTransition, { alignItems: 'flex-start' }),
     });
 };
 
@@ -6660,9 +6660,23 @@ const getComponentCss$E = (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 } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6673,127 +6687,119 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                     ...hostHiddenStyles,
                 }),
             },
+            [`slot[name="${headerSlot}"]`]: {
+                display: 'block', // to ensure correct like button positioning when slot is unused
+            },
             ...addImportantToEachRule({
                 '::slotted': {
-                    '&(img), &(picture)': {
-                        display: 'block',
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                        overflow: 'hidden',
-                        borderRadius: borderRadiusLarge,
-                    },
                     ...(hasSlottedAnchor && {
                         [`&(${slottedAnchorSelector})`]: {
-                            position: 'absolute',
-                            borderRadius: borderRadiusMedium,
-                            ...getInsetJssStyle(),
-                            zIndex: 1,
-                            textIndent: '-999999px', // Hide anchor label visually but still usable for a11y
+                            ...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 ${themeLightStateFocus}`,
+                            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
+                    },
                 },
             }),
         },
-        ...(!hasSlottedAnchor && {
-            'link-overlay': {
-                position: 'absolute',
-                ...getInsetJssStyle(),
-                ...getFocusStyle({ borderRadius: 'medium' }),
-            },
-        }),
         root: {
             display: 'flex',
             flexDirection: 'column',
-            aspectRatio: '3 / 4',
-            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
-                aspectRatio: ratio.replace(':', ' / '),
-            })),
+            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,
             }),
-            ...hoverMediaQuery({
-                '&:hover .image-container': {
-                    transform: 'scale3d(1.05,1.05,1.05)',
-                },
-            }),
         },
+        ...(!hasSlottedAnchor && {
+            anchor: {
+                ...anchorJssStyle,
+                ...getFocusStyle({ borderRadius: 'medium' }),
+            },
+        }),
         header: {
             display: 'flex',
+            gap: spacingFluidSmall,
             justifyContent: 'space-between',
-            fontSize: fontSizeTextXSmall,
-            [`& slot[name="${headerSlot}"]`]: {
-                display: 'block', // To ensure button positioning when slot is unused
-            },
+            alignItems: 'flex-start',
         },
         ...(hasLikeButton && {
-            'like-button': {
-                height: 'fit-content',
+            button: {
                 position: 'relative',
-                zIndex: 2,
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        cursor: 'pointer',
-                    },
-                }),
+                zIndex: 2, // Necessary to be on top of anchor link
             },
         }),
-        'text-container': {
+        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',
-            justifyContent: 'center',
             flexDirection: 'column',
             margin: 'auto',
-        },
-        text: {
             textAlign: 'center',
-            margin: 0,
-            '&__heading': {
-                ...headingSmallStyle,
-                paddingBottom: '2px',
-                minHeight: `calc(${fontLineHeight} * 2)`,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'flex-end',
-            },
-            '&__price, &__description': {
-                fontWeight: fontWeightRegular,
-            },
-            '&__price': {
-                ...textXSmallStyle,
-            },
-            '&__description': {
-                ...textXXSmallStyle,
-                color: contrastHighColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: contrastHighColorDark,
-                }),
-            },
         },
-        'image-container': {
-            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall} auto`,
-            padding: 0,
-            [getMediaQueryMin('s')]: {
-                padding: `0 ${spacingFluidMedium}`,
-            },
-            overflow: 'hidden',
-            aspectRatio: '8 / 9',
-            transition: getTransition('transform', 'moderate'),
-            maxHeight: '100%',
+        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,
+            }),
         },
     });
 };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.cjs

@@ -85,7 +85,7 @@ class DSRLinkTileProduct extends react.Component {
         const priceId = 'price';
         const descriptionId = 'description';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileProductCss(this.props.likeButton, !this.props.href, this.props.aspectRatio, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { id: headerId, className: "header", children: [jsxRuntime.jsx("slot", { name: utilsEntry.headerSlot }), this.props.likeButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "like-button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Heart Filled icon' : 'Heart icon' }))] }), jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "text-container", children: [jsxRuntime.jsx("h3", { id: headingId, className: "text text__heading", children: this.props.heading }), jsxRuntime.jsx("p", { id: priceId, className: "text text__price", children: this.props.price }), jsxRuntime.jsx("p", { id: descriptionId, className: "text text__description", children: this.props.description })] }), this.props.href ? (jsxRuntime.jsx("a", { className: "link-overlay", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsxRuntime.jsx("slot", { name: utilsEntry.anchorSlot }))] }) })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [this.props.href ? (jsxRuntime.jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsxRuntime.jsx("slot", { name: utilsEntry.anchorSlot })), jsxRuntime.jsxs("div", { id: headerId, className: "header", children: [jsxRuntime.jsx("slot", { name: utilsEntry.headerSlot }), this.props.likeButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsxRuntime.jsx("div", { className: "image", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("h3", { id: headingId, className: "heading", children: this.props.heading }), jsxRuntime.jsx("p", { id: priceId, className: "price", children: this.props.price }), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -5882,7 +5882,7 @@ const getComponentCss$O = (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,
@@ -6020,7 +6020,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
                 color: primaryColorDark,
             }),
         },
-        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
+        content: mergeDeep(getContentJssStyle(), fadeInOutTransition, { alignItems: 'flex-start' }),
     });
 };
 
@@ -6658,9 +6658,23 @@ const getComponentCss$E = (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 } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6671,127 +6685,119 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                     ...hostHiddenStyles,
                 }),
             },
+            [`slot[name="${headerSlot}"]`]: {
+                display: 'block', // to ensure correct like button positioning when slot is unused
+            },
             ...addImportantToEachRule({
                 '::slotted': {
-                    '&(img), &(picture)': {
-                        display: 'block',
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                        overflow: 'hidden',
-                        borderRadius: borderRadiusLarge,
-                    },
                     ...(hasSlottedAnchor && {
                         [`&(${slottedAnchorSelector})`]: {
-                            position: 'absolute',
-                            borderRadius: borderRadiusMedium,
-                            ...getInsetJssStyle(),
-                            zIndex: 1,
-                            textIndent: '-999999px', // Hide anchor label visually but still usable for a11y
+                            ...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 ${themeLightStateFocus}`,
+                            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
+                    },
                 },
             }),
         },
-        ...(!hasSlottedAnchor && {
-            'link-overlay': {
-                position: 'absolute',
-                ...getInsetJssStyle(),
-                ...getFocusStyle({ borderRadius: 'medium' }),
-            },
-        }),
         root: {
             display: 'flex',
             flexDirection: 'column',
-            aspectRatio: '3 / 4',
-            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
-                aspectRatio: ratio.replace(':', ' / '),
-            })),
+            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,
             }),
-            ...hoverMediaQuery({
-                '&:hover .image-container': {
-                    transform: 'scale3d(1.05,1.05,1.05)',
-                },
-            }),
         },
+        ...(!hasSlottedAnchor && {
+            anchor: {
+                ...anchorJssStyle,
+                ...getFocusStyle({ borderRadius: 'medium' }),
+            },
+        }),
         header: {
             display: 'flex',
+            gap: spacingFluidSmall,
             justifyContent: 'space-between',
-            fontSize: fontSizeTextXSmall,
-            [`& slot[name="${headerSlot}"]`]: {
-                display: 'block', // To ensure button positioning when slot is unused
-            },
+            alignItems: 'flex-start',
         },
         ...(hasLikeButton && {
-            'like-button': {
-                height: 'fit-content',
+            button: {
                 position: 'relative',
-                zIndex: 2,
-                ...hoverMediaQuery({
-                    '&:hover': {
-                        cursor: 'pointer',
-                    },
-                }),
+                zIndex: 2, // Necessary to be on top of anchor link
             },
         }),
-        'text-container': {
+        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',
-            justifyContent: 'center',
             flexDirection: 'column',
             margin: 'auto',
-        },
-        text: {
             textAlign: 'center',
-            margin: 0,
-            '&__heading': {
-                ...headingSmallStyle,
-                paddingBottom: '2px',
-                minHeight: `calc(${fontLineHeight} * 2)`,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'flex-end',
-            },
-            '&__price, &__description': {
-                fontWeight: fontWeightRegular,
-            },
-            '&__price': {
-                ...textXSmallStyle,
-            },
-            '&__description': {
-                ...textXXSmallStyle,
-                color: contrastHighColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: contrastHighColorDark,
-                }),
-            },
         },
-        'image-container': {
-            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall} auto`,
-            padding: 0,
-            [getMediaQueryMin('s')]: {
-                padding: `0 ${spacingFluidMedium}`,
-            },
-            overflow: 'hidden',
-            aspectRatio: '8 / 9',
-            transition: getTransition('transform', 'moderate'),
-            maxHeight: '100%',
+        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,
+            }),
         },
     });
 };

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

@@ -71,7 +71,7 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getLinkTileProductCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { headerSlot, anchorSlot } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { anchorSlot, headerSlot } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /** __Experimental__ */
 class DSRLinkTileProduct extends Component {
@@ -83,7 +83,7 @@ class DSRLinkTileProduct extends Component {
         const priceId = 'price';
         const descriptionId = 'description';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.likeButton, !this.props.href, this.props.aspectRatio, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "like-button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Heart Filled icon' : 'Heart icon' }))] }), jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsxs("div", { className: "text-container", children: [jsx("h3", { id: headingId, className: "text text__heading", children: this.props.heading }), jsx("p", { id: priceId, className: "text text__price", children: this.props.price }), jsx("p", { id: descriptionId, className: "text text__description", children: this.props.description })] }), this.props.href ? (jsx("a", { className: "link-overlay", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot }))] }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [jsx("h3", { id: headingId, className: "heading", children: this.props.heading }), jsx("p", { id: priceId, className: "price", children: this.props.price }), jsx("p", { id: descriptionId, className: "description", children: this.props.description })] })] })] }), this.props.children] }));
     }
 }