@coveo/atomic 3.60.7 → 3.61.1

package/dist/cjs/global/environment.cjs

@@ -32,7 +32,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.60.7",
+        version: "3.61.1",
         headlessVersion
     };
 }

package/dist/cjs/utils/accessibility-utils.cjs

@@ -68,6 +68,16 @@ class FocusTargetController {
         this.internalOnFocusCallback?.();
         while(this.publicOnFocusCallbacks.length)this.publicOnFocusCallbacks.pop()?.();
     }
+    focusElement(element) {
+        if (!element) return;
+        element.focus({
+            preventScroll: true
+        });
+        element.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest'
+        });
+    }
     async setTarget(el) {
         if (!el) return;
         this.element = el;
@@ -78,7 +88,7 @@ class FocusTargetController {
     }
     async focus() {
         await (0, external_utils_cjs_namespaceObject.defer)();
-        this.element?.focus();
+        this.focusElement(this.element);
         this.clearFocusCallbacks();
     }
     focusAfterSearch() {
@@ -103,7 +113,7 @@ class FocusTargetController {
             if (this.element) {
                 const el = this.element;
                 await (0, external_utils_cjs_namespaceObject.defer)().then(()=>{
-                    el.focus();
+                    this.focusElement(el);
                     this.clearFocusCallbacks();
                 });
             }

package/dist/cjs/utils/props-utils.cjs

@@ -39,10 +39,19 @@ function mapProperty(options) {
             type: Object
         });
         ctor.addInitializer((instance)=>{
-            const props = {};
             const prefix = options?.attributePrefix || (0, external_utils_cjs_namespaceObject.camelToKebab)(propertyKey.toString());
-            mapAttributesToProp(prefix, props, Array.from(instance.attributes), options?.splitValues ?? false);
-            instance[propertyKey] = props;
+            const readMappedAttributes = ()=>{
+                const props = {};
+                mapAttributesToProp(prefix, props, Array.from(instance.attributes), options?.splitValues ?? false);
+                return props;
+            };
+            instance[propertyKey] = readMappedAttributes();
+            instance.addController({
+                hostConnected: ()=>{
+                    const props = readMappedAttributes();
+                    if (Object.keys(props).length > 0) instance[propertyKey] = props;
+                }
+            });
         });
     };
 }

package/dist/cjs/versions.cjs

@@ -32,7 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
     headlessVersion: ()=>package_json_namespaceObject.version
 });
 const package_json_namespaceObject = require("@coveo/headless/package.json");
-const atomicVersion = "3.60.7";
+const atomicVersion = "3.61.1";
 exports.atomicVersion = __webpack_exports__.atomicVersion;
 exports.headlessVersion = __webpack_exports__.headlessVersion;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/esm/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.js

@@ -25,8 +25,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceBreadbox extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.js

@@ -35,8 +35,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceCategoryFacet extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js

@@ -16,8 +16,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceDidYouMean extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-facet/atomic-commerce-facet.js

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state as decorators_js_state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
+import { getFirstNewFacetValueIndex } from "../../common/facets/facet-common.js";
 import { renderFacetContainer } from "../../common/facets/facet-container/facet-container.js";
 import { renderFacetHeader } from "../../common/facets/facet-header/facet-header.js";
 import { renderFacetSearchInput } from "../../common/facets/facet-search/facet-search-input.js";
