@coveo/atomic 3.32.3-pre.d8ef4547c4 → 3.32.3-pre.dd35907a82

package/dist/atomic/components/atomic-quickview-modal2.js

@@ -584,7 +584,7 @@ const AtomicQuickviewModal = /*@__PURE__*/ proxyCustomElement(class AtomicQuickv
         });
     }
     render() {
-        return (h("atomic-modal", { key: '423429e1de214e573327acc631b8730d163a7826', fullscreen: this.bindings.store.isMobile(), class: 'atomic-quickview-modal', isOpen: this.isOpen, close: () => this.onClose(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, this.renderHeader(), this.renderBody(), this.renderFooter()));
+        return (h("atomic-modal", { key: '21dbc83d06fcb1b393d13f7b2d116f68732c77d7', fullscreen: this.bindings.store.isMobile(), class: 'atomic-quickview-modal', isOpen: this.isOpen, close: () => this.onClose(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, this.renderHeader(), this.renderBody(), this.renderFooter()));
     }
     static get watchers() { return {
         "highlightKeywords": ["watchHighlightKeywords"]

package/dist/atomic/components/atomic-quickview.js

@@ -108,7 +108,7 @@ const AtomicQuickview$1 = /*@__PURE__*/ proxyCustomElement(class AtomicQuickview
     }
     render() {
         if (this.quickviewState.resultHasPreview) {
-            return (h(Button, { key: '946021ab0ad9b1b540008be778d59d36fdc69a92', part: "button", title: this.bindings.i18n.t('quickview'), style: "outline-primary", class: "p-2", onClick: (event) => this.onClick(event), ref: this.focusTarget.setTarget }, h("atomic-icon", { key: '88e2e69de88f5cfe1081b257378f3548ba7dfeee', part: "icon", class: "flex w-5 justify-center", icon: QuickviewIcon })));
+            return (h(Button, { key: 'b96d9a3049190935a2c4f041bae9faa89e62ce20', part: "button", title: this.bindings.i18n.t('quickview'), style: "outline-primary", class: "p-2", onClick: (event) => this.onClick(event), ref: this.focusTarget.setTarget }, h("atomic-icon", { key: 'a5be2ca28ccb7762d98ab9b71fec6a121eefcf38', part: "icon", class: "flex w-5 justify-center", icon: QuickviewIcon })));
         }
     }
     static get style() { return AtomicQuickviewStyle0; }

package/dist/atomic/components/atomic-result-children.js

@@ -138,7 +138,7 @@ const AtomicResultChildren$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResu
         return (h(ChildrenWrapper, { hasChildren: children.length > 0 }, children.map((child, i) => this.renderChild(child, i === children.length - 1))));
     }
     render() {
-        return (h(ResultChildrenGuard, { key: 'd67346c3627d9624b2475f3a5c32d38786f94b03', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
+        return (h(ResultChildrenGuard, { key: '4792c391d2d6dfd5b6a8f9ca7de5f6e17856aaf7', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
     }
     get host() { return this; }
     static get style() { return AtomicResultChildrenStyle0; }

package/dist/atomic/components/atomic-result-fields-list.js

@@ -98,7 +98,7 @@ const AtomicResultFieldsList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRe
         }
     }
     render() {
-        return h(Host, { key: 'b16f13aa18de4ae5eb9226957c8cf1f25ce1aa07' });
+        return h(Host, { key: '16dd76a0e5d91ab65deeeb1cef7e0eb666068ce7' });
     }
     get host() { return this; }
     static get style() { return AtomicResultFieldsListStyle0; }

package/dist/atomic/components/atomic-result-link.js

@@ -43,7 +43,7 @@ const AtomicResultLink$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
         const href = isUndefined(this.hrefTemplate)
             ? this.result.clickUri
             : buildStringTemplateFromResult(this.hrefTemplate, this.result, this.bindings);
-        return (h(LinkWithItemAnalytics, { key: '80c6525d5cbb347a3615ccc950357e684f77581e', href: href, onSelect: () => this.interactiveResult.select(), onBeginDelayedSelect: () => this.interactiveResult.beginDelayedSelect(), onCancelPendingSelect: () => this.interactiveResult.cancelPendingSelect(), attributes: this.linkAttributes, stopPropagation: this.stopPropagation }, this.hasDefaultSlot ? (h("slot", null)) : (h("atomic-result-text", { field: "title", default: "no-title" }))));
+        return (h(LinkWithItemAnalytics, { key: '893426e32ef773352ce0dec5e005d12d37d35a67', href: href, onSelect: () => this.interactiveResult.select(), onBeginDelayedSelect: () => this.interactiveResult.beginDelayedSelect(), onCancelPendingSelect: () => this.interactiveResult.cancelPendingSelect(), attributes: this.linkAttributes, stopPropagation: this.stopPropagation }, this.hasDefaultSlot ? (h("slot", null)) : (h("atomic-result-text", { field: "title", default: "no-title" }))));
     }
     get host() { return this; }
     static get style() { return AtomicResultLinkStyle0; }

package/dist/atomic/components/atomic-result-list.js

@@ -194,7 +194,7 @@ const AtomicResultList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
     render() {
         this.resultListCommon.updateBreakpoints();
         const listClasses = this.computeListDisplayClasses();
-        return (h(TabGuard, { key: 'c8bd3a5065ff97ce7a952136148f8911c0646241', tabsIncluded: this.tabsIncluded, tabsExcluded: this.tabsExcluded, activeTab: this.tabManagerState.activeTab }, h(ItemListGuard, { key: '58e2afbf54659fdeec08142608b06c51a945e63e', hasError: this.resultListState.hasError, hasTemplate: this.resultTemplateRegistered, templateHasError: this.itemTemplateProvider.hasError, firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, h(DisplayWrapper, { key: 'cba563bde2211417cd442612b68da46a6fd91da6', display: this.display, listClasses: listClasses }, h(ResultsPlaceholdersGuard, { key: '6c2e1563c7c1cb61ed9a5ea9713692eac2203cec', density: this.density, display: this.display, imageSize: this.imageSize, displayPlaceholders: !this.isAppLoaded, numberOfPlaceholders: this.resultsPerPageState.numberOfResults }), h(ItemDisplayGuard, { key: 'f8df79560be2722dea3f93291d01af5bd4063355', firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, this.display === 'table'
+        return (h(TabGuard, { key: '2a166d26e6ce4887d1ed43ea5041110a277f8d06', tabsIncluded: this.tabsIncluded, tabsExcluded: this.tabsExcluded, activeTab: this.tabManagerState.activeTab }, h(ItemListGuard, { key: '3c0a5e6697a02832a65a5ec3e70414184133062b', hasError: this.resultListState.hasError, hasTemplate: this.resultTemplateRegistered, templateHasError: this.itemTemplateProvider.hasError, firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, h(DisplayWrapper, { key: 'e54764caa5d90956732ed083af7b9cebb47c6eb4', display: this.display, listClasses: listClasses }, h(ResultsPlaceholdersGuard, { key: '379a10c62c510e78d4b2ce4a27670a54e33470a1', density: this.density, display: this.display, imageSize: this.imageSize, displayPlaceholders: !this.isAppLoaded, numberOfPlaceholders: this.resultsPerPageState.numberOfResults }), h(ItemDisplayGuard, { key: '6f86f55ec045b323dd2419ff7343c29de7afadfe', firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, this.display === 'table'
             ? this.renderAsTable()
             : this.display === 'grid'
                 ? this.renderAsGrid()

package/dist/atomic/components/atomic-search-box-query-suggestions2.js

@@ -60,7 +60,7 @@ const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: 'b7f0f317531dd0e08a7e389be6a7747723c82afe', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: '60fd04f52305a72133a2cf04e70ce0b1c489c10d', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-search-box-recent-queries2.js

@@ -154,7 +154,7 @@ const AtomicSearchBoxRecentQueries = /*@__PURE__*/ proxyCustomElement(class Atom
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: 'fafce4d4a34702333eb4e0ae06268dcd74e1a4de', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: '9a6efb2a4483b2a1924418e9b52cc94164b4c8e4', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

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

@@ -427,18 +427,18 @@ const AtomicSearchBox$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBox
         if (!this.suggestionManager.suggestions.length) {
             this.registerSearchboxSuggestionEvents();
         }
-        return (h(Host, { key: 'e673924012a96982e2192bff295cf34aa655a501' }, this.renderAbsolutePositionSpacer(), [
-            h(SearchBoxWrapper, { key: '8f64a9cffffa08b76451ebbd94d41da7bb881745', disabled: isDisabled, onFocusout: (event) => {
+        return (h(Host, { key: '14bd784f74d5cfcbcb82136d6f8e6bc2aa4e2815' }, this.renderAbsolutePositionSpacer(), [
+            h(SearchBoxWrapper, { key: '5d13e6bcdb5c27f5f169a7881eb471f431d86a51', disabled: isDisabled, onFocusout: (event) => {
                     if (!isFocusingOut(event)) {
                         return;
                     }
                     this.suggestionManager.clearSuggestions();
                     this.isExpanded = false;
-                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '87a6f42ed17e2702d2639a9736cd6b5f0a81dc69', bindings: this.bindings, disabled: isDisabled, onClick: () => {
+                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '105c32ac0b57202156661fcbb2b82722ca357ea7', bindings: this.bindings, disabled: isDisabled, onClick: () => {
                     this.searchBox.submit();
                     this.suggestionManager.clearSuggestions();
                 } }), this.renderSuggestions()),
-            !this.suggestionManager.suggestions.length && (h("slot", { key: '4c22cf98d0755b254b2b145f6d0b8de3dbfdf806' }, h("atomic-search-box-recent-queries", { key: '4597ef3851f94c5c1663ad01cd79dcce204b3bd5' }), h("atomic-search-box-query-suggestions", { key: '03b1d923f115c3094f173ffbb721823c99bf3538' }))),
+            !this.suggestionManager.suggestions.length && (h("slot", { key: 'ceb85736ad1c30d088fa8e828134237a543dd908' }, h("atomic-search-box-recent-queries", { key: 'a3f0dfc0ac6f6177a20e8e6e5a4fbcc688b63a40' }), h("atomic-search-box-query-suggestions", { key: '7cf5f99564c9ed776d114cc4d75cbc75e44efa71' }))),
         ]));
     }
     get host() { return this; }

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: 'ff0f12e874b6592cf5a74cae4409acfb8941ebd8', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: 'ce80041352e0e5e30ee3d29a4e2200005969c5d0', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '783c923a5c70fe1e45e3642a9d8def008ccc8380', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '57db560b4726cd44b608c0a60815af4c0e1095c4', 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: 'a0cf5aeda0d5ddb9e897c93f91e80f92454c9e4f', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: 'a24f8d4ab805d17086f7de7702fbe9e2709208b0', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'f1329b3299fad8a6987c83d79ee5676ac2b80500', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: 'c0630d7e8c086001530649d6e45aa44e862ae5f3', 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: '984fea3d478ea842f64d89f1f160842d53306bce', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '986c0413997a20a48eb11b22363e477c75ea5396', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '9d71e67a52776a08b97a80b22e1078ea0086fd6c', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '60a0d8d350aef37f9df02c267f11de297c805703', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

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

@@ -117,8 +117,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: '9d7eccadd402f414c15b4f59240ad538700eb6e7', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '1afc1c9eeca2b98a3110a5f96de386b2794d25e8' }, h(SortLabel, { key: '9f9a0516b1626bace24fc64393c14fc7beee4565', i18n: i18n, id: id }), h(SortSelect, { key: '87bf9cd08af5825f3da9939b330598b11c8b72a7', 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: '04ef7b37fda4dddc2854cd82fa13f4af71e9bc60' }),
+            h(SortGuard, { key: '6bcf83c0920b696573d396e22f2d914cc1537022', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '07a9afdfc2b3ccab21f4e3b11c535be4f1434d2e' }, h(SortLabel, { key: 'e934aa217d8b46af88c7911cfa9bde8a24c70b42', i18n: i18n, id: id }), h(SortSelect, { key: '6d9e56ae34355b2d8f194845bf1549b92ca82304', 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: '04455925e05235d7c024831ff217ca9aca774557' }),
         ];
     }
     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: '745dd01b0ba0c5b66e60ef9b8c8d66b46658f356', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '448c1638e4cd2601aaaf0c133fcf1f7810dd7b30', element: this.host, error: error }));
         }
     }
     get host() { return this; }

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

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: '3a0098efb8c3ff5e6e6ac138d65de8cf096c01d4' }, h("atomic-tab-bar", { key: 'c91cc8a029aedd95de3998cda1b80cda700f8a9c' }, h("div", { key: '725af9ffa07ec17dc0e59796e377559be25291b6', 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: '4ea1e2534d1a02ca62d7ac6ec6462252e3d562ee' }, h("atomic-tab-bar", { key: '98896c96e0599094edee87021c10c9fe6fbf3ab0' }, h("div", { key: '2087916e6bda8851a9296a194bbe0cdca44e6330', 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-category-facet/atomic-commerce-category-facet.js

@@ -19,9 +19,9 @@ import { renderFacetValuesGroup } from "../../common/facets/facet-values-group/f
 import { booleanConverter } from "../../../converters/boolean-converter";
 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 { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
 import { getFieldValueCaption } from "../../../utils/field-utils";
 import { renderCategoryFacetAllCategoryButton } from '../../common/facets/category-facet/all-categories-button';
@@ -74,7 +74,7 @@ import styles from './atomic-commerce-category-facet.tw.css';
  * @part show-more-less-icon - The icons of the "Show more" and "Show less" buttons.
  *
  */
-let AtomicCommerceCategoryFacet = class AtomicCommerceCategoryFacet extends LitElement {
+let AtomicCommerceCategoryFacet = class AtomicCommerceCategoryFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -403,7 +403,6 @@ __decorate([
 ], AtomicCommerceCategoryFacet.prototype, "render", null);
 AtomicCommerceCategoryFacet = __decorate([
     customElement('atomic-commerce-category-facet'),
-    bindings(),
     withTailwindStyles
 ], AtomicCommerceCategoryFacet);
 export { AtomicCommerceCategoryFacet };

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

@@ -18,9 +18,9 @@ import { renderFacetValuesGroup } from "../../common/facets/facet-values-group/f
 import { booleanConverter } from "../../../converters/boolean-converter";
 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";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
 import { announceFacetSearchResultsWithAriaLive } from '../../common/facets/facet-search/facet-search-aria-live';
 import { shouldDisplaySearchResults, shouldUpdateFacetSearchComponent, } from '../../common/facets/facet-search/facet-search-utils';
@@ -58,7 +58,7 @@ import styles from './atomic-commerce-facet.tw.css';
  * @part show-less - The show less results button.
  * @part show-more-less-icon - The icons of the show more & show less buttons.
  */
-let AtomicCommerceFacet = class AtomicCommerceFacet extends LitElement {
+let AtomicCommerceFacet = class AtomicCommerceFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -71,7 +71,7 @@ let AtomicCommerceFacet = class AtomicCommerceFacet extends LitElement {
         this.validateFacet();
         this.initFocusTargets();
         this.ensureSubscribed();
-        this.facet && this.initAriaLive();
+        this.initAriaLive();
     }
     disconnectedCallback() {
         this.unsubscribeFacetController?.();
@@ -318,7 +318,6 @@ __decorate([
 ], AtomicCommerceFacet.prototype, "render", null);
 AtomicCommerceFacet = __decorate([
     customElement('atomic-commerce-facet'),
-    bindings(),
     withTailwindStyles
 ], AtomicCommerceFacet);
 export { AtomicCommerceFacet };

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

@@ -14,6 +14,7 @@ import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { shouldDisplayInputForFacetRange } from '../../common/facets/facet-common';
 import { renderFacetContainer } from '../../common/facets/facet-container/facet-container';
@@ -21,7 +22,6 @@ import { renderFacetHeader } from '../../common/facets/facet-header/facet-header
 import { renderNumericFacetValue } from '../../common/facets/numeric-facet/value-link';
 import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
 import '../atomic-commerce-facet-number-input/atomic-commerce-facet-number-input';
-import { bindings } from "../../../decorators/bindings";
 import styles from './atomic-commerce-numeric-facet.tw.css';
 /**
  * The `atomic-commerce-numeric-facet` component renders a commerce facet that allows the user to filter products using numeric ranges.
@@ -43,7 +43,7 @@ import styles from './atomic-commerce-numeric-facet.tw.css';
  * @part input-end - The input field to enter the maximum numeric value.
  * @part input-apply-button - The button to apply custom numeric range values.
  */
-let AtomicCommerceNumericFacet = class AtomicCommerceNumericFacet extends LitElement {
+let AtomicCommerceNumericFacet = class AtomicCommerceNumericFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -225,7 +225,6 @@ __decorate([
 ], AtomicCommerceNumericFacet.prototype, "render", null);
 AtomicCommerceNumericFacet = __decorate([
     customElement('atomic-commerce-numeric-facet'),
-    bindings(),
     withTailwindStyles
 ], AtomicCommerceNumericFacet);
 export { AtomicCommerceNumericFacet };

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

@@ -18,10 +18,10 @@ import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { parseDate } from "../../../utils/date-utils";
 import '../../common/atomic-facet-date-input/atomic-facet-date-input';
-import { bindings } from "../../../decorators/bindings";
 import { shouldDisplayInputForFacetRange } from '../../common/facets/facet-common';
 import styles from './atomic-commerce-timeframe-facet.tw.css';
 /**
@@ -43,7 +43,7 @@ import styles from './atomic-commerce-timeframe-facet.tw.css';
  * @part input-end - The end date input field.
  * @part input-apply-button - The button to apply date range selection.
  */
-let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends LitElement {
+let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -258,7 +258,6 @@ __decorate([
 ], AtomicCommerceTimeframeFacet.prototype, "render", null);
 AtomicCommerceTimeframeFacet = __decorate([
     customElement('atomic-commerce-timeframe-facet'),
-    bindings(),
     withTailwindStyles
 ], AtomicCommerceTimeframeFacet);
 export { AtomicCommerceTimeframeFacet };

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

@@ -11,9 +11,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { renderButton } from "../button";
 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 { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { parseDate } from "../../../utils/date-utils";
 /**
  * Internal component made to be integrated in a TimeframeFacet.
@@ -23,13 +23,12 @@ import { parseDate } from "../../../utils/date-utils";
  *
  * @internal
  */
-let AtomicFacetDateInput = class AtomicFacetDateInput extends LitElement {
+let AtomicFacetDateInput = class AtomicFacetDateInput extends InitializeBindingsMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.startRef = createRef();
         this.endRef = createRef();
     }
-    initialize() { }
     connectedCallback() {
         super.connectedCallback();
         this.validateParentComponent();
@@ -219,7 +218,6 @@ __decorate([
 ], AtomicFacetDateInput.prototype, "render", null);
 AtomicFacetDateInput = __decorate([
     customElement('atomic-facet-date-input'),
-    bindings(),
     withTailwindStyles
 ], AtomicFacetDateInput);
 export { AtomicFacetDateInput };

package/dist/atomic/components/components/search/atomic-results-per-page/atomic-results-per-page.js

@@ -0,0 +1,140 @@
+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 { buildResultsPerPage, buildSearchStatus, } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderFieldsetGroup } from "../../common/fieldset-group.js";
+import { createAppLoadedListener } from "../../common/interface/store.js";
+import { renderChoices } from "../../common/items-per-page/choices.js";
+import { ChoiceIsNaNError, InitialChoiceNotInChoicesError, } from "../../common/items-per-page/error.js";
+import { renderLabel } from "../../common/items-per-page/label.js";
+import { convertChoicesToNumbers, validateInitialChoice, } from "../../common/items-per-page/validate.js";
+import { renderPagerGuard } from "../../common/pager/pager-guard.js";
+import { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin.js";
+import { randomID } from "../../../utils/utils.js";
+/**
+ * The `atomic-results-per-page` component determines how many results to display per page.
+ *
+ * @part label - The "Results per page" label.
+ * @part buttons - The list of buttons.
+ * @part button - The result per page button.
+ * @part active-button - The active result per page button.
+ */
+let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.radioGroupName = randomID('atomic-results-per-page-');
+        this.isAppLoaded = false;
+        /**
+         * A list of choices for the number of results to display per page, separated by commas.
+         */
+        this.choicesDisplayed = '10,25,50,100';
+    }
+    initialize() {
+        try {
+            this.choices = convertChoicesToNumbers(this.choicesDisplayed);
+            this.initialChoice = this.initialChoice ?? this.choices[0];
+            validateInitialChoice(this.initialChoice, this.choices);
+        }
+        catch (error) {
+            if (error instanceof ChoiceIsNaNError ||
+                error instanceof InitialChoiceNotInChoicesError) {
+                this.bindings.engine.logger.error(error.message, this);
+                throw error;
+            }
+        }
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.resultPerPage = buildResultsPerPage(this.bindings.engine, {
+            initialState: { numberOfResults: this.initialChoice },
+        });
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    scrollToTopEvent() {
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get label() {
+        return this.bindings.i18n.t('results-per-page');
+    }
+    render() {
+        if (!this.searchStatusState) {
+            return html ``;
+        }
+        return html `
+      ${renderPagerGuard({
+            props: {
+                hasError: this.searchStatusState.hasError,
+                hasItems: this.searchStatusState.hasResults,
+                isAppLoaded: this.isAppLoaded,
+            },
+        })(html `
+        <div class="flex items-center" role="toolbar" aria-label=${this.label}>
+          ${renderLabel()(html `${this.label}`)}
+          ${renderFieldsetGroup({
+            props: {
+                label: this.label,
+            },
+        })(renderChoices({
+            props: {
+                label: this.label,
+                groupName: this.radioGroupName,
+                pageSize: this.resultPerPageState.numberOfResults,
+                choices: this.choices,
+                lang: this.bindings.i18n.language,
+                scrollToTopEvent: () => this.scrollToTopEvent(),
+                setItemSize: (size) => this.resultPerPage.set(size),
+                focusOnFirstResultAfterNextSearch: () => this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch(),
+                focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
+            },
+        }))}
+        </div>
+      `)}
+    `;
+    }
+};
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    bindStateToController('resultPerPage')
+], AtomicResultsPerPage.prototype, "resultPerPageState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicResultsPerPage.prototype, "searchStatusState", void 0);
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "isAppLoaded", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'choices-displayed' })
+], AtomicResultsPerPage.prototype, "choicesDisplayed", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'initial-choice' })
+], AtomicResultsPerPage.prototype, "initialChoice", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicResultsPerPage.prototype, "render", null);
+AtomicResultsPerPage = __decorate([
+    customElement('atomic-results-per-page'),
+    bindings(),
+    withTailwindStyles
+], AtomicResultsPerPage);
+export { AtomicResultsPerPage };

package/dist/atomic/components/components/search/atomic-search-interface/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
-export {};
+// Auto-generated file
+export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';

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

@@ -1,2 +1,4 @@
 // Auto-generated file
-export default {};
+export default {
+    'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+};

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.32.3-pre.d8ef4547c4",
+        version: "3.32.3-pre.dd35907a82",
         headlessVersion,
     };
 }

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

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCjCa,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;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","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 {Product} from '@coveo/headless/commerce';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for product template components.\n * This allows the Stencil component to fetch the current product from its rendered parent, the `atomic-product` component.\n *\n * Example:\n * ```\n * @ProductContext() private product!: Product;\n * ```\n *\n * For more information and examples, view the [Utilities section](https://github.com/coveo/ui-kit/tree/master/packages/atomic#utilities) of the Coveo Atomic README.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `createProductContextController` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function ProductContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-product', folded: opts.folded});\n}\n\nexport function InteractiveProductContext() {\n  return InteractiveItemContext();\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method 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 method 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 *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\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 type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCjCa,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;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","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 {Product} from '@coveo/headless/commerce';\nimport {\n  InteractiveItemContext,\n  InteractiveItemContextEvent,\n  ItemContext,\n  ItemContextEvent,\n  itemContext,\n} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * A [StencilJS property decorator](https://stenciljs.com/) to be used for product template components.\n * This allows the Stencil component to fetch the current product from its rendered parent, the `atomic-product` component.\n *\n * Example:\n * ```\n * @ProductContext() private product!: Product;\n * ```\n *\n * For more information and examples, view the [Utilities section](https://github.com/coveo/ui-kit/tree/master/packages/atomic#utilities) of the Coveo Atomic README.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `createProductContextController` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function ProductContext(opts: {folded: boolean} = {folded: false}) {\n  return ItemContext({parentName: 'atomic-product', folded: opts.folded});\n}\n\nexport function InteractiveProductContext() {\n  return InteractiveItemContext();\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent = InteractiveItemContextEvent;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method 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 method 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 *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\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 type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\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/stencil-button.js

@@ -1,7 +1,47 @@
 import { h } from '@stencil/core/internal/client';
-import { c as createRipple } from './ripple.js';
+import { l as listenOnce } from './event-utils.js';
 import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
 
+const RIPPLE = 'ripple';
+function getAnimationDurationInMilliseconds(radiusPixels) {
+    // A 318px wide button has a duration of 700ms.
+    return Math.cbrt(radiusPixels) * 129.21;
+}
+function setPositionRelativeIfStatic(element) {
+    if (getComputedStyle(element).position === 'static') {
+        element.classList.add('ripple-relative');
+    }
+}
+async function createRipple(event, options) {
+    const button = options.parent ?? event.currentTarget;
+    const existingRipple = button.getElementsByClassName(RIPPLE)[0];
+    existingRipple?.remove();
+    button.classList.add('ripple-parent');
+    setPositionRelativeIfStatic(button);
+    Array.from(button.children).forEach(setPositionRelativeIfStatic);
+    const ripple = document.createElement('span');
+    ripple.classList.add(RIPPLE);
+    ripple.style.backgroundColor = `var(--atomic-${options.color})`;
+    ripple.setAttribute('part', RIPPLE);
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+    const animationDuration = getAnimationDurationInMilliseconds(radius);
+    const { top, left } = button.getBoundingClientRect();
+    ripple.style.width = ripple.style.height = `${diameter}px`;
+    ripple.style.left = `${event.clientX - (left + radius)}px`;
+    ripple.style.top = `${event.clientY - (top + radius)}px`;
+    ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);
+    button.prepend(ripple);
+    await cleanupAnimationOnFinish(ripple, animationDuration);
+}
+async function cleanupAnimationOnFinish(ripple, animationDuration) {
+    listenOnce(ripple, 'animationend', () => {
+        ripple?.remove();
+    });
+    // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.
+    setTimeout(() => ripple?.remove(), animationDuration + animationDuration * 0.1);
+}
+
 /**
  * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead
  */
@@ -41,6 +81,6 @@ const Button = (props, children) => {
         children));
 };
 
-export { Button as B };
+export { Button as B, createRipple as c };
 
 //# sourceMappingURL=stencil-button.js.map