vviinn-widgets 2.114.9 → 2.114.11

package/dist/cjs/{package-561bcf40.js → package-1ff201de.js}

@@ -120,7 +120,7 @@ const slotChangeListener = (component, element) => {
   component.connectedCallback.call(component);
 };
 
-const version = "2.114.9";
+const version = "2.114.11";
 
 exports.SlotSkeleton = SlotSkeleton;
 exports.campaignTypeNames = campaignTypeNames;

package/dist/cjs/search-filters_19.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-fc473b98.js');
 const index$1 = require('./index-4022a185.js');
-const _package = require('./package-561bcf40.js');
+const _package = require('./package-1ff201de.js');
 const index$2 = require('./index-1854036f.js');
 const SearchModalUploadIcon = require('./SearchModalUploadIcon-b6db8026.js');
 
@@ -4232,7 +4232,7 @@ const VviinnResults = class {
     var _a;
     return (index.h(index.Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: {
+      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           search_store.searchState.results.length > 0 ||

package/dist/cjs/vviinn-button_2.cjs.entry.js

@@ -110,7 +110,7 @@ const RecommendationsSidebar = class {
     });
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null)))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
+    return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null)))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, image-picture, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

package/dist/cjs/vviinn-carousel_8.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-fc473b98.js');
-const _package = require('./package-561bcf40.js');
+const _package = require('./package-1ff201de.js');
 const index$1 = require('./index-1854036f.js');
 const index$2 = require('./index-4022a185.js');
 const triggerFilter = require('./triggerFilter-e3cb803a.js');
@@ -989,13 +989,13 @@ const Price = (props) => {
     index.h(FormattedBasePrice, { currency: props.currency, basePrice: props.basePrice, locale: props.locale, priceType: "regular" })));
   return props.showInContainer ? (index.h("div", { class: "price-container", part: "price-container" }, renderPrice())) : (renderPrice());
 };
-const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
+const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", { part: "image-picture" },
   index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }),
   props.isSource && index.h(index$1.PlusIcon, null)));
-const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
+const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", { part: "image-picture" },
   index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
 
