vviinn-widgets 2.221.0 → 2.223.0

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

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-BU8FMTXn.js');
-var search_store = require('./search.store-C-fS-eJR.js');
+var search_store = require('./search.store-Bh2_GSpU.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var store = require('./store-jPZ4ROqV.js');
-var index$1 = require('./index-sL3iGA57.js');
+var index$1 = require('./index-DZw3p4dq.js');
 var constants = require('./constants-BlwqMvns.js');
 var index$2 = require('./index-CP1QUrJT.js');
 var index$3 = require('./index-BF9aENF8.js');
@@ -656,57 +656,6 @@ const filterOptionsBySearch = (filterOptions, searchTerm) => {
 
 const vviinnFiltersCss$2 = ":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;font-family:var(--font-family, var(--font-family-base));font-style:normal;display:contents;}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list,.selected-filters-wrapper{list-style:none;margin:0;padding:0}.main-filters-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-range-filter{width:100%;max-width:500px;padding-bottom:var(--spacing-150)}.filters-search-input-container{position:relative;box-sizing:border-box;width:100%;display:flex;align-items:center}.filters-search-icon{position:absolute;left:var(--spacing-100);color:var(--color-icon-helper);z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}.filters-search-input{width:100%;padding:var(--spacing-100) var(--spacing-100) var(--spacing-100)\n    var(--spacing-500);border:none;background:var(--color-bg-base);font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);color:var(--color-text-primary);box-sizing:border-box;outline:none}.filters-search-input::-moz-placeholder{color:var(--color-text-placeholder)}.filters-search-input::placeholder{color:var(--color-text-placeholder)}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));cursor:pointer;border:none}.filters-sub-button,.filters-main-button{font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);display:flex;justify-content:center;align-items:center;border-radius:6px}.filters-main-button{padding:var(--spacing-100);color:var(--color-text-secondary);background:none;transition:background 0.15s,\n    color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{align-items:center;gap:var(--spacing-100);flex-wrap:wrap}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.filters-sub-button>span,.filters-sub-button-selected>span{display:inline-flex;justify-content:center;align-items:center;gap:var(--spacing-25);white-space:nowrap}.filters-sub-button>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.filters-sub-button:disabled{cursor:not-allowed;background:var(--surface-bg-color-disabled);color:var(--color-text-disabled)}.filters-more-button{display:flex;padding:var(--spacing-100);gap:var(--spacing-50);border-radius:var(--border-radius-100);align-items:flex-start;background-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n    var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--color-text-primary);text-align:center;border-bottom:1px solid var(--color-border-01)}.filters-modal-header.show-header-content{min-height:64px}.filters-modal-title{margin:0;padding:0;font-size:var(--font-size-headline);font-weight:var(--font-weight-500);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline)}.filters-modal-no-filters-message{font-size:var(--font-size-caption);color:var(--color-text-secondary);font-weight:var(--font-weight-500);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);text-align:center;padding:var(--spacing-300) var(--spacing-200);display:flex;align-items:center;justify-content:center}.filters-modal-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal:not(.preview-inline) .filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{position:relative;width:100%;background:none;text-align:left;padding:var(--spacing-200) 0;color:var(--color-text-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-main-button>svg{position:absolute;right:0;top:var(--spacing-200);color:var(--color-icon-helper);transform:rotate(90deg)}.filters-modal-main-button:hover>svg{color:var(--color-icon-primary);transition:color 0.2s}.filters-modal-main-button-wrapper.open .filters-modal-main-button>svg{transform:rotate(-90deg);color:var(--color-icon-primary)}.filters-modal-sub-list{display:none}.filters-modal-main-button-wrapper.open .filters-modal-sub-list{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display:none}.filters-more-modal-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;height:36px;padding:var(--spacing-75);gap:var(--spacing-50);border-radius:var(--border-radius-100);background-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button.custom:not(.clickable){cursor:default}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.filters-more-modal-button.active{background:var(--surface-bg-color-inverse);color:var(--color-text-inverse)}.filters-more-modal-button.active .filters-option-icon-wrapper{border-color:var(--color-bg-base);background-color:var(--color-bg-base);color:var(--color-icon-primary)}.filters-more-modal-button>span{white-space:nowrap;padding:var(--spacing-25)}.filters-more-modal-button:disabled{cursor:not-allowed;opacity:0.5}.filters-more-modal-button img{box-sizing:border-box;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;border-radius:var(--border-radius-full);border:1px solid var(--color-border-01)}.filters-modal-actions{border-top:1px solid var(--color-border-01);padding:var(--spacing-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;display:flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-50);align-self:stretch;color:var(--color-text-inverse);text-align:center;border-radius:var(--border-radius-150);background:var(--button-bg-color-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-apply:disabled{background:var(--button-bg-color-disabled);color:var(--color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;padding:var(--spacing-125) 0;color:var(--color-text-secondary);text-align:center;font-size:var(--font-size-label);font-weight:var(--font-weight-500);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.selected-filters-wrapper>li.hidden{display:none}.filters-sub-button-selected{display:flex;align-items:center;gap:var(--spacing-25);background:var(--surface-bg-color-inverse);border-radius:var(--border-radius-100);color:var(--color-text-inverse);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);padding:var(--spacing-100)}.filters-sub-button-color-dot{box-sizing:border-box;width:24px;height:24px;border-radius:var(--border-radius-full);border:var(--stroke-width-50) solid var(--color-border-01)}.selected-filters-wrapper .filters-sub-button-selected{width:24px;height:24px;border:none}.filters-option-icon-wrapper{display:flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:4px;border:2px solid #e0e0e0;background:#fff;width:20px;height:20px}.filters-modal-main-button-added-options{color:var(--color-text-secondary);text-overflow:ellipsis;padding-right:var(--spacing-100);font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-modal-main-button-added-options>span::after{content:\", \"}.filters-modal-main-button-added-options>span:last-child::after{content:\"\"}.filters-modal.preview-inline,.filters-modal.preview-inline .filters-modal-wrapper,.filters-modal.preview-inline .filters-modal-main{overflow:visible}.filters-modal.preview-inline .filters-modal-header,.filters-modal.preview-inline .filters-modal-actions{display:none}.filters-modal.preview-inline .filters-modal-list{margin:0;flex-direction:row;gap:var(--spacing-100);display:flex;flex-wrap:wrap}.filters-modal.preview-inline .extended-filters-row{box-sizing:border-box;padding-right:0;border-radius:var(--border-radius-100);background:var(--surface-bg-color-01)}.filters-modal.preview-inline .filters-modal-main-button{width:100%;display:flex;align-items:center;padding:var(--spacing-75);gap:var(--spacing-25);justify-content:space-between;font-size:var(--font-size-body);font-weight:var(--font-weight-400)}.filters-modal.preview-inline .filters-modal-main-button>svg{position:static}.filters-modal.preview-inline .extended-filters-row{position:relative}.filters-modal.preview-inline .filters-search-container{max-height:225px;width:-moz-max-content;width:max-content;min-width:140px;height:-moz-fit-content;height:fit-content;overflow:hidden;position:absolute;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:0;top:calc(100% + var(--spacing-75));left:0;right:0;z-index:1000;border-radius:var(--border-radius-150);border:1px solid var(--color-border-01);background-color:var(--color-bg-base);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1);box-sizing:border-box}.filters-modal.preview-inline .filters-search-input-container{position:sticky;top:0;background-color:var(--color-bg-base);padding:var(--spacing-50);border-bottom:1px solid var(--color-border-01);z-index:1}.filters-modal.preview-inline .filters-modal-sub-list{position:static;border:none;background:none;box-shadow:none;padding:var(--spacing-50);margin:0;max-height:165px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:8px;overflow-y:auto;scrollbar-width:thin}.filters-modal.preview-inline .align-right .filters-search-container{left:auto;right:0}.filters-modal.preview-inline .filters-more-modal-button{width:100%;gap:var(--spacing-150);background-color:var(--color-bg-base)}.filters-modal.preview-inline .filters-option-icon-wrapper{margin-left:auto}.filters-modal.preview-inline .filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.filters-modal.preview-inline .filters-more-modal-button.active{color:var(--color-text-primary)}.filters-modal.preview-inline .filters-more-modal-button.active .filters-option-icon-wrapper{border-color:var(--color-bg-inverse);background-color:var(--color-bg-inverse);color:var(--color-icon-inverse)}.filters-modal.preview-inline .filters-modal-sub-list:has(vviinn-range-filter){padding:0 var(--spacing-75);width:220px;max-height:unset}.filters-modal.preview-inline vviinn-range-filter{width:100%}@media (max-width: 768px){.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;scrollbar-width:none;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}:host(.show-in-widget) .selected-filters-container{overflow-x:auto;width:100%}:host(.show-in-widget) .selected-filters-wrapper{padding:0 var(--spacing-300)}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}vviinn-range-filter{max-width:unset}:host(.show-in-widget.primary-filters) vviinn-range-filter{max-width:calc(100% - 48px);transform:translateX(24px)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
 
-/**
- * @slot vviinn-extended-filters-title - Text on widget's header.
- * @slot vviinn-extended-filters-apply - Title of Apply Button.
- * @slot vviinn-extended-filters-reset - Title of Reset Button.
- * @slot vviinn-extended-filters-no-filters - Message shown when no filters are available.
- * @slot vviinn-filters-search-icon - Custom icon for the search input.
- * @slot vviinn-range-filter-from-label - Label text for the "From" input field in range filters.
- * @slot vviinn-range-filter-to-label - Label text for the "To" input field in range filters.
- *
- * @part extended-filters-modal - Modal itself.
- * @part extended-filters-modal-wrapper - Wrapper for the modal.
- * @part extended-filters-header - Header of the modal.
- * @part extended-filters-title - Title heading (h2) of the modal.
- * @part extended-filters-modal-close - Close button of the modal.
- * @part extended-filters-no-filters - No filters message container.
- * @part extended-filters-main - Wrapper for the main modal content.
- * @part extended-filters-list - List of filters.
- * @part extended-filters-row - Row of the filters.
- * @part extended-filters-row-wrapper - Wrapper for the row.
- * @part extended-filters-main-button - Main button of the row.
- * @part extended-filters-selected-wrapper - Wrapper for the selected options.
- * @part extended-filters-sub-list - List of sub filters.
- * @part extended-filters-actions - Wrapper for the actions.
- * @part extended-filters-apply - Apply button.
- * @part extended-filters-reset - Reset button.
- *
- * @part filters-search-container - Container wrapping search input and filter list.
- * @part filters-search-input-container - Container for the search input with icon.
- * @part filters-search-icon - Icon wrapper for the search input.
- * @part filters-search-input - Search input field.
- *
- * @part filters-sub-row - Row of the sub filters.
- * @part filters-option-button - Button of the sub filter.
- * @part filters-option-image - Image of the sub filter.
- * @part filters-option-color-dot - Color Dot of the sub filter.
- * @part filters-option-text - Text of the sub filter.
- * @part filters-option-icon-wrapper - Icon Wrapper of the sub filter.
- *
- * @part histogram - Wrapper itself.
- * @part histogram-bar - Bar of the histogram.
- * @part histogram-range-container - Container for the range sliders.
- * @part histogram-sliders-control - Container for the range sliders control.
- * @part histogram-from-slider - Slider for the minimum value.
- * @part histogram-to-slider - Slider for the maximum value.
- * @part histogram-label-wrapper - Wrapper for the labels/inputs.
- * @part histogram-label - Label for the histogram (when showIntervalInputs is false).
- * @part histogram-input-container - Container for the input field (when showIntervalInputs is true).
- * @part histogram-input-label - Label text for the input (From/Till).
- * @part histogram-from-input - Input field for the minimum value.
- * @part histogram-to-input - Input field for the maximum value.
- */
 const FILTER_OPTIONS_INITIAL_COUNT = 8;
 const FILTER_OPTIONS_STEP_COUNT = 5;
 const VviinnExtendedFilters = class {

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

@@ -4,7 +4,7 @@ var index = require('./index-BU8FMTXn.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var cropperUtils = require('./cropperUtils-DCDOLeBS.js');
 var swiperElement = require('./swiper-element-DjtzojCR.js');
-var search_store = require('./search.store-C-fS-eJR.js');
+var search_store = require('./search.store-Bh2_GSpU.js');
 var SecondaryActionIcon = require('./SecondaryActionIcon-CuNEBTWD.js');
 var index$1 = require('./index-BF9aENF8.js');
 var store = require('./store-jPZ4ROqV.js');

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BU8FMTXn.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
-var search_store = require('./search.store-C-fS-eJR.js');
+var search_store = require('./search.store-Bh2_GSpU.js');
 var index$2 = require('./index-CP1QUrJT.js');
 var store = require('./store-jPZ4ROqV.js');
 var index$1 = require('./index-BF9aENF8.js');

package/dist/collection/components/vviinn-cropper/helpers/cropperOcrGate.js

@@ -0,0 +1,36 @@
+import { hasSelectedOcrFilter } from "./hasSelectedOcrFilter";
+/**
+ * Decides whether the cropper must be hidden because an OCR filter is active.
+ * Once the user adjusts the crop box the cropper stays regardless of OCR.
+ * Engagement resets whenever a different image is loaded.
+ */
+export class CropperOcrGate {
+    constructor() {
+        this.engaged = false;
+        this.lastImage = null;
+        this.awaitingFilters = false;
+    }
+    /** Re-arm OCR gating for a freshly loaded image. */
+    onImage(image) {
+        if (image === this.lastImage)
+            return;
+        this.lastImage = image;
+        this.engaged = false;
+        this.awaitingFilters = true;
+    }
+    /** Fresh dynamicFilters for the current image have arrived. */
+    onFreshFilters() {
+        this.awaitingFilters = false;
+    }
+    /** Mark that the user started working with the cropper. */
+    onUserAdjust() {
+        this.engaged = true;
+    }
+    /** True when the cropper should be hidden. */
+    isGated(dynamicFilters, isSearchLoading = false) {
+        // Defer while the image's search is still resolving, to avoid a flash.
+        if (this.awaitingFilters && isSearchLoading)
+            return true;
+        return !this.engaged && hasSelectedOcrFilter(dynamicFilters);
+    }
+}

package/dist/collection/components/vviinn-cropper/helpers/hasSelectedOcrFilter.js

@@ -0,0 +1,4 @@
+import { extractSelectedFilters } from "../../vviinn-filters/helpers";
+const MODALITY_COLUMN = "modality";
+const OCR_VALUE = "OCR";
+export const hasSelectedOcrFilter = (dynamicFilters) => extractSelectedFilters(dynamicFilters !== null && dynamicFilters !== void 0 ? dynamicFilters : []).some((filter) => filter.column === MODALITY_COLUMN && filter.values.includes(OCR_VALUE));

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

@@ -12,6 +12,7 @@ import { makeVisualSearchRequest, useSearchStore, } from "../../store/search.sto
 import { getImageSizes } from "../../Image/sizing";
 import { isCropBoxChangeMinimal } from "./helpers/isCropBoxDataSimilar";
 import { getCropBoxData } from "./helpers/cropperUtils";
+import { CropperOcrGate } from "./helpers/cropperOcrGate";
 import { cleanLocalStorage, getLocalStorageItems } from "../../localStorage";
 import { addEventListenersWithSignal } from "../../dom";
 import { renderExternalCSS } from "../../utils/cssUrl/cssUrlHelper";
@@ -30,6 +31,45 @@ export class VviinnCropper {
         this.showInWidget = false;
         this.cropper = null;
         this.selectedDetectedObject = null;
+        this.imageElement = null;
+        this.gate = new CropperOcrGate();
+        this.destroyCropper = () => {
+            var _a;
+            (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.cropper = null;
+        };
+        this.clearCropSelection = () => {
+            this.state.searchArea = null;
+            this.state.croppedImageUrl = null;
+            this.selectedDetectedObject = null;
+        };
+        /** Tear down the cropper and drop any applied crop. */
+        this.discardCrop = () => {
+            this.destroyCropper();
+            this.clearCropSelection();
+        };
+        this.resetCropperState = () => {
+            this.discardCrop();
+            this.state.image = null;
+        };
+        /** Show or hide the cropper to match the current OCR gate decision. */
+        this.reconcileCropper = () => {
+            // Trust the fresh filters even before the image DOM is ready.
+            this.gate.onFreshFilters();
+            if (!this.state.image || !this.imageElement || !this.state.imageBounds)
+                return;
+            if (this.gate.isGated(this.state.dynamicFilters)) {
+                // Drop only the frame, keep the region/object so OCR searches within it.
+                this.destroyCropper();
+                return;
+            }
+            // Guard geometry here so initCropper doesn't re-emit the aspect-ratio error on every filter change.
+            if (!this.cropper &&
+                this.hasSupportedAspectRatio() &&
+                this.hasSupportedSize()) {
+                this.initCropper(this.imageElement);
+            }
+        };
         this.initPreloadedImage = () => {
             var _a;
             if (this.showInWidget && this.state.image) {
@@ -53,14 +93,12 @@ export class VviinnCropper {
                 cleanLocalStorage();
         };
         this.resetStateHandler = ({ detail, }) => {
-            var _a, _b;
+            var _a;
             if (this.skipStateChanges(detail.isTriggeredByVpsWidget))
                 return;
-            this.selectedDetectedObject = null;
             (_a = this.state.image) === null || _a === void 0 ? void 0 : _a.setAttribute("src", "");
             this.state.detectedObjects = [];
-            this.state.image = null;
-            (_b = this.cropper) === null || _b === void 0 ? void 0 : _b.destroy();
+            this.resetCropperState();
             cleanLocalStorage();
         };
         this.resetCropAreaHandler = ({ detail, }) => {
@@ -68,9 +106,7 @@ export class VviinnCropper {
             if (this.skipStateChanges(detail.isTriggeredByVpsWidget))
                 return;
             (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.reset();
-            this.state.searchArea = null;
-            this.state.croppedImageUrl = null;
-            this.selectedDetectedObject = null;
+            this.clearCropSelection();
             this.vviinnImageCrop.emit({
                 isTriggeredByVpsWidget: this.showInWidget,
             });
@@ -98,32 +134,62 @@ export class VviinnCropper {
                 this.cropper.replace(this.state.image.src);
         };
         this.loadImage = () => {
-            const renderedImageElement = this.el.shadowRoot.querySelector("img");
-            if (this.state.image) {
-                let data = {};
-                if (this.cropper) {
-                    data = this.cropper.getData(true);
-                    this.cropper.destroy();
-                }
-                const imageBounds = fromImage(renderedImageElement);
-                const { width, height } = imageBounds;
-                this.vviinnCropperLoadImage.emit({
-                    imageBounds,
-                });
-                this.state.imageBounds = imageBounds;
-                if (width / height < SUPPORTED_ASPECT_RATIO ||
-                    height / width < SUPPORTED_ASPECT_RATIO) {
-                    this.vviinnCropperAspectRatioError.emit(true);
-                    return;
-                }
-                if (width < MIN_IMAGE_SIDE_FOR_CROPPER ||
-                    height < MIN_IMAGE_SIDE_FOR_CROPPER) {
-                    return;
-                }
-                this.cropper = new Cropper(renderedImageElement, Object.assign(Object.assign({}, cropperOptions), { cropstart: this.cropStart, cropend: this.cropEnd, ready: () => this.cropper.reset(), data }));
+            var _a;
+            if (!this.state.image)
+                return;
+            const renderedImageElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("img");
+            if (!renderedImageElement)
+                return;
+            this.imageElement = renderedImageElement;
+            this.gate.onImage(this.state.image);
+            let data = {};
+            if (this.cropper) {
+                data = this.cropper.getData(true);
+                this.destroyCropper();
+            }
+            const imageBounds = fromImage(renderedImageElement);
+            this.vviinnCropperLoadImage.emit({
+                imageBounds,
+            });
+            this.state.imageBounds = imageBounds;
+            const isSearchLoading = this.state.searchStatus === "loading";
+            if (this.gate.isGated(this.state.dynamicFilters, isSearchLoading)) {
+                this.discardCrop();
+                // Still surface aspect-ratio errors while hidden — geometry matters regardless.
+                this.checkAspectRatio();
+                return;
             }
+            this.initCropper(renderedImageElement, data);
+        };
+        this.hasSupportedAspectRatio = () => {
+            if (!this.state.imageBounds)
+                return false;
+            const { width, height } = this.state.imageBounds;
+            return (width / height >= SUPPORTED_ASPECT_RATIO &&
+                height / width >= SUPPORTED_ASPECT_RATIO);
+        };
+        this.hasSupportedSize = () => {
+            if (!this.state.imageBounds)
+                return false;
+            const { width, height } = this.state.imageBounds;
+            return (width >= MIN_IMAGE_SIDE_FOR_CROPPER &&
+                height >= MIN_IMAGE_SIDE_FOR_CROPPER);
+        };
+        this.checkAspectRatio = () => {
+            if (this.hasSupportedAspectRatio())
+                return true;
+            this.vviinnCropperAspectRatioError.emit(true);
+            return false;
+        };
+        this.initCropper = (imageElement, data = {}) => {
+            if (!imageElement)
+                return;
+            if (!this.checkAspectRatio() || !this.hasSupportedSize())
+                return;
+            this.cropper = new Cropper(imageElement, Object.assign(Object.assign({}, cropperOptions), { cropstart: this.cropStart, cropend: this.cropEnd, ready: () => { var _a; return (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.reset(); }, data }));
         };
         this.cropStart = () => {
+            this.gate.onUserAdjust();
             this.startEndCropBoxData = getCropBoxData(this.cropper);
         };
         this.cropEnd = () => {
@@ -149,9 +215,10 @@ export class VviinnCropper {
             !this.showAspectRatioError;
     }
     connectedCallback() {
-        const { state, storeName } = useSearchStore(this.showInWidget);
+        const { state, storeName, onChange } = useSearchStore(this.showInWidget);
         this.state = state;
         this.storeName = storeName;
+        this.disposeStoreListener = onChange("dynamicFilters", this.reconcileCropper);
         this.initPreloadedImage();
         this.eventAbortController = new AbortController();
         const { signal } = this.eventAbortController;
@@ -162,10 +229,13 @@ export class VviinnCropper {
         ], signal);
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.eventAbortController) === null || _a === void 0 ? void 0 : _a.abort();
-        (_c = (_b = this.cropper) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
-        this.state.image = null;
+        (_b = this.disposeStoreListener) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.destroyCropper();
+        // "never" keeps no image across mounts, so clear it from the shared store.
+        if (this.saveImageMode === "never")
+            this.state.image = null;
     }
     selectDetectedObject({ detail }) {
         this.selectedDetectedObject = detail.detectedObject;
@@ -198,14 +268,14 @@ export class VviinnCropper {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ae2656d0782e723ffe5c8ba9ad6074db55e219c0', class: {
+        return (h(Host, { key: 'b50ccb5595b27ef6673ff9d9350fc30359a6f7ce', class: {
                 "show-in-widget": this.showInWidget,
                 active: !!this.state.image,
-            } }, renderExternalCSS(this.cssUrl), h("div", { key: '0c547762649ddc68aa2755681c6637ec1556b315', class: "container" }, this.state.image && (h("div", { key: '811e79aaf4ee1144c8c6ce0017300ba9aeda8803', class: "image-container", style: {
+            } }, renderExternalCSS(this.cssUrl), h("div", { key: 'efd816ed4e19082091567714fee4ef40efe9a6c4', class: "container" }, this.state.image && (h("div", { key: '13f35758ba243eb73513e17375daca8431538383', class: "image-container", style: {
                 width: `${this.width.toString()}px`,
                 overflow: "hidden",
-            } }, h("img", { key: '458474fa006a1397daa335fb9ee50477ab0e62ce', decoding: "async", width: this.width, height: this.height, src: this.state.image.src, draggable: false, onLoad: this.loadImage, alt: i18next.t("a11y.cropperImage") }), (_a = this.state.detectedObjects) === null || _a === void 0 ? void 0 :
-            _a.map((object) => (h("vviinn-detected-object", { detectedObject: object, selectedDetectedObject: this.selectedDetectedObject, basicEventData: this.basicEventData, imageBounds: this.state.imageBounds, showInWidget: this.showInWidget }))))), this.showPreloader() && (h("div", { key: 'd002cf170858ae7e5a46ca0f36bc64a425990119', class: "image-preloader" }, h("vviinn-preloader", { key: '2867876e7f492364528636d4b77dc4c7f80bee71' }))))));
+            } }, h("img", { key: '7525aae0654325fb25c88106a9ee1fface11a62e', decoding: "async", width: this.width, height: this.height, src: this.state.image.src, draggable: false, onLoad: this.loadImage, alt: i18next.t("a11y.cropperImage") }), (_a = this.state.detectedObjects) === null || _a === void 0 ? void 0 :
+            _a.map((object) => (h("vviinn-detected-object", { detectedObject: object, selectedDetectedObject: this.selectedDetectedObject, basicEventData: this.basicEventData, imageBounds: this.state.imageBounds, showInWidget: this.showInWidget }))))), this.showPreloader() && (h("div", { key: 'b89ad46bda5279b77f4fe258f7a6d4af08f81c29', class: "image-preloader" }, h("vviinn-preloader", { key: '34f55578c05321480d7e3d8141a4638df8aad08b' }))))));
     }
     static get is() { return "vviinn-cropper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js

@@ -12,6 +12,8 @@ import { useSearchStore } from "../../store/search.store";
 import { defaultConfig } from "../../store/store";
 import { addEventListenersWithSignal, isElementInSelector } from "../../dom";
 import { extendedFiltersParts } from "../../cssParts";
+const FILTER_OPTIONS_INITIAL_COUNT = 8;
+const FILTER_OPTIONS_STEP_COUNT = 5;
 /**
  * @slot vviinn-extended-filters-title - Text on widget's header.
  * @slot vviinn-extended-filters-apply - Title of Apply Button.
@@ -63,8 +65,6 @@ import { extendedFiltersParts } from "../../cssParts";
  * @part histogram-from-input - Input field for the minimum value.
  * @part histogram-to-input - Input field for the maximum value.
  */
-const FILTER_OPTIONS_INITIAL_COUNT = 8;
-const FILTER_OPTIONS_STEP_COUNT = 5;
 export class VviinnExtendedFilters {
     constructor() {
         this.mode = "button";

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

@@ -32,6 +32,81 @@ import { addIfNotEmpty } from "../../utils/collections/collectionsUtils";
 import { RESULTS_CALCULATED_COLUMNS_CSS_VAR } from "../vviinn-carousel/constants";
 import { renderExternalCSS } from "../../utils/cssUrl/cssUrlHelper";
 import { openProductLink } from "../../helpers/navigation/openProductLink";
+/**
+ * @part products - Products container.
+ * @part product-card - Product Card itself.
+ * @part image-container - Product Card's image container.
+ * @part content-container - Product Card's content container.
+ * @part basket-button-container - Product Card's basket button container.
+ * @part brand - Brand inside Product Card.
+ * @part product-type - Product Type inside Product Card.
+ * @part currency - Currency related to price.
+ * @part deeplink - Anchor element around product 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 image-placeholder - Placeholder shown when no image is available.
+ * @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.
+ * @part price-amount-base-sale - Numeric part of the base price.
+ * @part price-amount-base-outdated - Numeric part of the base price.
+ * @part price-amount-base-regular - Numeric part of the base price.
+ * @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
+ * @part price-regular - Block for a price if no sale price is presented.
+ * @part price-sale - Block for sale price. Rendered only if the sale price is presented.
+ * @part price-prefix - Block rendered before each price element (for ex. "from").
+ * @part title - Title inside Product Card.
+ * @part basket-button - Add to Basket button.
+ * @part basket-button-container - Product Card's basket button container.
+ * @part favorite-button - Favorite button.
+ * @part product-card-actions - Product Card actions wrapper.
+ * @part product-card-actions-top - Product Card top actions wrapper.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
+ * @part product-images-pagination - Container for product images pagination dots (mobile only).
+ * @part product-images-pagination-bullet - Individual pagination dot.
+ * @part product-images-pagination-bullet-active - Active pagination dot.
+ *
+ * @part custom-label-0 - Custom label with index 0.
+ * @part custom-label-1 - Custom label with index 1.
+ * @part custom-label-2 - Custom label with index 2.
+ * @part custom-label-3 - Custom label with index 3.
+ * @part custom-label-4 - Custom label with index 4.
+ *
+ * @part list-card - List card container (for entity-type="list").
+ * @part list-card-content-container - List card's content container.
+ * @part list-label - List card's label (e.g., "Category").
+ * @part list-title - List card's title.
+ * @part list-card-image-container - List card's image container.
+ * @part list-card-image - List card's image element.
+ * @part list-card-image-picture - List card's image picture element.
+ *
+ * @part content-card - Content card container (for entity-type="content").
+ * @part content-card-content-container - Content card's content container.
+ * @part content-label - Content card's label.
+ * @part content-title - Content card's title.
+ * @part content-link - Content card's link.
+ * @part content-card-image - Content card's image element.
+ * @part content-card-image-container - Content card's image container.
+ * @part content-card-image-picture - Content card's image picture element.
+ *
+ * @slot vviinn-results-vpr-icon - One-Click Discovery icon.
+ * @slot vviinn-favorite-icon - Icon of Favorite button.
+ * @slot vviinn-favorite-icon-pressed - Icon of pressed Favorite button.
+ * @slot vviinn-basket-button-text - Text of Add to Basket button.
+ * @slot vviinn-basket-button-icon - Text of Add to Basket icon.
+ * @slot vviinn-basket-button-text-pressed - Text of pressed Add to Basket button.
+ * @slot vviinn-basket-button-icon-pressed - Icon of pressed Add to Basket button.
+ * @slot vviinn-custom-label-0 - Custom label with index 0.
+ * @slot vviinn-custom-label-1 - Custom label with index 1.
+ * @slot vviinn-custom-label-2 - Custom label with index 2.
+ * @slot vviinn-custom-label-3 - Custom label with index 3.
+ * @slot vviinn-custom-label-4 - Custom label with index 4.
+ * @slot vviinn-image-placeholder-icon - Icon or content for the image placeholder.
+ */
 export class VviinnResults {
     constructor() {
         /** Campaign ID used for Text Search */
@@ -432,13 +507,13 @@ export class VviinnResults {
     render() {
         var _a;
         const resultsLength = this.getResults().length;
-        return (h(Host, { key: '0767d0c21dee72b9a0f09a80dfe2ca7c375e4d50', id: "results-block", class: {
+        return (h(Host, { key: 'd62957bb1294f3a62e14fa9a3eb97c7ef6007eae', 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: 'bfd01f2bf39be84501ce0cf42f5672acda3e500b', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'ce077ad92253c7727a509567571d821ebda6dbd4', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'dc63984664328f04abe6011aa0db856cb862f37c', class: {
+            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: '69f7a38dc02f42c357dbae8cf154ecb78380f270', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'd78ed9f6d777d7ec1686b10b709deee018c4391e', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'be3db62dcfd508b6f60036454d3c825d6c27f5ae', class: {
                 hidden: this.showAspectRatioError || resultsLength === 0,
                 products: true,
-            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '2e39c5d65c5c7981c0b9a93dfe97ad62165a25b4', id: "one-click-discovery-append", style: {
+            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '88d3d2d5880806b9e24799694cc540de676d17f8', id: "one-click-discovery-append", style: {
                 order: ((_a = this.oneClickDiscoveryAppendIndex) !== null && _a !== void 0 ? _a : resultsLength).toString(),
             } }))));
     }

package/dist/collection/components/vviinn-suggestions/helpers.js

@@ -8,12 +8,21 @@ export const toggleFilterInSet = (appliedFilters, suggestionText) => {
     }
     return newAppliedFilters;
 };
+export const formatIntervalKey = (column, start, end) => `${column}:${start}-${end}`;
 export const extractActiveFilterValues = (activeFilters) => {
     const activeValues = new Set();
     activeFilters.forEach((filter) => {
-        if (Array.isArray(filter.values)) {
-            filter.values.forEach((v) => activeValues.add(`${filter.column}:${String(v)}`));
-        }
+        if (!Array.isArray(filter.values))
+            return;
+        filter.values.forEach((v) => {
+            // Interval values are `{start, end}` objects; categorical values are strings.
+            if (v !== null && typeof v === "object" && "start" in v) {
+                activeValues.add(formatIntervalKey(filter.column, v.start, v.end));
+            }
+            else {
+                activeValues.add(`${filter.column}:${String(v)}`);
+            }
+        });
     });
     return activeValues;
 };
@@ -33,13 +42,21 @@ export const syncSuggestionFilters = (activeFilters, stream) => {
                 if (!((_c = (_b = annotation.interactions) === null || _b === void 0 ? void 0 : _b.dynamicFilters) === null || _c === void 0 ? void 0 : _c.length))
                     continue;
                 for (const filter of annotation.interactions.dynamicFilters) {
-                    if (filter.type !== "categorical" || !("values" in filter))
-                        continue;
-                    filter.values.forEach((value) => {
-                        if (activeValues.has(`${filter.column}:${String(value.value)}`)) {
-                            updatedAppliedFilters.add(`${filter.column}:${value.value}`);
-                        }
-                    });
+                    if (filter.type === "categorical" && "values" in filter) {
+                        filter.values.forEach((value) => {
+                            if (activeValues.has(`${filter.column}:${String(value.value)}`)) {
+                                updatedAppliedFilters.add(`${filter.column}:${value.value}`);
+                            }
+                        });
+                    }
+                    else if (filter.type === "interval" && "selectedValues" in filter) {
+                        filter.selectedValues.forEach((interval) => {
+                            const key = formatIntervalKey(filter.column, interval.start, interval.end);
+                            if (activeValues.has(key)) {
+                                updatedAppliedFilters.add(key);
+                            }
+                        });
+                    }
                 }
             }
         }

package/dist/collection/components/vviinn-suggestions/render-helpers.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { marked } from "marked";
 import { triggerFilter } from "../vviinn-filters/helpers/triggerFilter";
+import { formatIntervalKey } from "./helpers";
 export const extractDataItems = (annotation) => annotation.data.items;
 export const findMatchingFilterValue = (item, filter) => {
     if (filter.type !== "categorical" ||
@@ -21,18 +22,38 @@ export const applyFiltersForItems = (dataItems, interactions, currentRequestFilt
     let updatedFilters = currentRequestFilters;
     if (dataItems.length === 0) {
         for (const filter of filters) {
-            if (filter.type !== "categorical" || !("values" in filter))
-                continue;
-            for (const filterValue of filter.values) {
-                updatedFilters = triggerFilter({
-                    filterValue: filterValue,
-                    selectedFilter: filter,
-                    requestFilters: updatedFilters,
-                    vviinnFilterTriggered: handlers.vviinnFilterTriggered,
-                    vviinnFiltersChanged: handlers.vviinnFiltersChanged,
-                    el: handlers.el,
-                    isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
-                });
+            if (filter.type === "categorical" && "values" in filter) {
+                for (const filterValue of filter.values) {
+                    updatedFilters = triggerFilter({
+                        filterValue: filterValue,
+                        selectedFilter: filter,
+                        requestFilters: updatedFilters,
+                        vviinnFilterTriggered: handlers.vviinnFilterTriggered,
+                        vviinnFiltersChanged: handlers.vviinnFiltersChanged,
+                        el: handlers.el,
+                        isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
+                    });
+                }
+            }
+            else if (filter.type === "interval" && "selectedValues" in filter) {
+                // A suggestion chip represents one specific range to toggle, not a slider.
+                // The backend emits `full === selectedValues[0]`, which would make
+                // `isFullRangeInterval` read every click as "cleared to the full range"
+                // (deselect-only). Neutralize `full` so the shared toggle logic selects /
+                // deselects this exact interval by value match. Only the object passed to
+                // `triggerFilter` is affected; `value` still carries the real interval.
+                const chipFilter = Object.assign(Object.assign({}, filter), { full: { start: undefined, end: undefined } });
+                for (const interval of filter.selectedValues) {
+                    updatedFilters = triggerFilter({
+                        filterValue: { interval },
+                        selectedFilter: chipFilter,
+                        requestFilters: updatedFilters,
+                        vviinnFilterTriggered: handlers.vviinnFilterTriggered,
+                        vviinnFiltersChanged: handlers.vviinnFiltersChanged,
+                        el: handlers.el,
+                        isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
+                    });
+                }
             }
         }
         return updatedFilters;
@@ -81,9 +102,15 @@ export const splitContentByLocators = (content, annotations) => {
 };
 export const getAnnotationFilterKeys = (annotation) => {
     var _a, _b, _c;
-    return (_c = (_b = (_a = annotation.interactions) === null || _a === void 0 ? void 0 : _a.dynamicFilters) === null || _b === void 0 ? void 0 : _b.flatMap((filter) => "values" in filter
-        ? filter.values.map((v) => `${filter.column}:${v.value}`)
-        : [])) !== null && _c !== void 0 ? _c : [];
+    return (_c = (_b = (_a = annotation.interactions) === null || _a === void 0 ? void 0 : _a.dynamicFilters) === null || _b === void 0 ? void 0 : _b.flatMap((filter) => {
+        if (filter.type === "categorical" && "values" in filter) {
+            return filter.values.map((v) => `${filter.column}:${v.value}`);
+        }
+        if (filter.type === "interval" && "selectedValues" in filter) {
+            return filter.selectedValues.map((interval) => formatIntervalKey(filter.column, interval.start, interval.end));
+        }
+        return [];
+    })) !== null && _c !== void 0 ? _c : [];
 };
 const getAnnotationDeeplink = (annotation) => {
     for (const item of annotation.data.items) {