@@ -29,8 +30,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceFacet extends LitElement {
     initialize() {
@@ -122,8 +123,10 @@ class AtomicCommerceFacet extends LitElement {
             })}`));
     }
     renderValues() {
+        const firstNewValueIndex = getFirstNewFacetValueIndex(this.facetState.values, this.valuesBeforeShowMore);
         return this.renderValuesContainer(this.facetState.values.map((value, i)=>{
-            const shouldFocusAfterInteraction = 0 === i;
+            const shouldFocusOnShowLessAfterInteraction = 0 === i;
+            const shouldFocusOnShowMoreAfterInteraction = i === firstNewValueIndex;
             return renderFacetValue({
                 props: {
                     ...this.facetValueProps,
@@ -133,8 +136,8 @@ class AtomicCommerceFacet extends LitElement {
                     facetValue: value.value,
                     facetState: value.state,
                     setRef: (btn)=>{
-                        if (shouldFocusAfterInteraction) this.showLessFocus?.setTarget(btn);
-                        if (shouldFocusAfterInteraction) this.showMoreFocus?.setTarget(btn);
+                        if (shouldFocusOnShowLessAfterInteraction) this.showLessFocus?.setTarget(btn);
+                        if (shouldFocusOnShowMoreAfterInteraction) this.showMoreFocus?.setTarget(btn);
                     }
                 }
             });
@@ -153,6 +156,7 @@ class AtomicCommerceFacet extends LitElement {
                     this.facet.showLessValues();
                 },
                 onShowMore: ()=>{
+                    this.valuesBeforeShowMore = new Set(this.facetState.values.map(({ value })=>value));
                     this.focusTargets.showMore.focusAfterSearch();
                     this.facet.showMoreValues();
                 }
@@ -226,7 +230,7 @@ class AtomicCommerceFacet extends LitElement {
         if (!this.facet) this.error = new Error('The "facet" property is required for <atomic-commerce-facet>.');
     }
     constructor(...args){
-        super(...args), this.isCollapsed = false, this.ariaLiveRegion = new AriaLiveRegionController(this, 'facet-search');
+        super(...args), this.isCollapsed = false, this.ariaLiveRegion = new AriaLiveRegionController(this, 'facet-search'), this.valuesBeforeShowMore = new Set();
     }
 }
 AtomicCommerceFacet.styles = [

package/dist/esm/components/commerce/atomic-commerce-facet-number-input/atomic-commerce-facet-number-input.js

@@ -13,8 +13,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceFacetNumberInput extends LightDomMixin(LitElement) {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js

@@ -22,8 +22,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceFacets extends LightDomMixin(LitElement) {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js

@@ -24,8 +24,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 const FirstRequestExecutedFlag = 'firstRequestExecuted';
 class AtomicCommerceInterface extends ChildrenUpdateCompleteMixin(LitElement) {

package/dist/esm/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js

@@ -14,8 +14,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     connectedCallback() {

package/dist/esm/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.js

@@ -18,8 +18,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceLoadMoreProducts extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.js

@@ -19,8 +19,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceNoProducts extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.js

@@ -23,8 +23,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceNumericFacet extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js

@@ -24,8 +24,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommercePager extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.js

@@ -35,8 +35,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement) {
     async setRenderFunction(productRenderingFunction) {
@@ -163,6 +163,9 @@ class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement)
         const displayPlaceholders = !(this.isAppLoaded && this.isEveryProductReady);
         return getItemListDisplayClasses(this.display, this.density, this.imageSize, this.searchOrListingState?.isLoading, displayPlaceholders);
     }
+    getProductId(product) {
+        return this.productListCommon.getResultId(product.permanentid, product.responseId ?? this.searchOrListingState.responseId, this.density, this.imageSize);
+    }
     renderGrid() {
         return html`${map(this.searchOrListingState.products, (product, index)=>renderGridLayout({
                 props: {
@@ -175,7 +178,7 @@ class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement)
                         element instanceof HTMLElement && this.productListCommon.setNewResultRef(element, index);
                     }
                 }
-            })(html`${keyed(this.productListCommon.getResultId(product.permanentid, this.searchOrListingState.responseId, this.density, this.imageSize), html`<atomic-product
+            })(html`${keyed(this.getProductId(product), html`<atomic-product
             .content=${this.productTemplateProvider.getTemplateContent(product)}
             .density=${this.density}
             .display=${this.display}
@@ -193,7 +196,7 @@ class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement)
           ></atomic-product>`)}`))}`;
     }
     renderList() {
-        return html`${map(this.searchOrListingState.products, (product, index)=>html`${keyed(this.productListCommon.getResultId(product.permanentid, this.searchOrListingState.responseId, this.density, this.imageSize), html`<atomic-product
+        return html`${map(this.searchOrListingState.products, (product, index)=>html`${keyed(this.getProductId(product), html`<atomic-product
           part="outline"
           ${ref((element)=>element instanceof HTMLElement && this.productListCommon.setNewResultRef(element, index))}
           .content=${this.productTemplateProvider.getTemplateContent(product)}
@@ -228,7 +231,7 @@ class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement)
                     templateContentForFirstItem
                 }
             })(html`${map(this.searchOrListingState.products, (product, index)=>{
-                const key = this.productListCommon.getResultId(product.permanentid, this.searchOrListingState.responseId, this.density, this.imageSize);
+                const key = this.getProductId(product);
                 return renderTableRow({
                     props: {
                         key,

package/dist/esm/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.js

@@ -20,8 +20,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceProductsPerPage extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.js

@@ -23,8 +23,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceQueryError extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.js

@@ -17,8 +17,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceQuerySummary extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js

@@ -20,8 +20,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(LitElement) {
     connectedCallback() {

package/dist/esm/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js

@@ -32,8 +32,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceRecommendationList extends ChildrenUpdateCompleteMixin(LitElement) {
     async watchNumberOfRecommendationsPerPage() {
@@ -145,6 +145,9 @@ class AtomicCommerceRecommendationList extends ChildrenUpdateCompleteMixin(LitEl
             if (this.summaryState.firstRequestExecuted) this.bindings.store.unsetLoadingFlag(this.loadingFlag);
         });
     }
+    getProductId(product) {
+        return this.productListCommon.getResultId(product.permanentid, product.responseId ?? this.recommendationsState.responseId, this.density, this.imageSize);
+    }
     getAtomicProductProps(product) {
         const linkContent = this.productTemplateProvider.getLinkTemplateContent(product);
         return {
@@ -156,7 +159,7 @@ class AtomicCommerceRecommendationList extends ChildrenUpdateCompleteMixin(LitEl
             product: product,
             renderingFunction: this.itemRenderingFunction,
             loadingFlag: this.loadingFlag,
-            key: this.productListCommon.getResultId(product.permanentid, this.recommendationsState.responseId, this.density, this.imageSize),
+            key: this.getProductId(product),
             content: this.productTemplateProvider.getTemplateContent(product),
             linkContent,
             stopPropagation: !!linkContent,

package/dist/esm/components/commerce/atomic-commerce-refine-modal/atomic-commerce-refine-modal.js

@@ -20,8 +20,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceRefineModal extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js

@@ -15,8 +15,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceRefineToggle extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -32,8 +32,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceSearchBox extends LitElement {
     connectedCallback() {

package/dist/esm/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js

@@ -14,8 +14,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceSearchBoxInstantProducts extends LitElement {
     async setRenderFunction(resultRenderingFunction) {

package/dist/esm/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js

@@ -11,8 +11,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceSearchBoxQuerySuggestions extends LitElement {
     connectedCallback() {

package/dist/esm/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js

@@ -14,8 +14,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceSearchBoxRecentQueries extends LitElement {
     connectedCallback() {

package/dist/esm/components/commerce/atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js

@@ -19,8 +19,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceSortDropdown extends LitElement {
     initialize() {

package/dist/esm/components/commerce/atomic-commerce-text/atomic-commerce-text.js

@@ -9,8 +9,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceText extends LitElement {
     get strings() {

package/dist/esm/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js

@@ -24,8 +24,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicCommerceTimeframeFacet extends LitElement {
     get displayName() {

package/dist/esm/components/commerce/atomic-product/atomic-product.js

@@ -18,8 +18,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicProduct extends ChildrenUpdateCompleteMixin(LitElement) {
     async connectedCallback() {

package/dist/esm/components/commerce/atomic-product-children/atomic-product-children.js

@@ -18,8 +18,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 const AMOUNT_OF_VISIBLE_CHILDREN = 5;
 class AtomicProductChildren extends LightDomMixin(LitElement) {

package/dist/esm/components/commerce/atomic-product-description/atomic-product-description.js

@@ -16,8 +16,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicProductDescription extends LightDomMixin(LitElement) {
     initialize() {

package/dist/esm/components/commerce/atomic-product-excerpt/atomic-product-excerpt.js

@@ -16,8 +16,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicProductExcerpt extends LightDomMixin(LitElement) {
     initialize() {}

package/dist/esm/components/commerce/atomic-product-field-condition/atomic-product-field-condition.js

@@ -1,5 +1,5 @@
 import { ProductTemplatesHelpers } from "@coveo/headless/commerce";
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createProductContextController } from "../product-template-component-utils/context/product-context-controller.js";
 import { makeDefinedConditions, makeMatchConditions } from "../../common/template-controller/template-utils.js";
@@ -13,8 +13,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicProductFieldCondition extends LightDomMixin(LitElement) {
     initialize() {}
@@ -26,8 +26,13 @@ class AtomicProductFieldCondition extends LightDomMixin(LitElement) {
     }
     render() {
         const product = this.productController.item;
-        if (!product || !this.conditions.every((condition)=>condition(product))) this.remove();
-        return html`<slot></slot>`;
+        if (!product) {
+            this.hidden = true;
+            return nothing;
+        }
+        const conditionsMet = this.conditions.every((condition)=>condition(product));
+        this.hidden = !conditionsMet;
+        return conditionsMet ? html`<slot></slot>` : nothing;
     }
     constructor(...args){
         super(...args), this.productController = createProductContextController(this);

package/dist/esm/components/commerce/atomic-product-image/atomic-product-image.js

@@ -16,8 +16,8 @@ function _ts_decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function _ts_metadata(k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+function _ts_metadata(metadataKey, metadataValue) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 class AtomicProductImage extends LitElement {
     initialize() {