-const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative}.basket-button-container{width:100%;display:flex;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n    --product-card-image-border,\n    var(--product-card-image-border-default)\n  )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));padding:var(--spacing-50);border:none;cursor:pointer}.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n    --product-card-image-bg-color,\n    var(--product-card-image-bg-color-default)\n  );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .update-button{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}product-card--source{height:-moz-fit-content;height:fit-content;max-width:var(--source-card-set-mode-max-width);flex-grow:1}.product-card--source .image{width:100%;height:100%;aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n    --basket-button-bg-color-pressed,\n    var(--basket-button-bg-color-pressed-default)\n  )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n    var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.product-card-actions{position:absolute;right:8px;bottom:8px}::slotted([slot=\"vviinn-product-card-actions\"]){display:flex;flex-direction:column;gap:8px}.hidden{display:none}";
+const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;height:100%;width:100%}.basket-button-container{width:100%;display:flex;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n    --product-card-image-border,\n    var(--product-card-image-border-default)\n  )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));padding:var(--spacing-50);border:none;cursor:pointer}.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n    --product-card-image-bg-color,\n    var(--product-card-image-bg-color-default)\n  );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .update-button{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n    --basket-button-bg-color-pressed,\n    var(--basket-button-bg-color-pressed-default)\n  )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n    var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.product-card-actions{position:absolute;right:8px;bottom:8px}::slotted([slot=\"vviinn-product-card-actions\"]){display:flex;flex-direction:column;gap:8px}.hidden{display:none}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -1175,7 +1175,7 @@ const VviinnProductCard = class {
     var _a, _b, _c;
     return (index.h(index.Host, { part: "product-card", class: {
         animated: this.isTransitioning,
-      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, index.h("div", { class: "image-container", part: "image-container" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h("div", { class: "product-card-actions", part: "product-card-actions" }, index.h("slot", { name: "vviinn-product-card-actions" }))), index.h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 40 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (index.h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), index.h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
+      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, image-picture, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, index.h("div", { class: "image-container", part: "image-container" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h("div", { class: "product-card-actions", part: "product-card-actions" }, index.h("slot", { name: "vviinn-product-card-actions" }))), index.h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 40 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (index.h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), index.h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
       !this.appliedDiscountPercentage &&
       this.currentDiscountPercentage && (index.h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), renderCustomLabels(this.customLabels.split(",")), index.h("vviinn-skeleton", { height: 40, class: {
         hidden: !this.isTransitioning,

package/dist/cjs/vviinn-vps-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4474431a.js');
-const _package = require('./package-561bcf40.js');
+const _package = require('./package-1ff201de.js');
 const SearchModalUploadIcon = require('./SearchModalUploadIcon-b6db8026.js');
 const constants = require('./constants-7684cbfc.js');
 

package/dist/cjs/vviinn-vps-widget.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-4474431a.js');
 const search_store = require('./search.store-fc473b98.js');
 const index$1 = require('./index-4022a185.js');
-const _package = require('./package-561bcf40.js');
+const _package = require('./package-1ff201de.js');
 const constants = require('./constants-7684cbfc.js');
 
 const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
@@ -387,7 +387,7 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a, _b;
-    return (index.h(index.Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && _package.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+    return (index.h(index.Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && _package.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/collection/components/vviinn-product-card/render-helpers.js

@@ -50,5 +50,5 @@ export const Price = (props) => {
   ]) : (h("span", { class: "price-regular", part: "price-regular" }, h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale, priceType: "regular" }), h(FormattedBasePrice, { currency: props.currency, basePrice: props.basePrice, locale: props.locale, priceType: "regular" })));
   return props.showInContainer ? (h("div", { class: "price-container", part: "price-container" }, renderPrice())) : (renderPrice());
 };
-export const Image = (props, onLoadEnd = () => undefined) => (h("picture", null, h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }), props.isSource && h(PlusIcon, null)));
-export const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null, h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
+export const Image = (props, onLoadEnd = () => undefined) => (h("picture", { part: "image-picture" }, h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }), props.isSource && h(PlusIcon, null)));
+export const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", { part: "image-picture" }, h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));

package/dist/collection/components/vviinn-product-card/vviinn-product-card.css

@@ -253,6 +253,8 @@
 
 .image-container {
   position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .basket-button-container {
@@ -437,6 +439,7 @@ picture::before {
   font-size: var(--font-size-label);
   font-weight: var(--font-weight-600);
   font-family: var(--font-family, var(--font-family-base));
+  color: var(--color-text-primary);
   background-color: var(--button-bg-color-secondary);
   cursor: pointer;
 }
@@ -498,15 +501,11 @@ picture::after {
   gap: var(--spacing-75);
 }
 
-product-card--source {
-  height: -moz-fit-content;
-  height: fit-content;
-  max-width: var(--source-card-set-mode-max-width);
+:host(.product-card--source) {
   flex-grow: 1;
 }
-.product-card--source .image {
-  width: 100%;
-  height: 100%;
+
+:host(.product-card--source) picture {
   aspect-ratio: 1;
 }
 

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -21,6 +21,7 @@ import { resources } from "../../locale/resources";
  * @part deeplink - Anchor element for title. Rendered only if "deeplink" property is filled.
  * @part image - Product image.
  * @part image-link - Anchor element for image. Rendered only if "deeplink" property filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.
@@ -225,7 +226,7 @@ export class VviinnProductCard {
     var _a, _b, _c;
     return (h(Host, { part: "product-card", class: {
         animated: this.isTransitioning,
-      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" }))), h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
+      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, image-picture, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" }))), h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
       !this.appliedDiscountPercentage &&
       this.currentDiscountPercentage && (h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), renderCustomLabels(this.customLabels.split(",")), h("vviinn-skeleton", { height: 40, class: {
         hidden: !this.isTransitioning,

package/dist/collection/components/vviinn-results/vviinn-results.js

@@ -35,6 +35,7 @@ import { getCustomLabels } from "../../recommendation";
  * @part deeplink - Anchor element around troduct title. Rendered only if "deeplink" property is filled.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.
@@ -340,7 +341,7 @@ export class VviinnResults {
     var _a;
     return (h(Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
+      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           searchState.results.length > 0 ||

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js

@@ -84,7 +84,7 @@ export class RecommendationsSidebar {
     });
   }
   render() {
-    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null)))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
+    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null)))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, image-picture, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js

@@ -12,6 +12,7 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
  * @part currency - Currency related to price.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js

@@ -38,6 +38,7 @@ import { getCustomLabels, getRecommendationsBody } from "../../recommendation";
  * @part currency - Currency related to price.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.

package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js

@@ -29,6 +29,7 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
  * @part deeplink - Anchor element around troduct title. Rendered only if "deeplink" property is filled.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -58,6 +58,7 @@ const CAMERA_START_DELAY = 500;
  * @part deeplink - Anchor element around troduct title. Rendered only if "deeplink" property is filled.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.
@@ -410,7 +411,7 @@ export class VviinnVpsWidget {
   }
   render() {
     var _a, _b;
-    return (h(Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+    return (h(Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/esm/{package-152ec591.js → package-e8fc60a9.js}

@@ -118,6 +118,6 @@ const slotChangeListener = (component, element) => {
   component.connectedCallback.call(component);
 };
 
-const version = "2.114.9";
+const version = "2.114.11";
 
 export { SlotSkeleton as S, fold as a, campaignTypeNames as c, fromString as f, slotChangeListener as s, version as v };

package/dist/esm/search-filters_19.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-abf408d8.js';
 import { s as searchState, _ as _function, O as Option, l as fromAlt, n as foldValueObject, o as scaleWithSized, q as center, r as makeRectangularSearchRequest, u as detectedObjectEq, v as toFile, w as processSelectedFile, E as Either, x as match, j as createCommonjsModule, e as commonjsGlobal, y as sequenceToOption, z as fromImage, B as dimensionsFromImage, C as scaleByLargestSide, d as state, D as makeSearchIdRequest, F as getOrElse, G as makeTextSearchRequest, H as makeSearchQueryRequest, I as makeProductListingPageRequest, N as NonEmptyArray } from './search.store-d779cff4.js';
 import { i as instance, l as createFilterEvent, r as resources, c as createTrackingApi, v as v4, n as createResultVpsEventByType, o as createProductVpsEventByType } from './index-58ea7199.js';
-import { s as slotChangeListener, c as campaignTypeNames, v as version } from './package-152ec591.js';
+import { s as slotChangeListener, c as campaignTypeNames, v as version } from './package-e8fc60a9.js';
 import { P as PlusIcon, g as getCustomLabels } from './index-f1b5fbda.js';
 import { S as SearchModalUploadIcon } from './SearchModalUploadIcon-ef6e9c6c.js';
 
@@ -4228,7 +4228,7 @@ const VviinnResults = class {
     var _a;
     return (h(Host, { id: "results-block", class: {
         "show-in-widget": this.showInWidget,
-      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
+      }, exportparts: "image-container, content-container, basket-button-container, title, product-card, brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           searchState.results.length > 0 ||

package/dist/esm/vviinn-button_2.entry.js

@@ -106,7 +106,7 @@ const RecommendationsSidebar = class {
     });
   }
   render() {
-    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null)))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
+    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, this.mode !== "set" && (h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null)))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "image-container, content-container, basket-button-container,brand, product-type, currency, deeplink, image, image-link, image-picture, price-container, price-amount, price-prefix, price-outdated, price-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-sale, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation, addPriceContainer: this.addPriceContainer })))));
   }
   renderSourceImage() {
     var _a, _b, _c, _d, _e, _f;

package/dist/esm/vviinn-carousel_8.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-abf408d8.js';
 import { h as has, t as tuple, s as searchState, _ as _function, a as _Array, i as isClickedInRectBound, O as Option, S as Semigroup, E as Either, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitPostRequest, A as Apply, d as state, T as TaskEither } from './search.store-d779cff4.js';
-import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton, f as fromString, a as fold, v as version } from './package-152ec591.js';
+import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton, f as fromString, a as fold, v as version } from './package-e8fc60a9.js';
 import { g as getCustomLabels, P as PlusIcon, a as getRecommendationsBody } from './index-f1b5fbda.js';
 import { i as instance, r as resources, v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, j as createProductVprEventByType } from './index-58ea7199.js';
 import { t as triggerFilter, e as emitRequestFiltersMore, C as CheckFilterIcon, S as SquareFilterIcon, s as showActiveOnSubButton, R as RenderButton } from './triggerFilter-5458698f.js';
@@ -985,13 +985,13 @@ const Price = (props) => {
     h(FormattedBasePrice, { currency: props.currency, basePrice: props.basePrice, locale: props.locale, priceType: "regular" })));
   return props.showInContainer ? (h("div", { class: "price-container", part: "price-container" }, renderPrice())) : (renderPrice());
 };
-const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
+const Image = (props, onLoadEnd = () => undefined) => (h("picture", { part: "image-picture" },
   h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd }),
   props.isSource && h(PlusIcon, null)));
-const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
+const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", { part: "image-picture" },
   h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
 
-const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative}.basket-button-container{width:100%;display:flex;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n    --product-card-image-border,\n    var(--product-card-image-border-default)\n  )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));padding:var(--spacing-50);border:none;cursor:pointer}.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n    --product-card-image-bg-color,\n    var(--product-card-image-bg-color-default)\n  );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .update-button{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}product-card--source{height:-moz-fit-content;height:fit-content;max-width:var(--source-card-set-mode-max-width);flex-grow:1}.product-card--source .image{width:100%;height:100%;aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n    --basket-button-bg-color-pressed,\n    var(--basket-button-bg-color-pressed-default)\n  )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n    var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.product-card-actions{position:absolute;right:8px;bottom:8px}::slotted([slot=\"vviinn-product-card-actions\"]){display:flex;flex-direction:column;gap:8px}.hidden{display:none}";
+const vviinnProductCardCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--product-card-content-align-default:flex-start;--product-card-text-align-default:left;--product-card-image-border-default:none;--product-card-image-bg-color-default:var(--surface-bg-color-01);--basket-button-bg-color-pressed-default:var(--button-bg-color-positive);position:relative;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  );font-family:var(--font-family, var(--font-family-base));font-weight:var(--font-weight-400);font-size:var(--font-size-body);line-height:var(--line-height-body);font-style:normal;color:var(--color-text-primary);gap:var(--spacing-100)}.image-container{position:relative;height:100%;width:100%}.basket-button-container{width:100%;display:flex;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.content-container{display:grid;width:100%;grid-template-columns:1fr;align-items:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );gap:var(--spacing-50)}.price-container{display:flex;flex-direction:column;gap:var(--spacing-50);flex-wrap:wrap;justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.price-outdated,.price-sale,.price-regular{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  );display:flex;gap:var(--spacing-100);flex-wrap:wrap}.price-outdated{color:var(--color-text-helper);text-decoration:line-through}.custom-label{font-weight:var(--font-weight-600);display:none}.price-amount,.custom-label>span,.currency{white-space:nowrap}.custom-label>span{margin-right:var(--spacing-75)}.price-amount--base{color:var(--color-text-helper);font-size:var(--font-size-caption)}.product-type{word-wrap:anywhere}.image{box-sizing:border-box;display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;aspect-ratio:1;-o-object-fit:contain;object-fit:contain;text-align:center;border:var(\n    --product-card-image-border,\n    var(--product-card-image-border-default)\n  )}.image.responsive{width:100%;height:auto}.currency{padding-left:var(--spacing-50)}.title{display:-webkit-box;max-width:var(--product-card-set-mode-max-width);font-weight:var(--font-weight-600);color:var(--color-text-primary);-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden}.title,.brand{text-align:var(\n    --product-card-text-align,\n    var(--product-card-text-align-default)\n  )}.deeplink{max-width:100%;text-decoration:none}.image-link{display:contents}picture{display:block;width:100%;height:100%;position:relative}picture::before{display:block;box-sizing:border-box;position:absolute;width:100%;height:100%;top:0;left:0;content:\"\";opacity:0}.update-button{position:absolute;width:32px;height:32px;top:var(--spacing-100);right:var(--spacing-100);z-index:1;background-color:var(--button-bg-color-frosted);color:var(--color-icon-on-color);-webkit-backdrop-filter:blur(calc(var(--filter-blur-150) / 2));backdrop-filter:blur(calc(var(--filter-blur-150) / 2));padding:var(--spacing-50);border:none;cursor:pointer}.update-button::after{position:absolute;width:calc(100% + var(--spacing-100));height:calc(100% + var(--spacing-100));top:calc(-1 * var(--spacing-50));right:calc(-1 * var(--spacing-50));content:\"\"}.update-button:hover{background-color:var(--button-bg-color-frosted-hover)}.basket-button{box-sizing:border-box;border:none;width:100%;padding:var(--spacing-100);font-size:var(--font-size-label);font-weight:var(--font-weight-600);font-family:var(--font-family, var(--font-family-base));color:var(--color-text-primary);background-color:var(--button-bg-color-secondary);cursor:pointer}.basket-button:hover{background-color:var(--button-bg-color-secondary-hover)}.basket-button-icon-container{display:inline-flex;align-items:center;justify-content:center}picture::after{box-sizing:border-box;display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(\n    --product-card-image-bg-color,\n    var(--product-card-image-bg-color-default)\n  );mix-blend-mode:multiply;content:\"\"}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-color:transparent}:host(.animated) .update-button{display:none}.basket-button-content{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--spacing-75)}:host(.product-card--source){flex-grow:1}:host(.product-card--source) picture{aspect-ratio:1}picture .plus-icon{position:absolute;width:32px;height:32px;top:calc(50% - 32px);right:-88px;padding:var(--spacing-200);background-color:var(--color-bg-base);color:var(--color-text-placeholder);outline:1px solid var(--color-border-01);z-index:1;border-radius:50%}.basket-button.pressed{background-color:var(\n    --basket-button-bg-color-pressed,\n    var(--basket-button-bg-color-pressed-default)\n  )}.basket-button.pressed .discount-percentage{padding-right:var(--spacing-50)}@media (max-width: 768px){picture .plus-icon{padding:var(--spacing-100);top:calc(50% - var(--spacing-300));right:calc(-1 * var(--spacing-300))}}@keyframes pulse{0%{background-color:var(--surface-bg-color-01)}50%{background-color:var(--surface-bg-color-01-active)}100%{background-color:var(--surface-bg-color-01)}}.discount-label{position:absolute;left:var(--spacing-none);top:var(--spacing-150);padding:var(--spacing-25) var(--spacing-50);border-radius:var(--border-radius-none) var(--border-radius-50)\n    var(--border-radius-50) var(--border-radius-none);color:var(--color-text-on-color);background-color:var(--label-bg-color-accent);letter-spacing:var(--letter-spacing-label)}vviinn-energy-label{justify-content:var(\n    --product-card-content-align,\n    var(--product-card-content-align-default)\n  )}.product-card-actions{position:absolute;right:8px;bottom:8px}::slotted([slot=\"vviinn-product-card-actions\"]){display:flex;flex-direction:column;gap:8px}.hidden{display:none}";
 
 const VviinnProductCard = class {
   constructor(hostRef) {
@@ -1171,7 +1171,7 @@ const VviinnProductCard = class {
     var _a, _b, _c;
     return (h(Host, { part: "product-card", class: {
         animated: this.isTransitioning,
-      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" }))), h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
+      }, exportparts: "image-container, content-container, basket-button-container, brand, product-type, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, currency, deeplink, image, image-link, image-picture, price-container, price-amount-regular, price-amount-sale, price-amount-outdated, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, discount-label, discount-percentage, title, basket-button, update-button-item, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link product-card-actions" }, h("div", { class: "image-container", part: "image-container" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" }))), h("div", { class: "content-container", part: "content-container" }, this.isTransitioning ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), ((_a = this.brand) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "brand", part: "brand" }, this.brand)), ((_b = this.productType) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("span", { class: "product-type", part: "product-type" }, this.productType)), ((_c = this === null || this === void 0 ? void 0 : this.energyCertifications) !== null && _c !== void 0 ? _c : []).map((energyCertification) => (h("vviinn-energy-label", { classIconUrls: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classIconUrls, classDataSheetUrl: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classDataSheetUrl, productType: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.productType }))), h(Price, { prefix: this.pricePrefix, currency: this.currency, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), locale: this.locale, showInContainer: this.addPriceContainer }), this.setMode &&
       !this.appliedDiscountPercentage &&
       this.currentDiscountPercentage && (h("div", { class: "discount-label", part: "discount-label" }, `-${this.currentDiscountPercentage}%`)))), renderCustomLabels(this.customLabels.split(",")), h("vviinn-skeleton", { height: 40, class: {
         hidden: !this.isTransitioning,

package/dist/esm/vviinn-vps-button.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-abf408d8.js';
-import { c as campaignTypeNames, v as version, S as SlotSkeleton } from './package-152ec591.js';
+import { c as campaignTypeNames, v as version, S as SlotSkeleton } from './package-e8fc60a9.js';
 import { S as SearchModalUploadIcon } from './SearchModalUploadIcon-ef6e9c6c.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
 

package/dist/esm/vviinn-vps-widget.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, F as Fragment, H as Host, g as getElement } from './index-abf408d8.js';
 import { s as searchState, d as state, k as parseExcludedToParams, O as Option } from './search.store-d779cff4.js';
 import { i as instance, r as resources, k as createSearchEvent, l as createFilterEvent, v as v4, c as createTrackingApi, m as createWidgetVpsEvent } from './index-58ea7199.js';
-import { c as campaignTypeNames, v as version, s as slotChangeListener, S as SlotSkeleton } from './package-152ec591.js';
+import { c as campaignTypeNames, v as version, s as slotChangeListener, S as SlotSkeleton } from './package-e8fc60a9.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
 
 const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
@@ -383,7 +383,7 @@ const VviinnVpsWidget = class {
   }
   render() {
     var _a, _b;
-    return (h(Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
+    return (h(Host, { exportparts: "image-container, content-container, basket-button-container,brand, product-type, deeplink, currency, image, image-link, image-picture, price-container, price-amount-sale, price-amount-outdated, price-amount-regular, price-amount-base-regular, price-amount-base-sale, price-amount-base-outdated, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, custom-label-0, custom-label-1, custom-label-2, custom-label-3, custom-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
         (!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
         "start-page": true,
         "camera-enabled": this.cameraEnabled,

package/dist/storybook/helpers/industryToken.js

@@ -7,6 +7,7 @@ const data = {
     productIdCrossSelling: "105870136716",
     textSearchQuery: "Chair",
     filterValue: "Möbel > Schränke & Regale",
+    description: "company: 'vviinn', site: 'vviinn.com/widgets.vviinn.com site 83'",
   },
   fashion: {
     token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjIwNywianRpIjoiMmU0OTY3OTgtYzk3NC00ODQ3LTkyYWItOTBkMTEyZGY5MTY2Iiwic2NvcGVzIjpbInZwciIsInZwcyIsInZwYyJdfQ.bH8WQkR3jBuDZ92F3WObgcKplh14ODZeiBCf5JDOJfucU75u4XaZOQrmsOaw1ouZbO9cW40sKw9ZICaP4Soi00AHrWPBGjuzZ0Yx17vwGFUtHgK5Zi9DAhd3R3PcRnbo7UIvUtANTGcExd5TQnrA07DtV99KThoQEYB2I8R8HXv46j-Abo2kHovd6fGwYC6FYT1QpXEsVa8QNZtcrB0yU1rK6da8aR5Nh3zYECIUL0ysdhRmOQxR_3zBUVrXJYB15vvOH4TjAG6jSMcvaLwzmmTzH9_A9kVLsP27cFK5YYoAx7_w0eBMhQv3yEaHrVXuMXQe2gFjvCat441_DvZWyg",
@@ -14,6 +15,7 @@ const data = {
     productIdCrossSelling: "4165669-1",
     textSearchQuery: "taschen",
     filterValue: "Beauty > Düfte",
+    description: "company: 'Vviinn Demo Company', site: 'Fashion Women 64K'",
   },
   "manufacturer-spare-parts": {
     token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjEyNCwianRpIjoiM2FhNmY4M2UtOWFhMC00MjI5LThlMTMtMWJlZGUxMjM5MTJmIiwic2NvcGVzIjpbInZwciIsInZwcyIsInZwYyJdfQ.ewubkDcxd1Griq-w31oPqGv-HjSGsGvw__Hj4DYXm-tIsr1DeqiYWRXQXMxLTc5aKSI_AIDLP8Xxx0UUMJwuUC9kMjO0HGtgczb96eCOy4aAYiCPdN5sRv2iJLxIKI6xUNkhBIJzY_O56Ido9y8senDyoVx01cZq3duHnd14g6OQty3nGtE2scl9cDAUwpQ9xOYhTiTV1nnJBBqNjqn9PQMf-UVBA0I3yOuQ826Ra_sMYRbKLOH5E6vkbvxvDMAZ3lVh_mDfmdtVCz58W-k04eNbiM1jfzEUOwPQMB1nBEMDZjHlWozi6fT-7yAYNls9qv6wvuw_ED1xaURSVeQooA",

package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts

@@ -13,6 +13,7 @@ import { BasePrice, EnergyCertification } from "../../interfaces/recommendation"
  * @part deeplink - Anchor element for title. Rendered only if "deeplink" property is filled.
  * @part image - Product image.
  * @part image-link - Anchor element for image. Rendered only if "deeplink" property filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.

package/dist/types/components/vviinn-results/vviinn-results.d.ts

@@ -12,6 +12,7 @@ import { ChangedFiltersEventData, DynamicFiltersEventData, ProductCardEvent, Pro
  * @part deeplink - Anchor element around troduct title. Rendered only if "deeplink" property is filled.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.

package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts

@@ -15,6 +15,7 @@ import { UpdateButtonLocation } from "../vviinn-vpr-widget/vviinn-vpr-widget";
  * @part currency - Currency related to price.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.

package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-widget.d.ts

@@ -16,6 +16,7 @@ export type UpdateButtonLocation = "onTop" | "onItem" | "topAndItem";
  * @part currency - Currency related to price.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.

package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts

@@ -27,6 +27,7 @@ import { VisualSearchMode } from "../../widget/types";
  * @part deeplink - Anchor element around troduct title. Rendered only if "deeplink" property is filled.
  * @part image - Product Card image.
  * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
  * @part price-amount-regular - Numeric part of the price.
  * @part price-amount-sale - Numeric part of the price.
  * @part price-amount-outdated - Numeric part of the price.