vviinn-widgets 2.226.2 → 2.227.0

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

@@ -1,22 +1,22 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-DHLFo5Q5.js';
-import { _ as _functionExports, E as EitherExports, f as fold, b as fromImage, a as divideOnSized, e as isLeft, m as match, O as OptionExports } from './Rectangle-B-guJ12O.js';
-import { t as toFile, c as makeUploadFileRequest, w as extractSelectedFilters, x as resetResultEvents, y as getImageSizes, v as version, f as campaignTypeNames, h as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, z as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, A as resetStore, j as makeTextSearchRequest, B as makeProductListingPageRequest, C as checkDeviceType, p as parseStringToExcluded } from './search.store-BHk80_jt.js';
-import { s as slotChangeListener, a as addEventListenersWithSignal, p as productCardSlotNames, v as vprIconSlotName, f as findSlotElements, g as getSlotNames, b as setElementInteractivity, S as SlotSkeleton } from './index-DW1q_PTq.js';
-import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, v as v4, c as createImageSearchEvent, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, a as createWidgetEvent, b as createFilterEvent, d as createAddToBasketEvent, e as createAddToWishlistEvent, f as createResultEventByType, h as createProductEventByType, i as getCustomLabels, t as triggerFilter, j as triggerRemoveIntervalFilter, k as announceToScreenReader, s as syncRequestFilters, l as isSubFilterActive, m as RenderFilterButton, n as getSelectedInterval, o as getIntervalLabel } from './index-BYSkRZGE.js';
-import { i as instance, t as trackEvent, a as isTrackingEnabled, d as defaultConfig } from './store-BtLMHZyk.js';
-import { M as MIN_SEARCH_AREA_SIZE, a as CROP_THUMBNAIL_FILL_COLOR, b as CROP_THUMBNAIL_SIZE, d as CROP_THUMBNAIL_QUALITY, S as SUPPORTED_ASPECT_RATIO, e as MIN_IMAGE_SIDE_FOR_CROPPER, C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal, D as DEFAULT_IMAGE_SIZE } from './cropperUtils-sMYHiiXk.js';
-import { r as renderExternalCSS, R as RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH, c as SCROLL_TO_DISCOVERY_DELAY, S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from './cssUrlHelper-D2cDTfTS.js';
-import { i as initializeLocale, d as productCardsGridPart, p as productCardParts, l as listCardParts, e as contentCardParts, f as selectedFiltersParts, g as suggestionsParts, h as filtersParts, j as extendedFiltersParts, m as modalParts, b as searchBarParts, k as searchWidgetFilterParts, n as searchWidgetButtonParts } from './index-DTRZmXVv.js';
-import { i as isOnResultsPage, a as parseResultsPageParams, p as parseResultsPageParamNames, c as buildImageSearchRedirectUrl } from './resultsPageUrl-BdVH6RtP.js';
-import { o as openProductLink } from './openProductLink-DodmldXL.js';
-import { D as DEFAULT_EXAMPLE_IMAGE } from './exampleImage-DR9_lICd.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-FhFmxhnG.js';
+import { _ as _functionExports, E as EitherExports, f as fold, b as fromImage, a as divideOnSized, e as isLeft, m as match, O as OptionExports } from './Rectangle-DYZUk1F3.js';
+import { t as toFile, c as makeUploadFileRequest, w as extractSelectedFilters, x as resetResultEvents, y as getImageSizes, v as version, f as campaignTypeNames, h as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, z as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, A as resetStore, j as makeTextSearchRequest, B as makeProductListingPageRequest, C as checkDeviceType, p as parseStringToExcluded } from './search.store-BkVbtzWE.js';
+import { s as slotChangeListener, a as addEventListenersWithSignal, p as productCardSlotNames, v as vprIconSlotName, f as findSlotElements, g as getSlotNames, b as setElementInteractivity, S as SlotSkeleton } from './index-DRuRp4Bj.js';
+import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, v as v4, c as createImageSearchEvent, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, a as createWidgetEvent, b as createFilterEvent, d as createAddToBasketEvent, e as createAddToWishlistEvent, f as createResultEventByType, h as createProductEventByType, i as getCustomLabels, t as triggerFilter, j as triggerRemoveIntervalFilter, k as announceToScreenReader, s as syncRequestFilters, l as isSubFilterActive, m as RenderFilterButton, n as getSelectedInterval, o as getIntervalLabel } from './index-CWTRysN5.js';
+import { i as instance, t as trackEvent, a as isTrackingEnabled, d as defaultConfig } from './store-CFvXi0uP.js';
+import { M as MIN_SEARCH_AREA_SIZE, a as CROP_THUMBNAIL_FILL_COLOR, b as CROP_THUMBNAIL_SIZE, d as CROP_THUMBNAIL_QUALITY, S as SUPPORTED_ASPECT_RATIO, e as MIN_IMAGE_SIDE_FOR_CROPPER, C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal, D as DEFAULT_IMAGE_SIZE } from './cropperUtils-CexZ_yfb.js';
+import { r as renderExternalCSS, R as RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH, c as SCROLL_TO_DISCOVERY_DELAY, S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from './cssUrlHelper-C9a8Lgt6.js';
+import { i as initializeLocale, d as productCardsGridPart, p as productCardParts, l as listCardParts, e as contentCardParts, f as selectedFiltersParts, g as suggestionsParts, h as filtersParts, j as extendedFiltersParts, m as modalParts, b as searchBarParts, k as searchWidgetFilterParts, n as searchWidgetButtonParts } from './index-D9AV63U9.js';
+import { i as isOnResultsPage, a as parseResultsPageParams, p as parseResultsPageParamNames, c as buildImageSearchRedirectUrl } from './resultsPageUrl-Cc4vYYIH.js';
+import { o as openProductLink } from './openProductLink-VT0ItZ7J.js';
+import { D as DEFAULT_EXAMPLE_IMAGE } from './exampleImage-OaNWTAPi.js';
 
 const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
     h("path", { d: "M12 17.5C13.25 17.5 14.3125 17.0625 15.1875 16.1875C16.0625 15.3125 16.5 14.25 16.5 13C16.5 11.75 16.0625 10.6875 15.1875 9.8125C14.3125 8.9375 13.25 8.5 12 8.5C10.75 8.5 9.6875 8.9375 8.8125 9.8125C7.9375 10.6875 7.5 11.75 7.5 13C7.5 14.25 7.9375 15.3125 8.8125 16.1875C9.6875 17.0625 10.75 17.5 12 17.5ZM12 15.5C11.3 15.5 10.7083 15.2583 10.225 14.775C9.74167 14.2917 9.5 13.7 9.5 13C9.5 12.3 9.74167 11.7083 10.225 11.225C10.7083 10.7417 11.3 10.5 12 10.5C12.7 10.5 13.2917 10.7417 13.775 11.225C14.2583 11.7083 14.5 12.3 14.5 13C14.5 13.7 14.2583 14.2917 13.775 14.775C13.2917 15.2583 12.7 15.5 12 15.5ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7C2 6.45 2.19583 5.97917 2.5875 5.5875C2.97917 5.19583 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.45 8.80417 3.29167 9.0625 3.175C9.32083 3.05833 9.59167 3 9.875 3H14.125C14.4083 3 14.6792 3.05833 14.9375 3.175C15.1958 3.29167 15.4167 3.45 15.6 3.65L16.85 5H20C20.55 5 21.0208 5.19583 21.4125 5.5875C21.8042 5.97917 22 6.45 22 7V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4Z", fill: "currentColor" })));
