@coveo/atomic-react 3.11.46 → 3.11.47

package/dist/cjs/commerce/atomic-react.cjs

@@ -9836,7 +9836,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.62.0",
+        version: "3.63.0",
         headlessVersion
     };
 }
@@ -9860,20 +9860,20 @@ function augmentAnalyticsConfigWithAtomicVersion() {
 const locales = {
     af: ()=>Promise.resolve().then(function () { return af$1; }),
     am: ()=>Promise.resolve().then(function () { return am$1; }),
-    'ar-IQ': ()=>Promise.resolve().then(function () { return arIq$1; }),
-    'ar-DZ': ()=>Promise.resolve().then(function () { return arDz$1; }),
-    'ar-KW': ()=>Promise.resolve().then(function () { return arKw$1; }),
-    'ar-LY': ()=>Promise.resolve().then(function () { return arLy$1; }),
-    'ar-MA': ()=>Promise.resolve().then(function () { return arMa$1; }),
-    'ar-SA': ()=>Promise.resolve().then(function () { return arSa$1; }),
-    'ar-TN': ()=>Promise.resolve().then(function () { return arTn$1; }),
+    'ar-iq': ()=>Promise.resolve().then(function () { return arIq$1; }),
+    'ar-dz': ()=>Promise.resolve().then(function () { return arDz$1; }),
+    'ar-kw': ()=>Promise.resolve().then(function () { return arKw$1; }),
+    'ar-ly': ()=>Promise.resolve().then(function () { return arLy$1; }),
+    'ar-ma': ()=>Promise.resolve().then(function () { return arMa$1; }),
+    'ar-sa': ()=>Promise.resolve().then(function () { return arSa$1; }),
+    'ar-tn': ()=>Promise.resolve().then(function () { return arTn$1; }),
     ar: ()=>Promise.resolve().then(function () { return ar$1; }),
     az: ()=>Promise.resolve().then(function () { return az$1; }),
     be: ()=>Promise.resolve().then(function () { return be$1; }),
     bg: ()=>Promise.resolve().then(function () { return bg$1; }),
     bi: ()=>Promise.resolve().then(function () { return bi$1; }),
     bm: ()=>Promise.resolve().then(function () { return bm$1; }),
-    'bn-BD': ()=>Promise.resolve().then(function () { return bnBd$1; }),
+    'bn-bd': ()=>Promise.resolve().then(function () { return bnBd$1; }),
     bn: ()=>Promise.resolve().then(function () { return bn$1; }),
     bo: ()=>Promise.resolve().then(function () { return bo$1; }),
     br: ()=>Promise.resolve().then(function () { return br$1; }),
@@ -9883,49 +9883,49 @@ const locales = {
     cv: ()=>Promise.resolve().then(function () { return cv$1; }),
     cy: ()=>Promise.resolve().then(function () { return cy$1; }),
     da: ()=>Promise.resolve().then(function () { return da$1; }),
-    'de-AT': ()=>Promise.resolve().then(function () { return deAt$1; }),
-    'de-CH': ()=>Promise.resolve().then(function () { return deCh$1; }),
+    'de-at': ()=>Promise.resolve().then(function () { return deAt$1; }),
+    'de-ch': ()=>Promise.resolve().then(function () { return deCh$1; }),
     de: ()=>Promise.resolve().then(function () { return de$1; }),
     dv: ()=>Promise.resolve().then(function () { return dv$1; }),
-    'en-AU': ()=>Promise.resolve().then(function () { return enAu$1; }),
+    'en-au': ()=>Promise.resolve().then(function () { return enAu$1; }),
     el: ()=>Promise.resolve().then(function () { return el$1; }),
-    'en-GB': ()=>Promise.resolve().then(function () { return enGb$1; }),
-    'en-IE': ()=>Promise.resolve().then(function () { return enIe$1; }),
-    'en-IL': ()=>Promise.resolve().then(function () { return enIl$1; }),
-    'en-IN': ()=>Promise.resolve().then(function () { return enIn$1; }),
-    'en-NZ': ()=>Promise.resolve().then(function () { return enNz$1; }),
-    'en-SG': ()=>Promise.resolve().then(function () { return enSg$1; }),
-    'en-TT': ()=>Promise.resolve().then(function () { return enTt$1; }),
-    'en-CA': ()=>Promise.resolve().then(function () { return enCa$1; }),
+    'en-gb': ()=>Promise.resolve().then(function () { return enGb$1; }),
+    'en-ie': ()=>Promise.resolve().then(function () { return enIe$1; }),
+    'en-il': ()=>Promise.resolve().then(function () { return enIl$1; }),
+    'en-in': ()=>Promise.resolve().then(function () { return enIn$1; }),
+    'en-nz': ()=>Promise.resolve().then(function () { return enNz$1; }),
+    'en-sg': ()=>Promise.resolve().then(function () { return enSg$1; }),
+    'en-tt': ()=>Promise.resolve().then(function () { return enTt$1; }),
+    'en-ca': ()=>Promise.resolve().then(function () { return enCa$1; }),
     en: ()=>Promise.resolve().then(function () { return en$1; }),
     eo: ()=>Promise.resolve().then(function () { return eo$1; }),
-    'es-MX': ()=>Promise.resolve().then(function () { return esMx$1; }),
-    'es-PR': ()=>Promise.resolve().then(function () { return esPr$1; }),
-    'es-US': ()=>Promise.resolve().then(function () { return esUs$1; }),
-    'es-DO': ()=>Promise.resolve().then(function () { return esDo$1; }),
+    'es-mx': ()=>Promise.resolve().then(function () { return esMx$1; }),
+    'es-pr': ()=>Promise.resolve().then(function () { return esPr$1; }),
+    'es-us': ()=>Promise.resolve().then(function () { return esUs$1; }),
+    'es-do': ()=>Promise.resolve().then(function () { return esDo$1; }),
     et: ()=>Promise.resolve().then(function () { return et$1; }),
     eu: ()=>Promise.resolve().then(function () { return eu$1; }),
     fa: ()=>Promise.resolve().then(function () { return fa$1; }),
     fi: ()=>Promise.resolve().then(function () { return fi$1; }),
-    'fr-CA': ()=>Promise.resolve().then(function () { return frCa$1; }),
-    'fr-CH': ()=>Promise.resolve().then(function () { return frCh$1; }),
+    'fr-ca': ()=>Promise.resolve().then(function () { return frCa$1; }),
+    'fr-ch': ()=>Promise.resolve().then(function () { return frCh$1; }),
     fr: ()=>Promise.resolve().then(function () { return fr$1; }),
     fo: ()=>Promise.resolve().then(function () { return fo$1; }),
     fy: ()=>Promise.resolve().then(function () { return fy$1; }),
     ga: ()=>Promise.resolve().then(function () { return ga$1; }),
     gd: ()=>Promise.resolve().then(function () { return gd$1; }),
     gl: ()=>Promise.resolve().then(function () { return gl$1; }),
-    'gom-LATN': ()=>Promise.resolve().then(function () { return gomLatn$1; }),
+    'gom-latn': ()=>Promise.resolve().then(function () { return gomLatn$1; }),
     gu: ()=>Promise.resolve().then(function () { return gu$1; }),
     he: ()=>Promise.resolve().then(function () { return he$1; }),
     hi: ()=>Promise.resolve().then(function () { return hi$1; }),
     hr: ()=>Promise.resolve().then(function () { return hr$1; }),
     ht: ()=>Promise.resolve().then(function () { return ht$1; }),
     hu: ()=>Promise.resolve().then(function () { return hu$1; }),
-    'hy-AM': ()=>Promise.resolve().then(function () { return hyAm$1; }),
+    'hy-am': ()=>Promise.resolve().then(function () { return hyAm$1; }),
     id: ()=>Promise.resolve().then(function () { return id$1; }),
     is: ()=>Promise.resolve().then(function () { return is$1; }),
-    'it-CH': ()=>Promise.resolve().then(function () { return itCh$1; }),
+    'it-ch': ()=>Promise.resolve().then(function () { return itCh$1; }),
     it: ()=>Promise.resolve().then(function () { return it$1; }),
     jv: ()=>Promise.resolve().then(function () { return jv$1; }),
     ka: ()=>Promise.resolve().then(function () { return ka$1; }),
@@ -9945,7 +9945,7 @@ const locales = {
     ml: ()=>Promise.resolve().then(function () { return ml$1; }),
     mn: ()=>Promise.resolve().then(function () { return mn$1; }),
     mr: ()=>Promise.resolve().then(function () { return mr$1; }),
-    'ms-MY': ()=>Promise.resolve().then(function () { return msMy$1; }),
+    'ms-my': ()=>Promise.resolve().then(function () { return msMy$1; }),
     ms: ()=>Promise.resolve().then(function () { return ms$1; }),
     mt: ()=>Promise.resolve().then(function () { return mt$1; }),
     lo: ()=>Promise.resolve().then(function () { return lo$1; }),
@@ -9953,11 +9953,11 @@ const locales = {
     nb: ()=>Promise.resolve().then(function () { return nb$1; }),
     ne: ()=>Promise.resolve().then(function () { return ne$1; }),
     nl: ()=>Promise.resolve().then(function () { return nl$1; }),
-    'nl-BE': ()=>Promise.resolve().then(function () { return nlBe$1; }),
+    'nl-be': ()=>Promise.resolve().then(function () { return nlBe$1; }),
     nn: ()=>Promise.resolve().then(function () { return nn$1; }),
-    'pa-IN': ()=>Promise.resolve().then(function () { return paIn$1; }),
+    'pa-in': ()=>Promise.resolve().then(function () { return paIn$1; }),
     pl: ()=>Promise.resolve().then(function () { return pl$1; }),
-    'pt-BR': ()=>Promise.resolve().then(function () { return ptBr$1; }),
+    'pt-br': ()=>Promise.resolve().then(function () { return ptBr$1; }),
     pt: ()=>Promise.resolve().then(function () { return pt$1; }),
     rn: ()=>Promise.resolve().then(function () { return rn$1; }),
     ro: ()=>Promise.resolve().then(function () { return ro$1; }),
@@ -9969,12 +9969,12 @@ const locales = {
     si: ()=>Promise.resolve().then(function () { return si$1; }),
     sk: ()=>Promise.resolve().then(function () { return sk$1; }),
     sl: ()=>Promise.resolve().then(function () { return sl$1; }),
-    'oc-LNC': ()=>Promise.resolve().then(function () { return ocLnc$1; }),
+    'oc-lnc': ()=>Promise.resolve().then(function () { return ocLnc$1; }),
     sq: ()=>Promise.resolve().then(function () { return sq$1; }),
-    'sr-CYRL': ()=>Promise.resolve().then(function () { return srCyrl$1; }),
+    'sr-cyrl': ()=>Promise.resolve().then(function () { return srCyrl$1; }),
     sr: ()=>Promise.resolve().then(function () { return sr$1; }),
     ss: ()=>Promise.resolve().then(function () { return ss$1; }),
-    'sv-FI': ()=>Promise.resolve().then(function () { return svFi$1; }),
+    'sv-fi': ()=>Promise.resolve().then(function () { return svFi$1; }),
     sv: ()=>Promise.resolve().then(function () { return sv$1; }),
     sw: ()=>Promise.resolve().then(function () { return sw$1; }),
     ta: ()=>Promise.resolve().then(function () { return ta$1; }),
@@ -9982,42 +9982,56 @@ const locales = {
     tet: ()=>Promise.resolve().then(function () { return tet$1; }),
     tg: ()=>Promise.resolve().then(function () { return tg$1; }),
     th: ()=>Promise.resolve().then(function () { return th$1; }),
-    'tl-PH': ()=>Promise.resolve().then(function () { return tlPh$1; }),
+    'tl-ph': ()=>Promise.resolve().then(function () { return tlPh$1; }),
     tlh: ()=>Promise.resolve().then(function () { return tlh$1; }),
     tr: ()=>Promise.resolve().then(function () { return tr$1; }),
     tzl: ()=>Promise.resolve().then(function () { return tzl$1; }),
     tzm: ()=>Promise.resolve().then(function () { return tzm$1; }),
-    'ug-CN': ()=>Promise.resolve().then(function () { return ugCn$1; }),
+    'ug-cn': ()=>Promise.resolve().then(function () { return ugCn$1; }),
     uk: ()=>Promise.resolve().then(function () { return uk$1; }),
     tk: ()=>Promise.resolve().then(function () { return tk$1; }),
     ur: ()=>Promise.resolve().then(function () { return ur$1; }),
-    'uz-LATN': ()=>Promise.resolve().then(function () { return uzLatn$1; }),
+    'uz-latn': ()=>Promise.resolve().then(function () { return uzLatn$1; }),
     uz: ()=>Promise.resolve().then(function () { return uz$1; }),
     vi: ()=>Promise.resolve().then(function () { return vi$1; }),
-    'x-PSEUDO': ()=>Promise.resolve().then(function () { return xPseudo$1; }),
-    'tzm-LATN': ()=>Promise.resolve().then(function () { return tzmLatn$1; }),
+    'x-pseudo': ()=>Promise.resolve().then(function () { return xPseudo$1; }),
+    'tzm-latn': ()=>Promise.resolve().then(function () { return tzmLatn$1; }),
     yo: ()=>Promise.resolve().then(function () { return yo$1; }),
-    'zh-CN': ()=>Promise.resolve().then(function () { return zhCn$1; }),
-    'zh-HK': ()=>Promise.resolve().then(function () { return zhHk$1; }),
-    'zh-TW': ()=>Promise.resolve().then(function () { return zhTw$1; }),
+    'zh-cn': ()=>Promise.resolve().then(function () { return zhCn$1; }),
+    'zh-hk': ()=>Promise.resolve().then(function () { return zhHk$1; }),
+    'zh-tw': ()=>Promise.resolve().then(function () { return zhTw$1; }),
     zh: ()=>Promise.resolve().then(function () { return zh$1; })
 };
 
 const warn = (language)=>console.warn(`Cannot load dayjs locale file for "${language}"`);
-const resolveLanguage = (languageInput)=>{
-    if (locales[languageInput]) return languageInput;
-    if (languageInput.includes('-')) {
-        const regionlessLanguage = languageInput.split('-')[0];
-        if (locales[regionlessLanguage]) return regionlessLanguage;
+const getCandidateLocales = (languageInput)=>{
+    try {
+        const { language, script, region } = new Intl.Locale(languageInput);
+        return [
+            languageInput,
+            ...region ? [
+                `${language}-${region}`
+            ] : [],
+            ...script ? [
+                `${language}-${script}`
+            ] : [],
+            language
+        ];
+    } catch  {
+        return [
+            languageInput,
+            languageInput.split('-')[0]
+        ];
     }
-    return languageInput;
 };
-function loadDayjsLocale(languageInput) {
+const resolveLanguage = (languageInput)=>getCandidateLocales(languageInput).map((locale)=>locale.toLowerCase()).find((locale)=>Object.hasOwn(locales, locale)) ?? languageInput;
+async function loadDayjsLocale(languageInput) {
     const language = resolveLanguage(languageInput);
     if (!locales[language]) return void warn(language);
     try {
-        locales[language]().then(()=>dayjs.locale(language));
-    } catch (_) {
+        await locales[language]();
+        dayjs.locale(language);
+    } catch  {
         warn(language);
     }
 }
@@ -10404,9 +10418,13 @@ function i18nBackendOptions(atomicInterface) {
         }
     };
 }
-function loadTranslations(atomicInterface, language) {
+async function loadTranslations(atomicInterface, language) {
+    const { languageUtils } = atomicInterface.i18n.services;
+    const languages = languageUtils.toResolveHierarchy(languageUtils.formatLanguageCode(language), false);
+    await Promise.all(languages.filter(isI18nLocaleAvailable).map((lng)=>loadTranslationBundle(atomicInterface, lng)));
+}
+function loadTranslationBundle(atomicInterface, lng) {
     const { i18n } = atomicInterface;
-    const lng = language.split('-')[0];
     return new Promise((resolve)=>{
         new Backend(i18n.services, i18nBackendOptions(atomicInterface)).read(lng, i18nTranslationNamespace, (_error, data)=>{
             if (data) i18n.addResourceBundle(lng, i18nTranslationNamespace, data, true, false);
@@ -10621,8 +10639,10 @@ class InterfaceController {
         this.host.updateIconAssetsPath();
         initEngine();
         if (this.host.registerFieldsToInclude) this.host.registerFieldsToInclude();
-        loadDayjsLocale(this.host.language || 'en');
-        await this.i18nPromise;
+        await Promise.all([
+            this.i18nPromise,
+            loadDayjsLocale(this.host.language || 'en')
+        ]);
         this.initComponents();
     }
     onAnalyticsChange() {
@@ -10635,8 +10655,10 @@ class InterfaceController {
         const language = newLanguage ?? this.host.language;
         const languageWithFallback = language ?? 'en';
         const { i18n } = this.host;
-        loadDayjsLocale(languageWithFallback);
-        loadTranslations(this.host, languageWithFallback).then(()=>{
+        Promise.all([
+            loadDayjsLocale(languageWithFallback),
+            loadTranslations(this.host, languageWithFallback)
+        ]).then(()=>{
             i18n.changeLanguage(language);
         });
     }
@@ -10764,6 +10786,18 @@ class SafeStorage {
     }
 }
 
+function withCountry(language, country) {
+    if (!country) return language;
+    try {
+        if (new Intl.Locale(language).region) return language;
+        return new Intl.Locale(language, {
+            region: country
+        }).toString();
+    } catch  {
+        return language;
+    }
+}
+
 function getAnalyticsConfig(commerceEngineConfig, enabled) {
     return {
         enabled,
@@ -10889,7 +10923,7 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = commerce.loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -10914,7 +10948,11 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
+    }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
@@ -10955,7 +10993,10 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? withCountry(language, country) : language;
     }
     initRequestStatus() {
         this.searchOrListing = 'product-listing' === this.type ? commerce.buildProductListing(this.engine) : commerce.buildSearch(this.engine);
@@ -11019,7 +11060,7 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
     constructor(){
-        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.type = 'search', this.analytics = true, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.type = 'search', this.analytics = true, this.localizeWithCountry = false, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         }, this.onHashChange = ()=>{
             this.urlManager.synchronize(this.fragment);
@@ -11081,6 +11122,13 @@ _ts_decorate$T([
     }),
     _ts_metadata$G("design:type", String)
 ], AtomicCommerceInterface$1.prototype, "language", void 0);
+_ts_decorate$T([
+    decorators_js.property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceInterface$1.prototype, "localizeWithCountry", void 0);
 _ts_decorate$T([
     decorators_js.property({
         type: Object,
@@ -11136,6 +11184,12 @@ _ts_decorate$T([
     _ts_metadata$G("design:paramtypes", []),
     _ts_metadata$G("design:returntype", void 0)
 ], AtomicCommerceInterface$1.prototype, "updateLanguage", null);
+_ts_decorate$T([
+    watch('localizeWithCountry'),
+    _ts_metadata$G("design:type", Function),
+    _ts_metadata$G("design:paramtypes", []),
+    _ts_metadata$G("design:returntype", void 0)
+], AtomicCommerceInterface$1.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate$T([
     watch('iconAssetsPath'),
     _ts_metadata$G("design:type", Function),
@@ -11559,6 +11613,40 @@ const renderPagerNavigation = ({ props })=>(children)=>lit.html`<nav aria-label=
       <div part="buttons" class="flex flex-wrap gap-2">${children}</div>
     </nav>`;
 
+class PagerFitController {
+    hostConnected() {
+        this.resizeObserver = new ResizeObserver(()=>requestAnimationFrame(()=>this.reset()));
+        this.resizeObserver.observe(document.documentElement);
+        if (this.host.parentElement) this.resizeObserver.observe(this.host.parentElement);
+    }
+    hostDisconnected() {
+        this.resizeObserver?.disconnect();
+    }
+    hostUpdated() {
+        const root = this.host.shadowRoot;
+        const previousButton = root?.querySelector('[part="previous-button"]');
+        const nextButton = root?.querySelector('[part="next-button"]');
+        const pageButtonCount = root?.querySelectorAll('[part~="page-button"]').length ?? 0;
+        const isWrapping = !!previousButton && !!nextButton && nextButton.offsetTop > previousButton.offsetTop;
+        if (isWrapping && pageButtonCount > 1) {
+            this.maxPages = pageButtonCount - 1;
+            queueMicrotask(()=>this.host.requestUpdate());
+        }
+    }
+    getNumberOfPagesToDisplay(numberOfPages) {
+        return Math.min(numberOfPages, this.maxPages);
+    }
+    reset() {
+        this.maxPages = 1 / 0;
+        this.host.requestUpdate();
+    }
+    constructor(host){
+        this.host = host;
+        this.maxPages = 1 / 0;
+        host.addController(this);
+    }
+}
+
 const minimumPage = 0;
 function getCurrentPagesRange(page, desiredNumberOfPages, maxPage) {
     let range = buildRange(page, desiredNumberOfPages);
@@ -11623,7 +11711,7 @@ let AtomicCommercePager$1 = class AtomicCommercePager extends lit.LitElement {
         });
     }
     render() {
-        const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
+        const pagesRange = getCurrentPagesRange(this.pagerState.page, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.totalPages - 1);
         return lit.html`
       ${when_js.when(this.pagerState.totalPages > 1 && this.isAppLoaded, ()=>lit.html`
           ${renderPagerNavigation({
@@ -11693,7 +11781,7 @@ let AtomicCommercePager$1 = class AtomicCommercePager extends lit.LitElement {
         });
     }
     constructor(){
-        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded, this.nextButtonIcon = arrow_right_rounded, this.ariaMessage = new AriaLiveRegionController(this, 'atomic-pager');
+        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded, this.nextButtonIcon = arrow_right_rounded, this.ariaMessage = new AriaLiveRegionController(this, 'atomic-pager'), this.pagerFit = new PagerFitController(this);
         new ValidatePropsController(this, ()=>({
                 numberOfPages: this.numberOfPages
             }), AtomicCommercePager.propsSchema);
@@ -14498,7 +14586,7 @@ let AtomicCommerceProductsPerPage$1 = class AtomicCommerceProductsPerPage extend
     render() {
         return lit.html`
       ${when_js.when(!this.summaryState.hasError && this.summaryState.hasProducts && this.isAppLoaded, ()=>lit.html`
-          <div class="flex items-center">
+          <div class="flex flex-wrap items-center">
             ${renderLabel()(lit.html`${this.label}`)}
             ${renderFieldsetGroup({
                 props: {
@@ -14995,7 +15083,7 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = commerce.loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -15018,11 +15106,15 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -15063,14 +15155,17 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? withCountry(language, country) : 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;
     }
     constructor(){
-        super(), this.bindings = {}, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.analytics = true, this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.localizeWithCountry = false, this.analytics = true, this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         };
         this.store = createCommerceRecommendationStore();
@@ -15138,6 +15233,13 @@ _ts_decorate$v([
     }),
     _ts_metadata$n("design:type", String)
 ], AtomicCommerceRecommendationInterface$1.prototype, "language", void 0);
+_ts_decorate$v([
+    decorators_js.property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceRecommendationInterface$1.prototype, "localizeWithCountry", void 0);
 _ts_decorate$v([
     decorators_js.property({
         type: Boolean,
@@ -15158,6 +15260,12 @@ _ts_decorate$v([
     _ts_metadata$n("design:paramtypes", []),
     _ts_metadata$n("design:returntype", void 0)
 ], AtomicCommerceRecommendationInterface$1.prototype, "updateIconAssetsPath", null);
+_ts_decorate$v([
+    watch('localizeWithCountry'),
+    _ts_metadata$n("design:type", Function),
+    _ts_metadata$n("design:paramtypes", []),
+    _ts_metadata$n("design:returntype", void 0)
+], AtomicCommerceRecommendationInterface$1.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate$v([
     watch('language'),
     _ts_metadata$n("design:type", Function),