@coveo/atomic 3.33.8-pre.351575b812 → 3.33.8-pre.3524c75f47

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

@@ -24,11 +24,11 @@ import { renderLoadMoreSummary } from '../../common/load-more/summary';
  * @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 progress-bar - The progress bar displaying a percentage of products shown over the total number of products available.
  * @part load-more-results-button - The "Load more products" button.
  *
- * @cssprop --atomic-more-results-progress-bar-color-from - Color of the start of the gradient for the load more results progress bar.
- * @cssprop --atomic-more-results-progress-bar-color-to - Color of the end of the gradient for the load more results progress bar.
+ * @cssprop --atomic-more-results-progress-bar-color-from - Color of the start of the gradient for the load more products progress bar.
+ * @cssprop --atomic-more-results-progress-bar-color-to - Color of the end of the gradient for the load more products progress bar.
  */
 let AtomicCommerceLoadMoreProducts = class AtomicCommerceLoadMoreProducts extends LitElement {
     constructor() {

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

@@ -33,7 +33,7 @@ import numericFacetCommonStyles from '../../common/facets/numeric-facet-common.t
  * @part clear-button-icon - The icon displayed in the clear button.
  * @part values - The list container for all facet values.
  * @part value-label - The text label for individual facet values.
- * @part value-count - The count indicator showing the number of results for each value.
+ * @part value-count - The count indicator showing the number of products for each value.
  * @part value-checkbox-label - The label associated with facet value checkboxes.
  * @part value-exclude-button - The button to exclude specific facet values.
  * @part input-form - The form container for numeric range inputs.

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

@@ -22,7 +22,7 @@ import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, render
 import { renderPagerNavigation } from '../../common/pager/pager-navigation';
 import { getCurrentPagesRange } from './commerce-pager-utils';
 /**
- * The `atomic-commerce-pager` component enables users to navigate through paginated product results.
+ * The `atomic-commerce-pager` component enables users to navigate through paginated products.
  *
  * @part buttons - The list of all buttons rendered by the component.
  * @part page-buttons - The list of all page buttons.

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

@@ -37,7 +37,7 @@ let AtomicCommerceQuerySummary = class AtomicCommerceQuerySummary extends LitEle
         this.listingOrSearchSummary = controller.summary();
     }
     render() {
-        const { firstProduct, firstRequestExecuted, lastProduct, totalNumberOfProducts, hasProducts, hasError, } = this.listingOrSearchSummaryState;
+        const { firstProduct, firstRequestExecuted, lastProduct, totalNumberOfProducts, hasProducts, hasError, isLoading, } = this.listingOrSearchSummaryState;
         const { i18nKey, highlights, ariaLiveMessage } = getProductQuerySummaryI18nParameters({
             first: firstProduct,
             last: lastProduct,
@@ -46,7 +46,7 @@ let AtomicCommerceQuerySummary = class AtomicCommerceQuerySummary extends LitEle
                 : '',
             total: totalNumberOfProducts,
             i18n: this.bindings.i18n,
-            isLoading: false,
+            isLoading,
         });
         this.ariaMessage.message = ariaLiveMessage;
         return html `${renderQuerySummaryGuard({

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

@@ -50,6 +50,9 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
          *
          */
         this.iconAssetsPath = './assets';
+        // TODO - KIT-4994: Add disableAnalytics property that defaults to false.
+        // TODO - KIT-4994: Deprecate in favor of disableAnalytics property.
+        // TODO - (v4) KIT-4990: Remove.
         /**
          * Whether to enable analytics.
          */
@@ -104,13 +107,15 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             return;
         }
         language && this.interfaceController.onLanguageChange(language);
-        const { setContext } = loadContextActions(this.engine);
-        this.engine.dispatch(setContext({
-            ...this.context.state,
-            ...(language && { language }),
-            ...(country && { country }),
-            ...(currency && { currency }),
-        }));
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
     }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
@@ -118,6 +123,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    // TODO - (v4) KIT-4365: Remove.
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) ||
             !this.language ||
@@ -150,7 +156,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             this.i18Initialized,
         ]);
         this.initContext();