@@ -794,7 +794,7 @@ const oneClickDiscoveryModes = [
     "unset",
 ];
 
-const vviinnResultsCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--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-display:40px;--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:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:block}:host(.show-in-widget){display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}:host::part(product-card){width:100%;height:100%}:host::part(content-card){height:100%}:host::part(list-card){height:calc(100% - 20px)}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(\n    auto-fill,\n    minmax(\n      var(--product-card-width, var(--product-card-results-min-width)),\n      1fr\n    )\n  );justify-items:center;padding:0 24px 24px 16px;position:absolute}:host(.show-in-widget) .products{grid-template-columns:repeat(\n    auto-fill,\n    minmax(var(--product-card-width, var(--product-card-widget-min-width)), 1fr)\n  )}:host(:not(.show-in-widget)) .products{position:static;padding:0}.hidden{visibility:hidden;height:1px}products.hidden{display:none}.vviinn-results-product-card-actions vviinn-vpr-button::part(button){position:relative;display:flex;justify-content:center;align-items:center;color:var(--color-icon-inverse);padding:var(--spacing-50);gap:var(--spacing-50);border-radius:var(--border-radius-100);background:var(--button-bg-color-frosted);backdrop-filter:blur(calc(var(--filter-blur-150, 12px) / 2))}.vviinn-results-product-card-actions vviinn-vpr-button::part(button)::after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(1.55)}.vviinn-results-product-card-actions vviinn-vpr-button::part(button):hover{background:var(--button-bg-color-frosted-hover)}#one-click-discovery-append{width:100%;grid-column:1 / -1}vviinn-recommendations-sidebar::part(body){border:1px solid var(--color-border-02);border-left:none;border-right:none;margin-top:-9px;max-height:unset}@media screen and (max-width: 768px){vviinn-recommendations-sidebar::part(body){margin-top:-1px}}vviinn-recommendations-sidebar::part(source-image){display:none}vviinn-recommendations-sidebar::part(sidebar-header){padding:0;min-height:40px;margin-bottom:24px;align-items:center;justify-items:left;text-align:left}vviinn-recommendations-sidebar::part(sidebar-content){padding:0}:host(.matching-discovery) vviinn-recommendations-sidebar::part(items-group){grid-template-columns:repeat(\n    auto-fill,\n    minmax(\n      var(--product-card-width, var(--product-card-results-min-width)),\n      1fr\n    )\n  )}:host(.show-in-widget) vviinn-recommendations-sidebar::part(recommendations-results),:host(.show-in-widget) vviinn-recommendations-sidebar::part(items-group){grid-template-columns:repeat(\n    auto-fill,\n    minmax(var(--product-card-widget-min-width), 1fr)\n  )}@media (max-width: 768px){:host(.show-in-widget){align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:12px}.products{position:static;padding:0;width:unset;row-gap:24px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 380px){.products{-moz-column-gap:10px;column-gap:10px}}";
+const vviinnResultsCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--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-display:40px;--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:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{--vviinn-results-row-gap-default:var(--spacing-400);display:block}:host(.show-in-widget){display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}:host::part(product-card){width:100%;height:100%}:host::part(content-card){height:100%}:host::part(list-card){height:calc(100% - 20px)}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;row-gap:var(--vviinn-results-row-gap, var(--vviinn-results-row-gap-default));-moz-column-gap:var(--spacing-200);column-gap:var(--spacing-200);grid-template-columns:repeat(\n    auto-fill,\n    minmax(\n      var(--product-card-width, var(--product-card-results-min-width)),\n      1fr\n    )\n  );justify-items:center;padding:0 24px 24px 16px;position:absolute}:host(.show-in-widget) .products{grid-template-columns:repeat(\n    auto-fill,\n    minmax(var(--product-card-width, var(--product-card-widget-min-width)), 1fr)\n  )}:host(:not(.show-in-widget)) .products{position:static;padding:0}.hidden{visibility:hidden;height:1px}products.hidden{display:none}.vviinn-results-product-card-actions vviinn-vpr-button::part(button){position:relative;display:flex;justify-content:center;align-items:center;color:var(--color-icon-inverse);padding:var(--spacing-50);gap:var(--spacing-50);border-radius:var(--border-radius-100);background:var(--button-bg-color-frosted);backdrop-filter:blur(calc(var(--filter-blur-150, 12px) / 2))}.vviinn-results-product-card-actions vviinn-vpr-button::part(button)::after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(1.55)}.vviinn-results-product-card-actions vviinn-vpr-button::part(button):hover{background:var(--button-bg-color-frosted-hover)}#one-click-discovery-append{width:100%;grid-column:1 / -1}vviinn-recommendations-sidebar::part(body){border:1px solid var(--color-border-02);border-left:none;border-right:none;margin-top:calc(\n    22px - var(--vviinn-results-row-gap, var(--vviinn-results-row-gap-default))\n  );max-height:unset}vviinn-recommendations-sidebar::part(source-image){display:none}vviinn-recommendations-sidebar::part(sidebar-header){padding:0;min-height:40px;margin-bottom:24px;align-items:center;justify-items:left;text-align:left}vviinn-recommendations-sidebar::part(sidebar-content){padding:0}:host(.matching-discovery) vviinn-recommendations-sidebar::part(items-group){grid-template-columns:repeat(\n    auto-fill,\n    minmax(\n      var(--product-card-width, var(--product-card-results-min-width)),\n      1fr\n    )\n  )}:host(.show-in-widget) vviinn-recommendations-sidebar::part(recommendations-results),:host(.show-in-widget) vviinn-recommendations-sidebar::part(items-group){grid-template-columns:repeat(\n    auto-fill,\n    minmax(var(--product-card-widget-min-width), 1fr)\n  )}@media (max-width: 768px){:host(.show-in-widget){align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:12px}:host{--vviinn-results-row-gap-default:var(--spacing-300)}.products{position:static;padding:0;width:unset;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 380px){.products{-moz-column-gap:10px;column-gap:10px}}";
 
 var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1199,19 +1199,19 @@ const VviinnResults = class {
                     ? "one-click-discovery-append"
                     : undefined, appendSidebarToElement: isOneClickDiscoveryAppendMode
                     ? this.el.shadowRoot.getElementById("one-click-discovery-append")
-                    : undefined, oneClickDiscoveryMode: this.oneClickDiscoveryMode, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, campaigns: this.oneClickDiscoveryCampaigns, showInWidget: this.showInWidget, uiSessionId: this.uiSessionId, onVviinnVprButtonActivated: () => oneClickDiscoveryHandler(i) }, this.renderProductCardSlots(), this.renderVprIconSlot())))));
+                    : undefined, oneClickDiscoveryMode: this.oneClickDiscoveryMode, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, campaigns: this.oneClickDiscoveryCampaigns, cssUrl: this.cssUrl, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, showInWidget: this.showInWidget, uiSessionId: this.uiSessionId, onVviinnVprButtonActivated: () => oneClickDiscoveryHandler(i) }, this.renderProductCardSlots(), this.renderVprIconSlot())))));
         });
     }
     render() {
         var _a;
         const resultsLength = this.getResults().length;
-        return (h(Host, { key: '790d9a8de6038a80aab7d985dc0a58a0271147c8', id: "results-block", class: {
+        return (h(Host, { key: '1f5e7b912b8aa1b25e87772c4c4e96e2c9b9a2a0', id: "results-block", class: {
                 "show-in-widget": this.showInWidget,
                 "matching-discovery": this.oneClickDiscoveryMode === "append-slider",
-            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: '2624453450be0b0b3f54decfc0c36475e0ee50fe', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'ba6053509df7c4cdb4d11df5b1a88fe2b21aa4d1', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: '1886397deed8c6d3bda186f577048c61d61547cc', class: {
+            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: 'a20bf97ab034112743b92d9641dbb6d0ab984b69', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'd44c5711f23cf8945de4e0e7c1f30c6959747f83', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: '016470c1782289440ce773c650e43b0bc02571c2', class: {
                 hidden: this.showAspectRatioError || resultsLength === 0,
                 products: true,
-            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '93f1b795ca6b63cf6a99f4bcb249d442ee515df4', id: "one-click-discovery-append", style: {
+            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: 'f2fb9e57b0ce5ed95c6515c6035b85d870defca9', id: "one-click-discovery-append", style: {
                 order: ((_a = this.oneClickDiscoveryAppendIndex) !== null && _a !== void 0 ? _a : resultsLength).toString(),
             } }))));
     }

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

@@ -1,20 +1,20 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { h, r as registerInstance, c as createEvent, f as forceUpdate, F as Fragment, H as Host, g as getElement } from './index-DHLFo5Q5.js';
-import { f as campaignTypeNames, h as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, D as isMobile, E as fromString, F as fold, v as version } from './search.store-BHk80_jt.js';
-import { X as has, Y as tuple, _ as _functionExports, g as requireSemigroup, O as OptionExports, v as pipe$1, N as chainW, Z as makeRequest, L as fromEither, $ as resolveApiPath, a0 as createInitPostRequest, a1 as Apply, a2 as TaskEitherExports, E as EitherExports } from './Rectangle-B-guJ12O.js';
-import { i as instance, d as defaultConfig, t as trackEvent, a as isTrackingEnabled } from './store-BtLMHZyk.js';
-import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, p as CAROUSEL_IMAGE_WIDTH_CSS_VAR, q as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, r as CAROUSEL_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, i as getCustomLabels, u as SCROLL_POSITION_TOLERANCE, w as triggerResetFilters, t as triggerFilter, k as announceToScreenReader, o as getIntervalLabel, x as isPriceFilter, n as getSelectedInterval, l as isSubFilterActive, m as RenderFilterButton, s as syncRequestFilters, P as PlusIcon, y as CUSTOM_LABELS_DELIMITER, v as v4, a as createWidgetEvent, f as createResultEventByType, d as createAddToBasketEvent, e as createAddToWishlistEvent, h as createProductEventByType, z as getRecommendationsBody } from './index-BYSkRZGE.js';
-import { b as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH, P as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-D2cDTfTS.js';
-import { s as slotChangeListener, a as addEventListenersWithSignal, i as isElementInSelector, S as SlotSkeleton } from './index-DW1q_PTq.js';
-import { o as energyLabelParts, i as initializeLocale, j as extendedFiltersParts, h as filtersParts, q as imageParts, e as contentCardParts, l as listCardParts, p as productCardParts, t as priceRangeParts } from './index-DTRZmXVv.js';
-import { r as register, c as configureSwiperElement, s as setupIntersectionObserver } from './swiper-element-CC2LQV6l.js';
-import { o as openProductLink } from './openProductLink-DodmldXL.js';
+import { h, r as registerInstance, c as createEvent, f as forceUpdate, F as Fragment, H as Host, g as getElement } from './index-FhFmxhnG.js';
+import { f as campaignTypeNames, h as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, D as isMobile, E as fromString, F as fold, v as version } from './search.store-BkVbtzWE.js';
+import { X as has, Y as tuple, _ as _functionExports, g as requireSemigroup, O as OptionExports, v as pipe$1, N as chainW, Z as makeRequest, L as fromEither, $ as resolveApiPath, a0 as createInitPostRequest, a1 as Apply, a2 as TaskEitherExports, E as EitherExports } from './Rectangle-DYZUk1F3.js';
+import { i as instance, d as defaultConfig, t as trackEvent, a as isTrackingEnabled } from './store-CFvXi0uP.js';
+import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, p as CAROUSEL_IMAGE_WIDTH_CSS_VAR, q as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, r as CAROUSEL_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, i as getCustomLabels, u as SCROLL_POSITION_TOLERANCE, w as triggerResetFilters, t as triggerFilter, k as announceToScreenReader, o as getIntervalLabel, x as isPriceFilter, n as getSelectedInterval, l as isSubFilterActive, m as RenderFilterButton, s as syncRequestFilters, y as CUSTOM_LABELS_DELIMITER, P as PlusIcon, v as v4, a as createWidgetEvent, f as createResultEventByType, d as createAddToBasketEvent, e as createAddToWishlistEvent, h as createProductEventByType, z as getRecommendationsBody } from './index-CWTRysN5.js';
+import { b as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH, P as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-C9a8Lgt6.js';
+import { s as slotChangeListener, a as addEventListenersWithSignal, i as isElementInSelector, S as SlotSkeleton } from './index-DRuRp4Bj.js';
+import { o as energyLabelParts, i as initializeLocale, j as extendedFiltersParts, h as filtersParts, q as imageParts, e as contentCardParts, l as listCardParts, p as productCardParts, t as priceRangeParts } from './index-D9AV63U9.js';
+import { r as register, c as configureSwiperElement, s as setupIntersectionObserver } from './swiper-element-CNZyvcZk.js';
+import { o as openProductLink } from './openProductLink-VT0ItZ7J.js';
 
 const BasketIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("g", { id: "shopping-bag" },
@@ -1398,6 +1398,13 @@ function getLastUrlPath(url) {
 }
 
 const HOVER_DELAY_MS = 65;
+/**
+ * Brand and non-empty custom labels as host attributes, so a stylesheet loaded
+ * through css-url can select cards by product data, e.g. [data-custom-label-1="Bestseller"]
+ */
+const getProductDataAttributes = (brand, customLabels) => (Object.assign(Object.assign({}, addIfNotEmpty("data-brand", brand)), Object.fromEntries(customLabels
+    .map((label, index) => [`data-custom-label-${index}`, label])
+    .filter(([, label]) => label))));
 const shouldShowMultipleImages = (showMultipleImages, imagesLength) => showMultipleImages && imagesLength >= 2;
 const isFirstImageMatchingMain = (mainImage, images) => {
     var _a;
@@ -1802,8 +1809,10 @@ const VviinnProductCard = class {
     }
     render() {
         var _a, _b, _c;
+        const customLabels = this.customLabels.split(CUSTOM_LABELS_DELIMITER);
+        const productDataAttributes = getProductDataAttributes(this.brand, customLabels);
         if (this.isContentCard || this.isListCard) {
-            return (h(Host, { part: `product-card ${this.entityType}-card`, class: `${this.entityType}-card`, exportparts: this.isContentCard ? contentCardParts : listCardParts, "data-id": this.productId }, renderExternalCSS(this.cssUrl), h("div", { class: `image-container ${this.entityType}-card-image-container`, part: "image-container" }, renderProductCardImage({
+            return (h(Host, Object.assign({ part: `product-card ${this.entityType}-card`, class: `${this.entityType}-card`, exportparts: this.isContentCard ? contentCardParts : listCardParts, "data-id": this.productId }, productDataAttributes), renderExternalCSS(this.cssUrl), h("div", { class: `image-container ${this.entityType}-card-image-container`, part: "image-container" }, renderProductCardImage({
                 src: this.imageProps.src,
                 width: this.imageProps.width,
                 title: this.imageProps.title,
@@ -1823,11 +1832,11 @@ const VviinnProductCard = class {
                 ? ContentCardContent(this.productTitle, this.deeplink, instance.t("contentLabel"))
                 : ListCardContent(this.productTitle, instance.t("listLabel")), this.isListCard && this.deeplink && (h("a", { href: this.deeplink, class: "list-card-overlay-link", "aria-label": this.productTitle }))));
         }
-        return (h(Host, { part: "product-card", class: {
+        return (h(Host, Object.assign({ part: "product-card", class: {
                 animated: this.isTransitioning,
                 "product-card--source": this.isSourceProduct,
                 "set-mode": this.isSetMode,
-            }, exportparts: productCardParts, "data-id": this.productId }, renderExternalCSS(this.cssUrl), h("div", { class: "content-container", part: "content-container" }, this.showSkeleton() ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }), h("vviinn-skeleton", { height: 40 }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink", tabindex: 0 }, 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, certificationClass: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.certificationClass, classRange: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classRange }))), h(Price, { prefix: this.pricePrefix, currency: this.effectiveCurrencySign, numberLocale: this.effectiveNumberLocale, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), showInContainer: this.addPriceContainer }), renderCustomLabels(this.customLabels.split(CUSTOM_LABELS_DELIMITER), "content")))), h("div", { class: {
+            }, exportparts: productCardParts, "data-id": this.productId }, productDataAttributes), renderExternalCSS(this.cssUrl), h("div", { class: "content-container", part: "content-container" }, this.showSkeleton() ? (h(Fragment, null, h("vviinn-skeleton", { height: 40 }), h("vviinn-skeleton", { height: 20, halfWidth: true }), h("vviinn-skeleton", { height: 40 }))) : (h(Fragment, null, h(Linked, { deeplink: this.deeplink, part: "deeplink", tabindex: 0 }, 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, certificationClass: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.certificationClass, classRange: energyCertification === null || energyCertification === void 0 ? void 0 : energyCertification.classRange }))), h(Price, { prefix: this.pricePrefix, currency: this.effectiveCurrencySign, numberLocale: this.effectiveNumberLocale, price: this.price, basePrice: parseBasePrice(this.basePrice), salePrice: this.salePrice, baseSalePrice: parseBasePrice(this.baseSalePrice), showInContainer: this.addPriceContainer }), renderCustomLabels(customLabels, "content")))), h("div", { class: {
                 "basket-button-container": true,
                 hidden: !this.isShowBasketButton() || this.showSkeleton(),
             }, part: "basket-button-container" }, h("button", { class: {
@@ -1875,7 +1884,7 @@ const VviinnProductCard = class {
                     animationInterval: generateRandomNumber(800, 1400),
                     productData: this.productData,
                 });
-            }, "aria-label": instance.t("a11y.findSimilarProducts") }, h("div", null, h("slot", { name: "vviinn-update-button-icon" }, h(UpdateIcon, { width: 14, height: 14 }))))), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" })), renderCustomLabels(this.customLabels.split(CUSTOM_LABELS_DELIMITER), "image")), this.showFooterArrow && h("div", { class: "footer-arrow" })));
+            }, "aria-label": instance.t("a11y.findSimilarProducts") }, h("div", null, h("slot", { name: "vviinn-update-button-icon" }, h(UpdateIcon, { width: 14, height: 14 }))))), h("div", { class: "product-card-actions", part: "product-card-actions" }, h("slot", { name: "vviinn-product-card-actions" })), renderCustomLabels(customLabels, "image")), this.showFooterArrow && h("div", { class: "footer-arrow" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/vviinn-detected-object_2.entry.js

@@ -1,13 +1,13 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DHLFo5Q5.js';
-import { _ as _functionExports, O as OptionExports, s as scaleWithSized, c as center, d as detectedObjectEq } from './Rectangle-B-guJ12O.js';
-import { i as instance } from './store-BtLMHZyk.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-FhFmxhnG.js';
+import { _ as _functionExports, O as OptionExports, s as scaleWithSized, c as center, d as detectedObjectEq } from './Rectangle-DYZUk1F3.js';
+import { i as instance } from './store-CFvXi0uP.js';
 
 const vviinnDetectedObjectCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--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-display:40px;--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:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{--button-size:36px;display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}.detected-object-button{background:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;position:absolute;left:calc(-1 * var(--button-size) / 2);top:calc(-1 * var(--button-size) / 2);width:var(--button-size);height:var(--button-size);border-radius:50%;cursor:pointer;z-index:3}:host::before,:host::after{content:\"\";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2);will-change:transform;transform:translateZ(0)}:host::before{--size:var(--button-size);border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}";
 

package/dist/esm/vviinn-shop-the-look.entry.js

@@ -1,20 +1,20 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-DHLFo5Q5.js';
-import { a as divideOnSized, E as EitherExports } from './Rectangle-B-guJ12O.js';
-import { C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal } from './cropperUtils-sMYHiiXk.js';
-import { g as getSwiperStyles, c as configureSwiperElement, r as register, e as extractSlideIndex, s as setupIntersectionObserver } from './swiper-element-CC2LQV6l.js';
-import { i as isDesktop$1, s as shopTheLookState, m as makeVisualSearchRequest, a as makeVisualSearchByUrlRequest, b as imageFromFileTask, c as makeUploadFileRequest, g as getAcceptableFileFormats } from './search.store-BHk80_jt.js';
-import { S as SecondaryActionIcon } from './SecondaryActionIcon-Cdh95mYN.js';
-import { i as initializeLocale, a as shopTheLookParts } from './index-DTRZmXVv.js';
-import { d as defaultConfig } from './store-BtLMHZyk.js';
-import { P as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-D2cDTfTS.js';
-import { o as openProductLink } from './openProductLink-DodmldXL.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-FhFmxhnG.js';
+import { a as divideOnSized, E as EitherExports } from './Rectangle-DYZUk1F3.js';
+import { C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal } from './cropperUtils-CexZ_yfb.js';
+import { g as getSwiperStyles, c as configureSwiperElement, r as register, e as extractSlideIndex, s as setupIntersectionObserver } from './swiper-element-CNZyvcZk.js';
+import { i as isDesktop$1, s as shopTheLookState, m as makeVisualSearchRequest, a as makeVisualSearchByUrlRequest, b as imageFromFileTask, c as makeUploadFileRequest, g as getAcceptableFileFormats } from './search.store-BkVbtzWE.js';
+import { S as SecondaryActionIcon } from './SecondaryActionIcon-C7llW1vz.js';
+import { i as initializeLocale, a as shopTheLookParts } from './index-D9AV63U9.js';
+import { d as defaultConfig } from './store-CFvXi0uP.js';
+import { P as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-C9a8Lgt6.js';
+import { o as openProductLink } from './openProductLink-VT0ItZ7J.js';
 
 const UploadActionIconVariant = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
     h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H13C13.2833 3 13.5208 3.09583 13.7125 3.2875C13.9042 3.47917 14 3.71667 14 4C14 4.28333 13.9042 4.52083 13.7125 4.7125C13.5208 4.90417 13.2833 5 13 5H5V19H19V11C19 10.7167 19.0958 10.4792 19.2875 10.2875C19.4792 10.0958 19.7167 10 20 10C20.2833 10 20.5208 10.0958 20.7125 10.2875C20.9042 10.4792 21 10.7167 21 11V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM17 7H16C15.7167 7 15.4792 6.90417 15.2875 6.7125C15.0958 6.52083 15 6.28333 15 6C15 5.71667 15.0958 5.47917 15.2875 5.2875C15.4792 5.09583 15.7167 5 16 5H17V4C17 3.71667 17.0958 3.47917 17.2875 3.2875C17.4792 3.09583 17.7167 3 18 3C18.2833 3 18.5208 3.09583 18.7125 3.2875C18.9042 3.47917 19 3.71667 19 4V5H20C20.2833 5 20.5208 5.09583 20.7125 5.2875C20.9042 5.47917 21 5.71667 21 6C21 6.28333 20.9042 6.52083 20.7125 6.7125C20.5208 6.90417 20.2833 7 20 7H19V8C19 8.28333 18.9042 8.52083 18.7125 8.7125C18.5208 8.90417 18.2833 9 18 9C17.7167 9 17.4792 8.90417 17.2875 8.7125C17.0958 8.52083 17 8.28333 17 8V7ZM11.25 16L9.4 13.525C9.3 13.3917 9.16667 13.325 9 13.325C8.83333 13.325 8.7 13.3917 8.6 13.525L6.6 16.2C6.46667 16.3667 6.45 16.5417 6.55 16.725C6.65 16.9083 6.8 17 7 17H17C17.2 17 17.35 16.9083 17.45 16.725C17.55 16.5417 17.5333 16.3667 17.4 16.2L14.65 12.525C14.55 12.3917 14.4167 12.325 14.25 12.325C14.0833 12.325 13.95 12.3917 13.85 12.525L11.25 16Z", fill: "white" })));

package/dist/esm/vviinn-text-search.entry.js

@@ -1,17 +1,17 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-DHLFo5Q5.js';
-import { _ as _functionExports, f as fold } from './Rectangle-B-guJ12O.js';
-import { d as setTextSearchQuery, e as makeAutoSuggestRequest, v as version, f as campaignTypeNames, h as addIfNotEmpty, j as makeTextSearchRequest, u as useSearchStore } from './search.store-BHk80_jt.js';
-import { s as slotChangeListener, f as findSlotElements } from './index-DW1q_PTq.js';
-import { i as instance, d as defaultConfig } from './store-BtLMHZyk.js';
-import { i as initializeLocale, b as searchBarParts, s as searchModalFirstScreenParts } from './index-DTRZmXVv.js';
-import { i as isOnResultsPage, b as buildTextSearchRedirectUrl, p as parseResultsPageParamNames } from './resultsPageUrl-BdVH6RtP.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-FhFmxhnG.js';
+import { _ as _functionExports, f as fold } from './Rectangle-DYZUk1F3.js';
+import { d as setTextSearchQuery, e as makeAutoSuggestRequest, v as version, f as campaignTypeNames, h as addIfNotEmpty, j as makeTextSearchRequest, u as useSearchStore } from './search.store-BkVbtzWE.js';
+import { s as slotChangeListener, f as findSlotElements } from './index-DRuRp4Bj.js';
+import { i as instance, d as defaultConfig } from './store-CFvXi0uP.js';
+import { i as initializeLocale, b as searchBarParts, s as searchModalFirstScreenParts } from './index-D9AV63U9.js';
+import { i as isOnResultsPage, b as buildTextSearchRedirectUrl, p as parseResultsPageParamNames } from './resultsPageUrl-Cc4vYYIH.js';
 
 const TextSearchIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("path", { d: "M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z", fill: "#525252" }),

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

@@ -1,16 +1,16 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-DHLFo5Q5.js';
-import { f as findSlotElements, h as hasDefaultSlotContent, S as SlotSkeleton } from './index-DW1q_PTq.js';
-import { D as DEFAULT_EXAMPLE_IMAGE } from './exampleImage-DR9_lICd.js';
-import { S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-D2cDTfTS.js';
-import { i as initializeLocale, s as searchModalFirstScreenParts } from './index-DTRZmXVv.js';
-import { i as instance } from './store-BtLMHZyk.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-FhFmxhnG.js';
+import { f as findSlotElements, h as hasDefaultSlotContent, S as SlotSkeleton } from './index-DRuRp4Bj.js';
+import { D as DEFAULT_EXAMPLE_IMAGE } from './exampleImage-OaNWTAPi.js';
+import { S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH, r as renderExternalCSS } from './cssUrlHelper-C9a8Lgt6.js';
+import { i as initializeLocale, s as searchModalFirstScreenParts } from './index-D9AV63U9.js';
+import { i as instance } from './store-CFvXi0uP.js';
 
 const SearchModalCameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" },
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18 4H20C22.21 4 24 5.79 24 8V16H22V8C22 6.9 21.1 6 20 6H16.93L16.34 5.11L14.93 3H9.07L7.66 5.11L7.07 6H4C2.9 6 2 6.9 2 8V18C2 19.1 2.9 20 4 20H9V22H4C1.79 22 0 20.21 0 18V8C0 5.79 1.79 4 4 4H6L8 1H16L18 4ZM12 8C14.76 8 17 10.24 17 13L16.99 13.01C16.99 14.02 16.68 14.97 16.16 15.76L20.7 20.3L19.29 21.71L14.75 17.17C13.96 17.69 13.02 18 12 18C9.24 18 7 15.76 7 13C7 10.24 9.24 8 12 8ZM9 13C9 14.65 10.35 16 12 16C13.65 16 15 14.65 15 13C15 11.35 13.65 10 12 10C10.35 10 9 11.35 9 13Z", fill: "#161616" })));

package/dist/esm/vviinn-widgets.js

@@ -1,13 +1,13 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
-import { p as promiseResolve, b as bootstrapLazy } from './index-DHLFo5Q5.js';
-export { s as setNonce } from './index-DHLFo5Q5.js';
-import { g as globalScripts } from './app-globals-C-wS8Gww.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-FhFmxhnG.js';
+export { s as setNonce } from './index-FhFmxhnG.js';
+import { g as globalScripts } from './app-globals-K2sPgzSL.js';
 
 /*
  Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com

package/dist/loader/cdn.js

@@ -1,8 +1,8 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
 module.exports = require('../cjs/loader.cjs.js');

package/dist/loader/index.cjs.js

@@ -1,8 +1,8 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
 module.exports = require('../cjs/loader.cjs.js');

package/dist/loader/index.es2017.js

@@ -1,8 +1,8 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,9 +1,9 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/loader.js';

package/dist/storybook/helpers/sharedArgTypes.js

@@ -1,9 +1,9 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */
 export const productCardImageAspectRatioArg = {
     name: "--product-card-image-aspect-ratio",

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

@@ -1,5 +1,10 @@
 import { ProductImage } from "../../interfaces";
 export declare const HOVER_DELAY_MS = 65;
+/**
+ * Brand and non-empty custom labels as host attributes, so a stylesheet loaded
+ * through css-url can select cards by product data, e.g. [data-custom-label-1="Bestseller"]
+ */
+export declare const getProductDataAttributes: (brand: string | undefined, customLabels: string[]) => Record<string, string>;
 export declare const shouldShowMultipleImages: (showMultipleImages: boolean, imagesLength: number) => boolean;
 /**
  * Get the image URL to display based on hover state

package/dist/vviinn-widgets/index.esm.js

@@ -1,7 +1,7 @@
 /*!
- * vviinn-widgets v2.226.2
+ * vviinn-widgets v2.227.0
  * Copyright 2020 Mediaopt
  * SPDX-License-Identifier: Apache-2.0
- * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/LICENSE
- * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.226.2/NOTICE
+ * License: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/LICENSE
+ * Notice: https://cdn.jsdelivr.net/npm/vviinn-widgets@2.227.0/NOTICE
  */