@coveo/atomic 3.28.0-pre.f769419eb8 → 3.28.0

package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js

@@ -45,9 +45,9 @@ const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         updateBreakpoints(this.host);
-        return (h("atomic-modal", { key: 'c7a76c1ba321c78bd84331f113f03896a6a0c9df', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '09fd0d82e3039a8c94d6618c37eeaf156dce1898', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '02d2e6796a2bdf700a4bef264716ca4b9c391da7', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '57f816636113e93dfe90ea56bf734fccec54e318', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
+        return (h("atomic-modal", { key: '7a931ebd14caa10112de7895125b0062b8f117a1', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: 'e1c4eba55b4c7b126f30c041fd65844273a85901', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '5b1a2ed1ab7fd967aa41dc5c8748d9b55d11c7a5', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '590569f2abac9a3ac08b162477b6ecd797658e9c', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
                 this.currentAnswer = correspondingAnswer;
-            } })))), h(SmartSnippetFeedbackModalDetails, { key: '4f67b50d397f81e88c900d2990930ab866072221', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '27be689c28e25e06a830f987193b6656f0d4b702', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '15a456f50a05c31b251e32e07f2f7822ab6d2fd2', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: 'dfff513e488ce8e999ec49a2facd658c5db7dd3d', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

package/dist/atomic/components/atomic-smart-snippet-source2.js

@@ -33,7 +33,7 @@ const AtomicSmartSnippetSource = /*@__PURE__*/ proxyCustomElement(class AtomicSm
         }
     }
     render() {
-        return (h(Host, { key: '8d3ddc9e12c2108901683ac8b8fa94f8116cbb5c' }, h(LinkWithItemAnalytics, { key: '8ab193bad83336b3e523a2cb66427f78c5e89c8f', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: 'e320040a2e233bf8e1f7765eccebf302e8a9a3ac', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
+        return (h(Host, { key: '2d0009fa3474c31a5eac2c10492ccd2d71c06032' }, h(LinkWithItemAnalytics, { key: '921fa568b5c36e4e5bf701d2060f71cba890d655', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: '6a23243f0bfff71da2017045950ad3190bfb91a7', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
     }
 }, [0, "atomic-smart-snippet-source", {
         "source": [1040],

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

@@ -114,8 +114,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: 'e6f6d787d6467a9fe5f9b52978113f5abf17aee7', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: 'e79c0e7479c80208d55d977d160f2b26714699bf' }, h(SortLabel, { key: '2af1ef82168f42ef30550ddc65ac06bf44ade542', i18n: i18n, id: id }), h(SortSelect, { key: 'a3d647d30e07c3d9ec5466c0214cbed0cac0205d', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
-            h("slot", { key: '4c13608f8bb5053bd71cab4087a063c251148c84' }),
+            h(SortGuard, { key: '0f0047dbece058dc80e790d86cb025c294522abb', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '8637e7d94b2e3b876f6670fd9ffa68d236c48b66' }, h(SortLabel, { key: '5648c4d23b5cca87c7df3bf9cdc23566b90d6ccd', i18n: i18n, id: id }), h(SortSelect, { key: '5706ad582d5ac02dfb196e9d3969ac108f50d4e8', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
+            h("slot", { key: 'cd441db170547726c77047cd23e59c96a80d620c' }),
         ];
     }
     get host() { return this; }

package/dist/atomic/components/atomic-sort-expression.js

@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: '607d21dda10509f6ba94f21b8332d17d566df799', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: 'f8d757f03492d082e46915bfcc6f0ed4cb16d3ec', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-suggestion-renderer2.js

@@ -73,7 +73,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: 'b7134463c346757424d97a9863a9333e4187d364', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '2d331a78c32f14bb5313887b6e9849a52b8b6644', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: '6af89b58e710469e73305956a30764725fa59281' }, h("atomic-tab-bar", { key: 'b0a461ca116a0e36f84c9d22eab081dd2b29a1fd' }, h("div", { key: '03a0763728c300157afed288ddba6fd34a5e7e82', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: 'c20b95de1f0d99a207ffb86df272b6574a533fde' }, h("atomic-tab-bar", { key: '4cf657592fad9cca15ade748966af72a276f65d3' }, h("div", { key: 'e6f73c165ee6720bbd642b1b7f9a438d136b1e40', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

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

@@ -0,0 +1,114 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.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;
+};
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { buildSearch, buildProductListing, } from '@coveo/headless/commerce';
+import { html, unsafeCSS, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { createAppLoadedListener } from '../../common/interface/store';
+import { renderLoadMoreButton } from '../../common/load-more/button';
+import { renderLoadMoreContainer } from '../../common/load-more/container';
+import { renderLoadMoreProgressBar } from '../../common/load-more/progress-bar';
+import { renderLoadMoreSummary } from '../../common/load-more/summary';
+import styles from './atomic-commerce-load-more-products.tw.css';
+/**
+ * The `atomic-commerce-load-more-products` component allows the user to load additional products if more are available.
+ *
+ * @part container - The container of the component.
+ * @part showing-results - The summary displaying which products are shown and how many are available.
+ * @part highlight - The highlighted number of products displayed and number of products available.
+ * @part progress-bar - The progress bar displaying a percentage of results shown over the total number of products available.
+ * @part load-more-results-button - The "Load more products" button.
+ *
+ * @alpha
+ */
+let AtomicCommerceLoadMoreProducts = class AtomicCommerceLoadMoreProducts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isAppLoaded = false;
+    }
+    initialize() {
+        if (this.bindings.interfaceElement.type === 'product-listing') {
+            this.listingOrSearch = buildProductListing(this.bindings.engine);
+        }
+        else {
+            this.listingOrSearch = buildSearch(this.bindings.engine);
+        }
+        this.pagination = this.listingOrSearch.pagination();
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    render() {
+        return html `${when(this.shouldRender, () => renderLoadMoreContainer()(html `
+        ${renderLoadMoreSummary({
+            props: {
+                from: this.lastProduct,
+                to: this.paginationState.totalEntries,
+                i18n: this.bindings.i18n,
+                label: 'showing-products-of-load-more',
+            },
+        })}
+        ${renderLoadMoreProgressBar({
+            props: {
+                from: this.lastProduct,
+                to: this.paginationState.totalEntries,
+            },
+        })}
+        ${renderLoadMoreButton({
+            props: {
+                i18n: this.bindings.i18n,
+                label: 'load-more-products',
+                moreAvailable: this.lastProduct < this.paginationState.totalEntries,
+                onClick: () => this.onClick(),
+            },
+        })}
+      `))}`;
+    }
+    get lastProduct() {
+        return this.productListingOrSearchState.products.length;
+    }
+    async onClick() {
+        this.bindings.store.state.resultList?.focusOnNextNewResult();
+        this.pagination.fetchMoreProducts();
+    }
+    get shouldRender() {
+        return this.isAppLoaded && this.paginationState.totalEntries > 0;
+    }
+};
+AtomicCommerceLoadMoreProducts.styles = [unsafeCSS(styles)];
+__decorate([
+    state()
+], AtomicCommerceLoadMoreProducts.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCommerceLoadMoreProducts.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicCommerceLoadMoreProducts.prototype, "isAppLoaded", void 0);
+__decorate([
+    bindStateToController('pagination'),
+    state()
+], AtomicCommerceLoadMoreProducts.prototype, "paginationState", void 0);
+__decorate([
+    bindStateToController('listingOrSearch'),
+    state()
+], AtomicCommerceLoadMoreProducts.prototype, "productListingOrSearchState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceLoadMoreProducts.prototype, "render", null);
+AtomicCommerceLoadMoreProducts = __decorate([
+    customElement('atomic-commerce-load-more-products'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceLoadMoreProducts);
+export { AtomicCommerceLoadMoreProducts };

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

@@ -0,0 +1,3 @@
+const css = `/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%}}}.progress-bar{--tw-gradient-from:var(--atomic-more-results-progress-bar-color-from,var(--atomic-primary-dark));--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--atomic-more-results-progress-bar-color-to,var(--atomic-primary-light))}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}`;
+export default [css];

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

@@ -0,0 +1,84 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.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;
+};
+import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { bindings } from "../../../decorators/bindings";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderRefineToggleButton } from '../../common/refine-modal/button';
+import { refineToggleGuard } from '../../common/refine-modal/guard';
+import { errorGuard } from "../../../decorators/error-guard";
+import { bindingGuard } from "../../../decorators/binding-guard";
+/**
+ * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+ *
+ * When this component is added to the `atomic-commerce-interface`, an `atomic-commerce-refine-modal` component is automatically created.
+ *
+ * @part button - The refine toggle button.
+ * @part placeholder - The placeholder shown while the first request is being executed.
+ *
+ * @alpha
+ */
+let AtomicCommerceRefineToggle = class AtomicCommerceRefineToggle extends LitElement {
+    initialize() {
+        const searchOrListing = this.bindings.interfaceElement.type === 'search'
+            ? buildSearch(this.bindings.engine)
+            : buildProductListing(this.bindings.engine);
+        this.summary = searchOrListing.summary();
+    }
+    loadModal() {
+        if (this.modalRef) {
+            return;
+        }
+        this.modalRef = document.createElement('atomic-commerce-refine-modal');
+        this.insertAdjacentElement('beforebegin', this.modalRef);
+        this.modalRef.openButton = this.buttonRef;
+    }
+    enableModal() {
+        this.modalRef && (this.modalRef.isOpen = true);
+    }
+    render() {
+        return html `${refineToggleGuard({
+            firstRequestExecuted: this.summaryState.firstRequestExecuted,
+            hasError: this.summaryState.hasError,
+            hasItems: this.summaryState.hasProducts,
+        }, () => html `${renderRefineToggleButton({
+            props: {
+                i18n: this.bindings.i18n,
+                onClick: () => this.enableModal(),
+                refCallback: (button) => {
+                    if (!button) {
+                        return;
+                    }
+                    this.buttonRef = button;
+                    this.loadModal();
+                },
+            },
+        })}`)}`;
+    }
+};
+__decorate([
+    state()
+], AtomicCommerceRefineToggle.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicCommerceRefineToggle.prototype, "error", void 0);
+__decorate([
+    bindStateToController('summary'),
+    state()
+], AtomicCommerceRefineToggle.prototype, "summaryState", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicCommerceRefineToggle.prototype, "render", null);
+AtomicCommerceRefineToggle = __decorate([
+    customElement('atomic-commerce-refine-toggle'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceRefineToggle);
+export { AtomicCommerceRefineToggle };

package/dist/atomic/components/components/commerce/atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.tw.css.js

@@ -0,0 +1,2 @@
+const css = ``;
+export default [css];

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

@@ -9,7 +9,6 @@ import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
-import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { ProductTemplatesHelpers, HighlightUtils, } from '@coveo/headless/commerce';
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -22,7 +21,7 @@ import { getStringValueFromProductOrNull } from '../product-template-component-u
 /**
  * The `atomic-product-text` component renders the value of a string field for a given product.
  */
-let AtomicProductText = class AtomicProductText extends InitializeBindingsMixin(LitElement) {
+let AtomicProductText = class AtomicProductText extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -33,6 +32,9 @@ let AtomicProductText = class AtomicProductText extends InitializeBindingsMixin(
         this.shouldHighlight = true;
         this.productController = createProductContextController(this);
     }
+    createRenderRoot() {
+        return this;
+    }
     initialize() {
         if (!this.product && this.productController.item) {
             this.product = this.productController.item;
@@ -129,7 +131,7 @@ __decorate([
     errorGuard()
 ], AtomicProductText.prototype, "render", null);
 AtomicProductText = __decorate([
-    bindings(),
-    customElement('atomic-product-text')
+    customElement('atomic-product-text'),
+    bindings()
 ], AtomicProductText);
 export { AtomicProductText };

package/dist/atomic/components/components/commerce/index.js

@@ -3,6 +3,7 @@ export { AtomicCommerceBreadbox } from './atomic-commerce-breadbox/atomic-commer
 export { AtomicCommerceDidYouMean } from './atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js';
 export { AtomicCommerceInterface } from './atomic-commerce-interface/atomic-commerce-interface.js';
 export { AtomicCommerceLayout } from './atomic-commerce-layout/atomic-commerce-layout.js';
+export { AtomicCommerceLoadMoreProducts } from './atomic-commerce-load-more-products/atomic-commerce-load-more-products.js';
 export { AtomicCommerceNoProducts } from './atomic-commerce-no-products/atomic-commerce-no-products.js';
 export { AtomicCommercePager } from './atomic-commerce-pager/atomic-commerce-pager.js';
 export { AtomicCommerceProductList } from './atomic-commerce-product-list/atomic-commerce-product-list.js';
@@ -10,6 +11,7 @@ export { AtomicCommerceProductsPerPage } from './atomic-commerce-products-per-pa
 export { AtomicCommerceQuerySummary } from './atomic-commerce-query-summary/atomic-commerce-query-summary.js';
 export { AtomicCommerceRecommendationInterface } from './atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js';
 export { AtomicCommerceRecommendationList } from './atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js';
+export { AtomicCommerceRefineToggle } from './atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js';
 export { AtomicCommerceSearchBox } from './atomic-commerce-search-box/atomic-commerce-search-box.js';
 export { AtomicCommerceSearchBoxInstantProducts } from './atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js';
 export { AtomicCommerceSearchBoxQuerySuggestions } from './atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js';

package/dist/atomic/components/components/commerce/lazy-index.js

@@ -4,6 +4,7 @@ export default {
     'atomic-commerce-did-you-mean': async () => await import('./atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js'),
     'atomic-commerce-interface': async () => await import('./atomic-commerce-interface/atomic-commerce-interface.js'),
     'atomic-commerce-layout': async () => await import('./atomic-commerce-layout/atomic-commerce-layout.js'),
+    'atomic-commerce-load-more-products': async () => await import('./atomic-commerce-load-more-products/atomic-commerce-load-more-products.js'),
     'atomic-commerce-no-products': async () => await import('./atomic-commerce-no-products/atomic-commerce-no-products.js'),
     'atomic-commerce-pager': async () => await import('./atomic-commerce-pager/atomic-commerce-pager.js'),
     'atomic-commerce-product-list': async () => await import('./atomic-commerce-product-list/atomic-commerce-product-list.js'),
@@ -11,6 +12,7 @@ export default {
     'atomic-commerce-query-summary': async () => await import('./atomic-commerce-query-summary/atomic-commerce-query-summary.js'),
     'atomic-commerce-recommendation-interface': async () => await import('./atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js'),
     'atomic-commerce-recommendation-list': async () => await import('./atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js'),
+    'atomic-commerce-refine-toggle': async () => await import('./atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js'),
     'atomic-commerce-search-box': async () => await import('./atomic-commerce-search-box/atomic-commerce-search-box.js'),
     'atomic-commerce-search-box-instant-products': async () => await import('./atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js'),
     'atomic-commerce-search-box-query-suggestions': async () => await import('./atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js'),

package/dist/atomic/components/components/common/atomic-component-error/atomic-component-error.js

@@ -11,8 +11,7 @@ import { customElement, property } from 'lit/decorators.js';
  * The `atomic-component-error` component is used by other components to render and log errors.
  */
 let AtomicComponentError = class AtomicComponentError extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated() {
         console.error(this.error, this.element);
     }
     render() {

package/dist/atomic/components/components/common/load-more/button.js

@@ -0,0 +1,16 @@
+import { html, nothing } from 'lit';
+import { renderButton } from '../button';
+export const renderLoadMoreButton = ({ props, }) => {
+    const { i18n, onClick, moreAvailable, label } = props;
+    if (!moreAvailable) {
+        return nothing;
+    }
+    return renderButton({
+        props: {
+            style: 'primary',
+            part: 'load-more-results-button',
+            class: 'my-2 p-3 font-bold',
+            onClick: () => onClick(),
+        },
+    })(html `${i18n.t(label)}`);
+};

package/dist/atomic/components/components/common/load-more/container.js

@@ -0,0 +1,6 @@
+import { html } from 'lit';
+export const renderLoadMoreContainer = () => (children) => {
+    return html `
+      <div class="flex flex-col items-center" part="container">${children}</div>
+    `;
+};

package/dist/atomic/components/components/common/load-more/progress-bar.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+export const renderLoadMoreProgressBar = ({ props }) => {
+    const { from, to } = props;
+    const percentage = to > 0 ? Math.min((from / to) * 100, 100) : 0;
+    const width = `${Math.ceil(percentage)}%`;
+    return html `
+    <div part="progress-bar" class="bg-neutral relative my-2 h-1 w-72 rounded">
+      <div
+        class="progress-bar absolute top-0 left-0 z-1 h-full overflow-hidden rounded bg-linear-to-r"
+        style=${styleMap({ width })}
+      ></div>
+    </div>
+  `;
+};

package/dist/atomic/components/components/common/load-more/summary.js

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+export const renderLoadMoreSummary = ({ props }) => {
+    const { i18n, from, to, label } = props;
+    const wrapHighlight = (content) => {
+        return `<span class="font-bold text-on-background" part="highlight">${content}</span>`;
+    };
+    const locale = i18n.language;
+    const content = i18n.t(label || 'showing-results-of-load-more', {
+        interpolation: { escapeValue: false },
+        last: wrapHighlight(from.toLocaleString(locale)),
+        total: wrapHighlight(to.toLocaleString(locale)),
+    });
+    return html `
+    <div class="text-neutral-dark my-2 text-lg" part="showing-results">
+      ${unsafeHTML(content)}
+    </div>
+  `;
+};

package/dist/atomic/components/components/common/refine-modal/button.js

@@ -0,0 +1,14 @@
+import { html, nothing } from 'lit';
+import { renderButton } from '../button';
+export const renderRefineToggleButton = ({ props }) => {
+    return html `${renderButton({
+        props: {
+            style: 'outline-primary',
+            class: 'w-full p-3',
+            onClick: props.onClick,
+            text: props.i18n.t('sort-and-filter'),
+            ref: props.refCallback,
+            part: 'button',
+        },
+    })(nothing)}`;
+};

package/dist/atomic/components/components/common/refine-modal/guard.js

@@ -0,0 +1,23 @@
+import { html, nothing } from 'lit';
+import { directive, Directive } from 'lit/directive.js';
+class RefineToggleGuardDirective extends Directive {
+    render({ hasError, firstRequestExecuted, hasItems }, content) {
+        if (hasError) {
+            return nothing;
+        }
+        if (!firstRequestExecuted) {
+            return html `
+        <div
+          part="placeholder"
+          aria-hidden="true"
+          class="bg-neutral my-2 h-8 w-28 animate-pulse rounded"
+        ></div>
+      `;
+        }
+        if (!hasItems) {
+            return nothing;
+        }
+        return html `${content()}`;
+    }
+}
+export const refineToggleGuard = directive(RefineToggleGuardDirective);

package/dist/atomic/components/facet-date-input.js

@@ -65,13 +65,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: 'a4baefb311141e8e83927641f9bc0b9f996fb7b1', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: 'e2fa89f6162073d29eac48402c61c8639f7db8fa', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '5892038f99ba80a1cdc9fcad6f6e654bbe72f5e8', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'c33ac8fa37cf0fd74b2714a96fa03aeb6ba79858', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: '4b27b2c56a50e1ba03cbe984f0f144dd09b65a24', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'a28f6f86eff1a0d6e9e7366d74d6292c1e400c67', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '6a43717815366cd577c3dcff12daee3b8f4f12e8', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '762537555485c888053782f20ed5641742189aa1', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '35ea3df63ff736489947afdb9518277e0743255f', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '18152b1a37aeaa700e10b35577c45041c15b5259', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'ded55e597f62ef7f6c61ac6e2dfe4c0cd6cff1b6', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: 'a9265bb688842a5c0f4cb5b95133f4c3a7784556', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-facet-date-input", {
         "bindings": [16],

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

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '20eae7777fc2b14691740480a700df5d5c53a04a', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '88e2f97c8063421d3db1b888ff0bcb3c724c47f4', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '68c3ace8291872131a7467d3edcb2d8b34b74ce6', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '88d8135436199ce130bd327048003966e7ca66ea', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: 'a9279a38a7653349e2b0ed5c2639ec47f4a1670d', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '9a688a97af3e9b36899e76dc909f8b7c29d782a5', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: 'b169caa7a3efdffa39a298d38d5498bfab294754', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: '1150309df6de7de6ab435bc2ba26cdaf41505758', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '65b0514f64b2d058f1b4b857a7cf660184d6ddf6', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '17f31559758e0c41cda84206efab8982ac8769a5', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '6bcd6327151f5b442564887b2fce9c0ea4f2c49c', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '85141773c0640ab06511f22147ba63ce99821006', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

package/dist/atomic/components/global/environment.js

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.28.0-pre.f769419eb8".VERSION,
+        version: "3.28.0".VERSION,
         headlessVersion: VERSION,
     };
 }

package/dist/atomic/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACkDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import {InteractiveItemContextController} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {InteractiveItemContextEvent} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\nimport {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACkDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\nimport {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import {InteractiveItemContextController} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {InteractiveItemContextEvent} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\nimport {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport {LitElement} from 'lit';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/tab-button.js

@@ -25,7 +25,7 @@ const AtomicTabButton = /*@__PURE__*/ proxyCustomElement(class AtomicTabButton e
         return this.active ? '' : 'text-neutral-dark hover:text-primary-light';
     }
     render() {
-        return (h(Host, { key: '31756c87605d4d34b25d70045d6c3a7500657e69', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'eaf627280b9dd51f80d12b9ed42ae1eee48711c6', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
+        return (h(Host, { key: 'b8a391fea7b7da702817ff91a9c88783111df0fe', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'e15b356a9749b61597726b60e64e5d190b57d654', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
     }
     static get style() { return AtomicTabButtonStyle0; }
 }, [0, "atomic-tab-button", {

package/dist/atomic/components/tab-popover.js

@@ -144,7 +144,7 @@ const TabPopover = /*@__PURE__*/ proxyCustomElement(class TabPopover extends HTM
         this.popperInstance?.forceUpdate();
     }
     render() {
-        return (h(Host, { key: 'bc5bdd23a274b97b468de8de77e06f2458a7529e', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
+        return (h(Host, { key: '05a3acf39d94c16a39b97abb419c7248b4083e80', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
     }
     get host() { return this; }
     static get style() { return AtomicTabPopoverStyle0; }

package/dist/atomic/{p-83108ffd.entry.js → p-0175c55f.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,g as t}from"./p-dc3df5ce.js";import{h as o}from"./p-8ff02003.js";import"./p-7e34e6f5.js";import"./p-f284897c.js";import"./p-0462f723.js";const r=class{constructor(t){s(this,t)}componentDidRender(){o(this.host)}get host(){return t(this)}};export{r as atomic_product_section_badges};
-//# sourceMappingURL=p-83108ffd.entry.js.map
+import{r as s,g as t}from"./p-dc3df5ce.js";import{h as o}from"./p-19921bbf.js";import"./p-2d99a682.js";import"./p-f284897c.js";import"./p-0462f723.js";const r=class{constructor(t){s(this,t)}componentDidRender(){o(this.host)}get host(){return t(this)}};export{r as atomic_product_section_badges};
+//# sourceMappingURL=p-0175c55f.entry.js.map