-        this.language && this.updateLanguage();
+        this.updateLanguage();
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
@@ -167,9 +173,18 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         };
     }
     initLanguage() {
-        if (!this.language) {
-            this.interfaceController.onLanguageChange(this.context.state.language);
+        if (!this.context || this.language) {
+            return;
+        }
+        this.interfaceController.onLanguageChange(this.context.state.language);
+    }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
         }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
     }
 };
 AtomicCommerceRecommendationInterface.styles = [

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

@@ -27,7 +27,7 @@ import { getSortByLabel, renderCommerceSortOption } from '../sort/option';
  * @part title - The title of the modal.
  * @part close-button - The button in the header that closes the modal.
  * @part close-icon - The icon of the close button.
- * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.
+ * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view the products.
  * @part footer-button - The button in the footer that closes the modal.
  * @part footer-button-text - The text inside the button in the footer that closes the modal.
  * @part footer-button-count - The count inside the button in the footer that closes the modal.
@@ -135,6 +135,7 @@ let AtomicCommerceRefineModal = class AtomicCommerceRefineModal extends LitEleme
         return html `${renderRefineModal({
             props: {
                 i18n: this.bindings.i18n,
+                i18nFooterButtonTextKey: 'view-products',
                 host: this,
                 isOpen: this.isOpen,
                 onClose: () => {

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

@@ -20,17 +20,18 @@ import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
 import { hasKeyboard, isMacOS } from "../../../utils/device-utils";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils";
+import { getDefaultSlotFromHost } from "../../../utils/slot-utils";
 import { isFocusingOut, once, randomID, spreadProperties, } from '../../../utils/utils';
 import { renderSearchBoxWrapper } from '../../common/search-box/search-box-wrapper';
 import { renderSearchBoxTextArea } from '../../common/search-box/search-text-area';
 import { renderSubmitButton } from '../../common/search-box/submit-button';
 import { SuggestionManager } from '../../common/suggestions/suggestion-manager';
-import { elementHasQuery, } from '../../common/suggestions/suggestions-common';
+import { elementHasQuery } from '../../common/suggestions/suggestions-utils';
 import '../atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products';
 import '../atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions';
 import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries';
 /**
- * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search results page.
+ * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search page.
  *
  * @slot default - The default slot where you can add child components to the search box.
  *
@@ -67,8 +68,8 @@ import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-
  * @part recent-query-title - The "recent searches" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
  * @part recent-query-clear - The "clear" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
  *
- * @part instant-results-item - An instant result rendered by an `atomic-commerce-search-box-instant-products` component.
- * @part instant-results-show-all - The clickable suggestion to show all items for the current instant results search rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-item - An instant product rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-show-all - The clickable suggestion to show all items for the current instant product search rendered by an `atomic-commerce-search-box-instant-products` component.
  * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-commerce-search-box-instant-products` component.
  *
  * @event redirect - Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
@@ -116,16 +117,13 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
         this.minimumQueryLength = 0;
         /**
          * Whether to clear all active query filters when the end user submits a new query from the search box.
-         * Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no results.
+         * Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no products.
          */
         this.clearFilters = true;
         this.updateBreakpoints = once(() => updateBreakpoints(this));
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.children.length === 0) {
-            this.replaceChildren(document.createElement('atomic-commerce-search-box-recent-queries'), document.createElement('atomic-commerce-search-box-query-suggestions'));
-        }
         this.addEventListener('atomic/searchBoxSuggestion/register', (event) => {
             const customEvent = event;
             this.searchBoxSuggestionEventsQueue.push(customEvent);
@@ -492,6 +490,14 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
       ></atomic-suggestion-renderer>
     `;
     }
+    renderSlotContent() {
+        const hasDefaultSlot = !!getDefaultSlotFromHost(this);
+        if (hasDefaultSlot) {
+            return html `<slot></slot>`;
+        }
+        return html `<atomic-commerce-search-box-recent-queries></atomic-commerce-search-box-recent-queries>
+      <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>`;
+    }
     render() {
         this.updateBreakpoints();
         if (!this.suggestionManager.suggestions.length) {
@@ -511,7 +517,7 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })(html `${this.renderTextBox()}
-        ${renderSubmitButton({
+      ${renderSubmitButton({
             props: {
                 i18n: this.bindings.i18n,
                 disabled: this.isSearchDisabledForEndUser,
@@ -521,7 +527,8 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })}
-        ${this.renderSuggestions()}`)}
+      ${this.renderSuggestions()}`)}
+      ${this.renderSlotContent()}
     `;
     }
 };

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

@@ -9,7 +9,7 @@ import { html, LitElement, nothing, render } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { getPartialInstantItemElement, getPartialInstantItemShowAllElement, renderInstantItemShowAllButton, } from "../../common/suggestions/instant-item";
-import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/suggestions-common";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { encodeForDomAttribute } from "../../../utils/string-utils";
@@ -19,7 +19,7 @@ import { ProductTemplateProvider } from '../product-list/product-template-provid
  *
  * This component is not supported on mobile.
  *
- * @part instant-results-show-all-button - The 'See all results' button.
+ * @part instant-results-show-all-button - The 'See all products' button.
  * @part instant-results-item - The individual instant product item.
  *
  * @slot default - The default slot where the instant products are rendered.
@@ -40,7 +40,7 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
         this.imageSize = 'icon';
     }
     /**
-     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering products.
      * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
      *
      * Do not use this method if you integrate Atomic in a plain HTML deployment.
@@ -86,7 +86,7 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
             const interactiveProduct = this.instantProducts.interactiveProduct({
                 options: { product },
             });
-            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-products-suggestion-label', this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
             const key = `instant-product-${encodeForDomAttribute(product.permanentid)}`;
             const template = html `${keyed(key, html `<atomic-product
             part="outline"
@@ -115,10 +115,13 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
             };
         });
         if (elements.length) {
-            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n, 'show-all-products');
             elements.push({
                 ...partialItem,
-                content: renderInstantItemShowAllButton({ i18n: this.bindings.i18n }),
+                content: renderInstantItemShowAllButton({
+                    i18n: this.bindings.i18n,
+                    i18nKey: 'show-all-products',
+                }),
                 onSelect: () => {
                     this.bindings.clearSuggestions();
                     this.bindings.searchBoxController.updateText(this.instantProducts.state.query);

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

@@ -8,7 +8,7 @@ import { loadQuerySuggestActions, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { getPartialSearchBoxSuggestionElement, renderQuerySuggestion, } from "../../common/suggestions/query-suggestions";
-import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/suggestions-common";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
 import { errorGuard } from "../../../decorators/error-guard";
 const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
 /**

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

@@ -12,7 +12,7 @@ import { SafeStorage, StorageItems } from "../../../utils/local-storage-utils";
 import { once } from "../../../utils/utils";
 const Clock = "<svg fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-linecap=\"round\"  viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"8\" cy=\"8\" r=\"7.5\"/><path d=\"m8.5 4.5v4\"/><path d=\"m10.3066 10.1387-1.80932-1.5768\"/></svg>";
 import { getPartialRecentQueryClearElement, getPartialRecentQueryElement, renderRecentQuery, renderRecentQueryClear, } from '../../common/suggestions/recent-queries';
-import { dispatchSearchBoxSuggestionsEvent, } from '../../common/suggestions/suggestions-common';
+import { dispatchSearchBoxSuggestionsEvent } from '../../common/suggestions/suggestions-events';
 /**
  * The `atomic-commerce-search-box-recent-queries` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of recent query suggestions.
  */

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

@@ -25,8 +25,8 @@ import { bindings } from "../../../decorators/bindings";
 import { shouldDisplayInputForFacetRange } from '../../common/facets/facet-common';
 import facetCommonStyles from '../../common/facets/facet-common.tw.css';
 /**
- * A facet is a list of values for a certain field occurring in the results.
- * An `atomic-commerce-timeframe-facet` displays a facet of the results for the current query as date intervals.
+ * A facet is a list of values for a certain field occurring in the products.
+ * An `atomic-commerce-timeframe-facet` displays a facet of the products for the current query as date intervals.
  *
  * @part facet - The wrapper for the entire facet.
  * @part label-button - The header button to expand/collapse the facet.
@@ -36,7 +36,7 @@ import facetCommonStyles from '../../common/facets/facet-common.tw.css';
  * @part values - The container for the facet values list.
  * @part value-link - A facet value button.
  * @part value-link-selected - A selected facet value button.
- * @part value-count - The result count for a facet value.
+ * @part value-count - The product count for a facet value.
  * @part value-label - The label text of a facet value.
  * @part input-label - The label for date input fields.
  * @part input-start - The start date input field.

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

@@ -24,7 +24,7 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
         /**
          * The product link to use when the product is clicked in a grid layout.
          *
-         * @default - An `atomic-result-link` without any customization.
+         * @default - An `atomic-product-link` without any customization.
          */
         this.linkContent = new DocumentFragment();
         /**

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

@@ -11,7 +11,7 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  * This section is meant to render child products, available when using the <atomic-product-children> component.
  *
  * Behavior:
- * * Shows children at the bottom of the result, indented and wrapped in a border.
+ * * Shows children at the bottom of the product, indented and wrapped in a border.
  *
  * @slot default - The child products to display.
  */

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

@@ -12,7 +12,7 @@ import { makeMatchConditions } from '../../common/product-template/product-templ
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
 import '../atomic-product/atomic-product';
 /**
- * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+ * * A product template determines the format of the products, depending on the conditions that are defined for each template.
  *
  * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
  *

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

@@ -9,6 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 import { booleanConverter } from "../../../converters/boolean-converter.js";
+import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
@@ -296,6 +297,7 @@ __decorate([
 ], AtomicModal.prototype, "watchToggleOpen", null);
 AtomicModal = __decorate([
     customElement('atomic-modal'),
+    bindings(),
     withTailwindStyles
 ], AtomicModal);
 export { AtomicModal };

package/dist/atomic/components/components/common/layout/layout-styles-controller.js

@@ -0,0 +1,40 @@
+import { randomID } from "../../../utils/utils";
+/**
+ * A reactive controller that manages dynamic layout styles.
+ */
+export class LayoutStylesController {
+    constructor(host, stylesBuilder, componentPrefix) {
+        this.dynamicStyleSheet = null;
+        this.host = host;
+        this.stylesBuilder = stylesBuilder;
+        this.componentPrefix = componentPrefix;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        if (!this.host.id) {
+            this.host.id = randomID(this.componentPrefix);
+        }
+        this.host.updateComplete.then(() => this.updateStyles());
+    }
+    /**
+     * Updates the dynamic styles based on the current mobile breakpoint
+     */
+    updateStyles() {
+        const parent = this.host.getRootNode();
+        const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+        if (!isDocumentOrShadowRoot) {
+            return;
+        }
+        const newStylesCSS = this.stylesBuilder(this.host, this.host.mobileBreakpoint);
+        if (!this.dynamicStyleSheet) {
+            this.dynamicStyleSheet = new CSSStyleSheet();
+            this.dynamicStyleSheet.replaceSync(newStylesCSS);
+            parent.adoptedStyleSheets = [
+                ...parent.adoptedStyleSheets,
+                this.dynamicStyleSheet,
+            ];
+            return;
+        }
+        this.dynamicStyleSheet.replaceSync(newStylesCSS);
+    }
+}

package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js

@@ -0,0 +1,26 @@
+/**
+ * A reactive controller that manages mobile breakpoint changes through event communication.
+ * This controller listens for 'atomic-layout-breakpoint-change' events and updates a store
+ * with the new breakpoint value.
+ */
+export class MobileBreakpointController {
+    constructor(host, store) {
+        this.host = host;
+        this.store = store;
+        this.eventListener = this.handleBreakpointChange.bind(this);
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    handleBreakpointChange(e) {
+        const customEvent = e;
+        const newBreakpoint = customEvent.detail?.breakpoint;
+        if (newBreakpoint && this.store.state.mobileBreakpoint !== newBreakpoint) {
+            this.store.state.mobileBreakpoint = newBreakpoint;
+        }
+    }
+}

package/dist/atomic/components/components/common/query-correction/trigger-correction.js

@@ -5,7 +5,7 @@ export const renderTriggerCorrection = ({ props, }) => {
     <p class="text-on-background text-lg leading-6" part="showing-results-for">
       ${localizedString({
         i18n: props.i18n,
-        key: 'showing-results-for',
+        key: props.i18nKeyShowingItemsFor,
         params: { query: html `<b part="highlight">${props.correctedQuery}</b>` },
     })}
     </p>

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

@@ -41,7 +41,7 @@ export const renderRefineModal = ({ props }) => (children) => {
             },
         })(html `
             <span part="footer-button-text" class="mr-1 truncate">
-              ${props.i18n.t('view-results')}
+              ${props.i18n.t(props.i18nFooterButtonTextKey)}
             </span>
             <span part="footer-button-count">
               ${localizedString({

package/dist/atomic/components/components/common/suggestions/instant-item.js

@@ -1,9 +1,9 @@
 import { html, render } from 'lit';
 import { encodeForDomAttribute } from '../../../utils/string-utils';
 import { getClassNameForButtonStyle } from '../button-style';
-export const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
+export const getPartialInstantItemElement = (i18n, i18nKey, itemTitle, itemUniqueId) => {
     return {
-        ariaLabel: i18n.t('instant-results-suggestion-label', {
+        ariaLabel: i18n.t(i18nKey, {
             title: itemTitle,
             interpolation: { escapeValue: false },
         }),
@@ -11,19 +11,19 @@ export const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
         part: 'instant-results-item',
     };
 };
-export const getPartialInstantItemShowAllElement = (i18n) => {
+export const getPartialInstantItemShowAllElement = (i18n, i18nKey) => {
     return {
         key: 'instant-results-show-all-button',
         part: 'instant-results-show-all',
-        ariaLabel: i18n.t('show-all-results'),
+        ariaLabel: i18n.t(i18nKey),
     };
 };
-export const renderInstantItemShowAllButton = ({ i18n, }) => {
+export const renderInstantItemShowAllButton = ({ i18n, i18nKey, }) => {
     const template = html `<div
     part="instant-results-show-all-button"
     class=${getClassNameForButtonStyle('text-primary')}
   >
-    ${i18n.t('show-all-results')}
+    ${i18n.t(i18nKey)}
   </div>`;
     const container = document.createElement('div');
     render(template, container);

package/dist/atomic/components/components/common/suggestions/suggestion-manager.js

@@ -2,7 +2,7 @@ import { isNullOrUndefined } from '@coveo/bueno';
 import DOMPurify from 'dompurify';
 import { debounce } from '../../../utils/debounce-utils';
 import { promiseTimeout } from '../../../utils/promise-utils';
-import { elementHasNoQuery, elementHasQuery, } from './suggestions-common';
+import { elementHasNoQuery, elementHasQuery } from './suggestions-utils';
 export class SuggestionManager {
     constructor(ownerSearchBoxProps) {
         this.ownerSearchBoxProps = ownerSearchBoxProps;

package/dist/atomic/components/components/common/suggestions/{suggestions-common.js → suggestions-events.js}

@@ -1,5 +1,21 @@
 import { closest } from '../../../utils/dom-utils';
 import { buildCustomEvent } from '../../../utils/event-utils';
+/**
+ * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.
+ *
+ * @param event Event sent from the registered query suggestions to the parent search box
+ * @param element Element on which to dispatch the event, which must be the child of a configured search box
+ * @param allowedSearchBoxElements Optional array of allowed search box element selectors
+ *
+ * @throws Error if the element is not a child of an allowed search box element
+ */
+export const dispatchSearchBoxSuggestionsEvent = (event, element, allowedSearchBoxElements = searchBoxElements) => {
+    const interfaceElement = closest(element, searchBoxElements.join(', '));
+    if (!interfaceElement) {
+        throw new Error(`The "${element.nodeName.toLowerCase()}" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(', ')}`);
+    }
+    void dispatchSearchBoxSuggestionsEventEventually(interfaceElement, element, event);
+};
 const searchBoxElements = [
     'atomic-search-box',
     'atomic-insight-search-box',
@@ -17,21 +33,3 @@ const dispatchSearchBoxSuggestionsEventEventually = async (interfaceElement, ele
     }
     element.dispatchEvent(buildCustomEvent('atomic/searchBoxSuggestion/register', event));
 };
-/**
- * Dispatches an event which retrieves the `SearchBoxSuggestionsBindings` on a configured parent search box.
- * @param event Event sent from the registered query suggestions to the parent search box.
- * @param element Element on which to dispatch the event, which must be the child of a configured search box.
- */
-export const dispatchSearchBoxSuggestionsEvent = (event, element, allowedSearchBoxElements = searchBoxElements) => {
-    const interfaceElement = closest(element, searchBoxElements.join(', '));
-    if (!interfaceElement) {
-        throw new Error(`The "${element.nodeName.toLowerCase()}" component was not handled, as it is not a child of the following elements: ${allowedSearchBoxElements.join(', ')}`);
-    }
-    void dispatchSearchBoxSuggestionsEventEventually(interfaceElement, element, event);
-};
-export function elementHasNoQuery(el) {
-    return !el.query || el.query.trim() === '';
-}
-export function elementHasQuery(el) {
-    return !!el.query && el.query.trim() !== '';
-}

package/dist/atomic/components/components/common/suggestions/suggestions-types.js

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

package/dist/atomic/components/components/common/suggestions/suggestions-utils.js

@@ -0,0 +1,18 @@
+/**
+ * Checks if a search box suggestion element has no query.
+ *
+ * @param el - The search box suggestion element to check
+ * @returns True if the element has no query or the query is whitespace-only
+ */
+export function elementHasNoQuery(el) {
+    return !el.query || el.query.trim() === '';
+}
+/**
+ * Checks if a search box suggestion element has a query.
+ *
+ * @param el - The search box suggestion element to check
+ * @returns True if the element has a non-empty, non-whitespace query
+ */
+export function elementHasQuery(el) {
+    return !!el.query && el.query.trim() !== '';
+}

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.33.8-pre.351575b812",
+        version: "3.33.8-pre.3524c75f47",
         headlessVersion,
     };
 }