@coveo/atomic 3.62.0 → 3.63.0

package/dist/cjs/components/search/atomic-pager/atomic-pager.cjs

@@ -48,6 +48,7 @@ const when_js_namespaceObject = require("lit/directives/when.js");
 const store_cjs_namespaceObject = require("../../common/interface/store.cjs");
 const pager_buttons_cjs_namespaceObject = require("../../common/pager/pager-buttons.cjs");
 const pager_navigation_cjs_namespaceObject = require("../../common/pager/pager-navigation.cjs");
+const pager_fit_controller_cjs_namespaceObject = require("../../common/pager/pager-fit-controller.cjs");
 const pager_utils_cjs_namespaceObject = require("../../common/pager/pager-utils.cjs");
 const validate_props_controller_cjs_namespaceObject = require("../../common/validate-props-controller/validate-props-controller.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
@@ -85,7 +86,7 @@ class AtomicPager extends (0, bindings_mixin_cjs_namespaceObject.InitializeBindi
         });
     }
     render() {
-        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.currentPage - 1, this.numberOfPages, this.pagerState.maxPage - 1);
+        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.currentPage - 1, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.maxPage - 1);
         return (0, external_lit_namespaceObject.html)`${(0, when_js_namespaceObject.when)(this.pagerState.maxPage > 1 && this.isAppLoaded, ()=>(0, external_lit_namespaceObject.html)` ${(0, pager_navigation_cjs_namespaceObject.renderPagerNavigation)({
                 props: {
                     i18n: this.bindings.i18n
@@ -150,7 +151,7 @@ class AtomicPager extends (0, bindings_mixin_cjs_namespaceObject.InitializeBindi
         });
     }
     constructor(){
-        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded_cjs_default(), this.nextButtonIcon = arrow_right_rounded_cjs_default(), this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-pager');
+        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded_cjs_default(), this.nextButtonIcon = arrow_right_rounded_cjs_default(), this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'atomic-pager'), this.pagerFit = new pager_fit_controller_cjs_namespaceObject.PagerFitController(this);
         new validate_props_controller_cjs_namespaceObject.ValidatePropsController(this, ()=>({
                 numberOfPages: this.numberOfPages
             }), AtomicPager.propsSchema);

package/dist/cjs/components/search/atomic-result-date/atomic-result-date.cjs

@@ -45,8 +45,8 @@ const external_dayjs_namespaceObject = require("dayjs");
 var external_dayjs_default = /*#__PURE__*/ __webpack_require__.n(external_dayjs_namespaceObject);
 const calendar_namespaceObject = require("dayjs/plugin/calendar");
 var calendar_default = /*#__PURE__*/ __webpack_require__.n(calendar_namespaceObject);
-const updateLocale_namespaceObject = require("dayjs/plugin/updateLocale");
-var updateLocale_default = /*#__PURE__*/ __webpack_require__.n(updateLocale_namespaceObject);
+const localizedFormat_namespaceObject = require("dayjs/plugin/localizedFormat");
+var localizedFormat_default = /*#__PURE__*/ __webpack_require__.n(localizedFormat_namespaceObject);
 const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
 const when_js_namespaceObject = require("lit/directives/when.js");
@@ -67,7 +67,7 @@ function _ts_metadata(metadataKey, metadataValue) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(metadataKey, metadataValue);
 }
 external_dayjs_default().extend(calendar_default());
-external_dayjs_default().extend(updateLocale_default());
+external_dayjs_default().extend(localizedFormat_default());
 class AtomicResultDate extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(external_lit_namespaceObject.LitElement) {
     initialize() {
         if (!this.result && this.resultController.item) {
@@ -95,19 +95,14 @@ class AtomicResultDate extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(
             this.error = new Error(`Field "${this.field}" does not contain a valid date.`);
             return null;
         }
-        if (this.relativeTime) {
-            external_dayjs_default().updateLocale(this.bindings.interfaceElement.language, {
-                calendar: {
-                    sameDay: this.bindings.i18n.t('calendar-same-day'),
-                    nextDay: this.bindings.i18n.t('calendar-next-day'),
-                    nextWeek: this.bindings.i18n.t('calendar-next-week'),
-                    lastDay: this.bindings.i18n.t('calendar-last-day'),
-                    lastWeek: this.bindings.i18n.t('calendar-last-week'),
-                    sameElse: this.format
-                }
-            });
-            return parsedValue.calendar();
-        }
+        if (this.relativeTime) return parsedValue.calendar(null, {
+            sameDay: this.bindings.i18n.t('calendar-same-day'),
+            nextDay: this.bindings.i18n.t('calendar-next-day'),
+            nextWeek: this.bindings.i18n.t('calendar-next-week'),
+            lastDay: this.bindings.i18n.t('calendar-last-day'),
+            lastWeek: this.bindings.i18n.t('calendar-last-week'),
+            sameElse: this.format
+        });
         return parsedValue.format(this.format);
     }
     constructor(){

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

@@ -89,7 +89,7 @@ class AtomicResultsPerPage extends (0, bindings_mixin_cjs_namespaceObject.Initia
         if (!this.searchStatusState) return (0, external_lit_namespaceObject.html)``;
         return (0, external_lit_namespaceObject.html)`
       ${(0, when_js_namespaceObject.when)(!this.searchStatusState.hasError && this.isAppLoaded && this.searchStatusState.hasResults, ()=>(0, external_lit_namespaceObject.html)`
-          <div class="flex items-center">
+          <div class="flex flex-wrap items-center">
             ${(0, label_cjs_namespaceObject.renderLabel)()((0, external_lit_namespaceObject.html)`${this.label}`)}
             ${(0, fieldset_group_cjs_namespaceObject.renderFieldsetGroup)({
                 props: {

package/dist/cjs/generated/dayjs-locales-data.cjs

@@ -30,20 +30,20 @@ __webpack_require__.r(__webpack_exports__);
 const locales = {
     af: ()=>import("dayjs/locale/af"),
     am: ()=>import("dayjs/locale/am"),
-    'ar-IQ': ()=>import("dayjs/locale/ar-iq"),
-    'ar-DZ': ()=>import("dayjs/locale/ar-dz"),
-    'ar-KW': ()=>import("dayjs/locale/ar-kw"),
-    'ar-LY': ()=>import("dayjs/locale/ar-ly"),
-    'ar-MA': ()=>import("dayjs/locale/ar-ma"),
-    'ar-SA': ()=>import("dayjs/locale/ar-sa"),
-    'ar-TN': ()=>import("dayjs/locale/ar-tn"),
+    'ar-iq': ()=>import("dayjs/locale/ar-iq"),
+    'ar-dz': ()=>import("dayjs/locale/ar-dz"),
+    'ar-kw': ()=>import("dayjs/locale/ar-kw"),
+    'ar-ly': ()=>import("dayjs/locale/ar-ly"),
+    'ar-ma': ()=>import("dayjs/locale/ar-ma"),
+    'ar-sa': ()=>import("dayjs/locale/ar-sa"),
+    'ar-tn': ()=>import("dayjs/locale/ar-tn"),
     ar: ()=>import("dayjs/locale/ar"),
     az: ()=>import("dayjs/locale/az"),
     be: ()=>import("dayjs/locale/be"),
     bg: ()=>import("dayjs/locale/bg"),
     bi: ()=>import("dayjs/locale/bi"),
     bm: ()=>import("dayjs/locale/bm"),
-    'bn-BD': ()=>import("dayjs/locale/bn-bd"),
+    'bn-bd': ()=>import("dayjs/locale/bn-bd"),
     bn: ()=>import("dayjs/locale/bn"),
     bo: ()=>import("dayjs/locale/bo"),
     br: ()=>import("dayjs/locale/br"),
@@ -53,49 +53,49 @@ const locales = {
     cv: ()=>import("dayjs/locale/cv"),
     cy: ()=>import("dayjs/locale/cy"),
     da: ()=>import("dayjs/locale/da"),
-    'de-AT': ()=>import("dayjs/locale/de-at"),
-    'de-CH': ()=>import("dayjs/locale/de-ch"),
+    'de-at': ()=>import("dayjs/locale/de-at"),
+    'de-ch': ()=>import("dayjs/locale/de-ch"),
     de: ()=>import("dayjs/locale/de"),
     dv: ()=>import("dayjs/locale/dv"),
-    'en-AU': ()=>import("dayjs/locale/en-au"),
+    'en-au': ()=>import("dayjs/locale/en-au"),
     el: ()=>import("dayjs/locale/el"),
-    'en-GB': ()=>import("dayjs/locale/en-gb"),
-    'en-IE': ()=>import("dayjs/locale/en-ie"),
-    'en-IL': ()=>import("dayjs/locale/en-il"),
-    'en-IN': ()=>import("dayjs/locale/en-in"),
-    'en-NZ': ()=>import("dayjs/locale/en-nz"),
-    'en-SG': ()=>import("dayjs/locale/en-sg"),
-    'en-TT': ()=>import("dayjs/locale/en-tt"),
-    'en-CA': ()=>import("dayjs/locale/en-ca"),
+    'en-gb': ()=>import("dayjs/locale/en-gb"),
+    'en-ie': ()=>import("dayjs/locale/en-ie"),
+    'en-il': ()=>import("dayjs/locale/en-il"),
+    'en-in': ()=>import("dayjs/locale/en-in"),
+    'en-nz': ()=>import("dayjs/locale/en-nz"),
+    'en-sg': ()=>import("dayjs/locale/en-sg"),
+    'en-tt': ()=>import("dayjs/locale/en-tt"),
+    'en-ca': ()=>import("dayjs/locale/en-ca"),
     en: ()=>import("dayjs/locale/en"),
     eo: ()=>import("dayjs/locale/eo"),
-    'es-MX': ()=>import("dayjs/locale/es-mx"),
-    'es-PR': ()=>import("dayjs/locale/es-pr"),
-    'es-US': ()=>import("dayjs/locale/es-us"),
-    'es-DO': ()=>import("dayjs/locale/es-do"),
+    'es-mx': ()=>import("dayjs/locale/es-mx"),
+    'es-pr': ()=>import("dayjs/locale/es-pr"),
+    'es-us': ()=>import("dayjs/locale/es-us"),
+    'es-do': ()=>import("dayjs/locale/es-do"),
     et: ()=>import("dayjs/locale/et"),
     eu: ()=>import("dayjs/locale/eu"),
     fa: ()=>import("dayjs/locale/fa"),
     fi: ()=>import("dayjs/locale/fi"),
-    'fr-CA': ()=>import("dayjs/locale/fr-ca"),
-    'fr-CH': ()=>import("dayjs/locale/fr-ch"),
+    'fr-ca': ()=>import("dayjs/locale/fr-ca"),
+    'fr-ch': ()=>import("dayjs/locale/fr-ch"),
     fr: ()=>import("dayjs/locale/fr"),
     fo: ()=>import("dayjs/locale/fo"),
     fy: ()=>import("dayjs/locale/fy"),
     ga: ()=>import("dayjs/locale/ga"),
     gd: ()=>import("dayjs/locale/gd"),
     gl: ()=>import("dayjs/locale/gl"),
-    'gom-LATN': ()=>import("dayjs/locale/gom-latn"),
+    'gom-latn': ()=>import("dayjs/locale/gom-latn"),
     gu: ()=>import("dayjs/locale/gu"),
     he: ()=>import("dayjs/locale/he"),
     hi: ()=>import("dayjs/locale/hi"),
     hr: ()=>import("dayjs/locale/hr"),
     ht: ()=>import("dayjs/locale/ht"),
     hu: ()=>import("dayjs/locale/hu"),
-    'hy-AM': ()=>import("dayjs/locale/hy-am"),
+    'hy-am': ()=>import("dayjs/locale/hy-am"),
     id: ()=>import("dayjs/locale/id"),
     is: ()=>import("dayjs/locale/is"),
-    'it-CH': ()=>import("dayjs/locale/it-ch"),
+    'it-ch': ()=>import("dayjs/locale/it-ch"),
     it: ()=>import("dayjs/locale/it"),
     jv: ()=>import("dayjs/locale/jv"),
     ka: ()=>import("dayjs/locale/ka"),
@@ -115,7 +115,7 @@ const locales = {
     ml: ()=>import("dayjs/locale/ml"),
     mn: ()=>import("dayjs/locale/mn"),
     mr: ()=>import("dayjs/locale/mr"),
-    'ms-MY': ()=>import("dayjs/locale/ms-my"),
+    'ms-my': ()=>import("dayjs/locale/ms-my"),
     ms: ()=>import("dayjs/locale/ms"),
     mt: ()=>import("dayjs/locale/mt"),
     lo: ()=>import("dayjs/locale/lo"),
@@ -123,11 +123,11 @@ const locales = {
     nb: ()=>import("dayjs/locale/nb"),
     ne: ()=>import("dayjs/locale/ne"),
     nl: ()=>import("dayjs/locale/nl"),
-    'nl-BE': ()=>import("dayjs/locale/nl-be"),
+    'nl-be': ()=>import("dayjs/locale/nl-be"),
     nn: ()=>import("dayjs/locale/nn"),
-    'pa-IN': ()=>import("dayjs/locale/pa-in"),
+    'pa-in': ()=>import("dayjs/locale/pa-in"),
     pl: ()=>import("dayjs/locale/pl"),
-    'pt-BR': ()=>import("dayjs/locale/pt-br"),
+    'pt-br': ()=>import("dayjs/locale/pt-br"),
     pt: ()=>import("dayjs/locale/pt"),
     rn: ()=>import("dayjs/locale/rn"),
     ro: ()=>import("dayjs/locale/ro"),
@@ -139,12 +139,12 @@ const locales = {
     si: ()=>import("dayjs/locale/si"),
     sk: ()=>import("dayjs/locale/sk"),
     sl: ()=>import("dayjs/locale/sl"),
-    'oc-LNC': ()=>import("dayjs/locale/oc-lnc"),
+    'oc-lnc': ()=>import("dayjs/locale/oc-lnc"),
     sq: ()=>import("dayjs/locale/sq"),
-    'sr-CYRL': ()=>import("dayjs/locale/sr-cyrl"),
+    'sr-cyrl': ()=>import("dayjs/locale/sr-cyrl"),
     sr: ()=>import("dayjs/locale/sr"),
     ss: ()=>import("dayjs/locale/ss"),
-    'sv-FI': ()=>import("dayjs/locale/sv-fi"),
+    'sv-fi': ()=>import("dayjs/locale/sv-fi"),
     sv: ()=>import("dayjs/locale/sv"),
     sw: ()=>import("dayjs/locale/sw"),
     ta: ()=>import("dayjs/locale/ta"),
@@ -152,24 +152,24 @@ const locales = {
     tet: ()=>import("dayjs/locale/tet"),
     tg: ()=>import("dayjs/locale/tg"),
     th: ()=>import("dayjs/locale/th"),
-    'tl-PH': ()=>import("dayjs/locale/tl-ph"),
+    'tl-ph': ()=>import("dayjs/locale/tl-ph"),
     tlh: ()=>import("dayjs/locale/tlh"),
     tr: ()=>import("dayjs/locale/tr"),
     tzl: ()=>import("dayjs/locale/tzl"),
     tzm: ()=>import("dayjs/locale/tzm"),
-    'ug-CN': ()=>import("dayjs/locale/ug-cn"),
+    'ug-cn': ()=>import("dayjs/locale/ug-cn"),
     uk: ()=>import("dayjs/locale/uk"),
     tk: ()=>import("dayjs/locale/tk"),
     ur: ()=>import("dayjs/locale/ur"),
-    'uz-LATN': ()=>import("dayjs/locale/uz-latn"),
+    'uz-latn': ()=>import("dayjs/locale/uz-latn"),
     uz: ()=>import("dayjs/locale/uz"),
     vi: ()=>import("dayjs/locale/vi"),
-    'x-PSEUDO': ()=>import("dayjs/locale/x-pseudo"),
-    'tzm-LATN': ()=>import("dayjs/locale/tzm-latn"),
+    'x-pseudo': ()=>import("dayjs/locale/x-pseudo"),
+    'tzm-latn': ()=>import("dayjs/locale/tzm-latn"),
     yo: ()=>import("dayjs/locale/yo"),
-    'zh-CN': ()=>import("dayjs/locale/zh-cn"),
-    'zh-HK': ()=>import("dayjs/locale/zh-hk"),
-    'zh-TW': ()=>import("dayjs/locale/zh-tw"),
+    'zh-cn': ()=>import("dayjs/locale/zh-cn"),
+    'zh-hk': ()=>import("dayjs/locale/zh-hk"),
+    'zh-tw': ()=>import("dayjs/locale/zh-tw"),
     zh: ()=>import("dayjs/locale/zh")
 };
 __webpack_require__.d(__webpack_exports__, {}, {

package/dist/cjs/global/environment.cjs

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

package/dist/cjs/utils/dayjs-locales.cjs

@@ -43,20 +43,34 @@ const external_dayjs_namespaceObject = require("dayjs");
 var external_dayjs_default = /*#__PURE__*/ __webpack_require__.n(external_dayjs_namespaceObject);
 const dayjs_locales_data_cjs_namespaceObject = require("../generated/dayjs-locales-data.cjs");
 const warn = (language)=>console.warn(`Cannot load dayjs locale file for "${language}"`);
-const resolveLanguage = (languageInput)=>{
-    if (dayjs_locales_data_cjs_namespaceObject.locales[languageInput]) return languageInput;
-    if (languageInput.includes('-')) {
-        const regionlessLanguage = languageInput.split('-')[0];
-        if (dayjs_locales_data_cjs_namespaceObject.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(dayjs_locales_data_cjs_namespaceObject.locales, locale)) ?? languageInput;
+async function loadDayjsLocale(languageInput) {
     const language = resolveLanguage(languageInput);
     if (!dayjs_locales_data_cjs_namespaceObject.locales[language]) return void warn(language);
     try {
-        dayjs_locales_data_cjs_namespaceObject.locales[language]().then(()=>external_dayjs_default().locale(language));
-    } catch (_) {
+        await dayjs_locales_data_cjs_namespaceObject.locales[language]();
+        external_dayjs_default().locale(language);
+    } catch  {
         warn(language);
     }
 }

package/dist/cjs/utils/field-utils.cjs

@@ -31,7 +31,11 @@ function getFieldCaptionNamespace(field) {
     return `caption-${field}`;
 }
 function getFieldCaptions(field, i18n) {
-    return i18n.getResourceBundle(i18n.language, getFieldCaptionNamespace(field)) || {};
+    const namespace = getFieldCaptionNamespace(field);
+    return (i18n.languages ?? []).reduceRight((captions, language)=>({
+            ...captions,
+            ...i18n.getResourceBundle(language, namespace)
+        }), {});
 }
 function getFieldValueCaption(field, facetValue, i18n) {
     return i18n.t(facetValue, {

package/dist/cjs/utils/locale-utils.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+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;
+    }
+}
+__webpack_require__.d(__webpack_exports__, {
+    withCountry: ()=>withCountry
+});
+exports.withCountry = __webpack_exports__.withCountry;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "withCountry"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/versions.cjs

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

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

@@ -16,6 +16,7 @@ import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-com
 import { markParentAsReady } from "../../../utils/init-queue.js";
 import { waitForAtomicChildrenToBeDefined } from "../../../utils/initialization-common-utils.js";
 import { SafeStorage, StorageItems } from "../../../utils/local-storage-utils.js";
+import { withCountry } from "../../../utils/locale-utils.js";
 import { getAnalyticsConfig } from "./analytics-config.js";
 import { createCommerceStore } from "./store.js";
 function _ts_decorate(decorators, target, key, desc) {
@@ -72,7 +73,7 @@ class AtomicCommerceInterface extends ChildrenUpdateCompleteMixin(LitElement) {
     }
     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 } = loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -97,7 +98,11 @@ class AtomicCommerceInterface extends ChildrenUpdateCompleteMixin(LitElement) {
         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;
@@ -138,7 +143,10 @@ class AtomicCommerceInterface extends ChildrenUpdateCompleteMixin(LitElement) {
     }
     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 ? buildProductListing(this.engine) : buildSearch(this.engine);
@@ -202,7 +210,7 @@ class AtomicCommerceInterface extends ChildrenUpdateCompleteMixin(LitElement) {
         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', 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', 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);
@@ -264,6 +272,13 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", String)
 ], AtomicCommerceInterface.prototype, "language", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceInterface.prototype, "localizeWithCountry", void 0);
 _ts_decorate([
     property({
         type: Object,
@@ -319,6 +334,12 @@ _ts_decorate([
     _ts_metadata("design:paramtypes", []),
     _ts_metadata("design:returntype", void 0)
 ], AtomicCommerceInterface.prototype, "updateLanguage", null);
+_ts_decorate([
+    watch('localizeWithCountry'),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicCommerceInterface.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate([
     watch('iconAssetsPath'),
     _ts_metadata("design:type", Function),

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

@@ -7,6 +7,7 @@ import { when } from "lit/directives/when.js";
 import { createAppLoadedListener } from "../../common/interface/store.js";
 import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton } from "../../common/pager/pager-buttons.js";
 import { renderPagerNavigation } from "../../common/pager/pager-navigation.js";
+import { PagerFitController } from "../../common/pager/pager-fit-controller.js";
 import { getCurrentPagesRange } from "../../common/pager/pager-utils.js";
 import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
@@ -38,7 +39,7 @@ class AtomicCommercePager extends 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 html`
       ${when(this.pagerState.totalPages > 1 && this.isAppLoaded, ()=>html`
           ${renderPagerNavigation({
@@ -109,7 +110,7 @@ class AtomicCommercePager extends 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);

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

@@ -48,7 +48,7 @@ class AtomicCommerceProductsPerPage extends LitElement {
     render() {
         return html`
       ${when(!this.summaryState.hasError && this.summaryState.hasProducts && this.isAppLoaded, ()=>html`
-          <div class="flex items-center">
+          <div class="flex flex-wrap items-center">
             ${renderLabel()(html`${this.label}`)}
             ${renderFieldsetGroup({
                 props: {

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

@@ -10,6 +10,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
 import { markParentAsReady } from "../../../utils/init-queue.js";
 import { waitForAtomicChildrenToBeDefined } from "../../../utils/initialization-common-utils.js";
+import { withCountry } from "../../../utils/locale-utils.js";
 import { bindingsContext } from "../../common/context/bindings-context.js";
 import { augmentAnalyticsConfigWithAtomicVersion } from "../../common/interface/analytics-config.js";
 import { InterfaceController } from "../../common/interface/interface-controller.js";
@@ -40,7 +41,7 @@ class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(
     }
     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 } = loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -63,11 +64,15 @@ class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(
     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();
@@ -108,14 +113,17 @@ class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(
     }
     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', 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', 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();
@@ -183,6 +191,13 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", String)
 ], AtomicCommerceRecommendationInterface.prototype, "language", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceRecommendationInterface.prototype, "localizeWithCountry", void 0);
 _ts_decorate([
     property({
         type: Boolean,
@@ -203,6 +218,12 @@ _ts_decorate([
     _ts_metadata("design:paramtypes", []),
     _ts_metadata("design:returntype", void 0)
 ], AtomicCommerceRecommendationInterface.prototype, "updateIconAssetsPath", null);
+_ts_decorate([
+    watch('localizeWithCountry'),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicCommerceRecommendationInterface.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate([
     watch('language'),
     _ts_metadata("design:type", Function),

package/dist/esm/components/common/interface/i18n.js

@@ -30,9 +30,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 i18next_http_backend(i18n.services, i18nBackendOptions(atomicInterface)).read(lng, i18nTranslationNamespace, (_error, data)=>{
             if (data) i18n.addResourceBundle(lng, i18nTranslationNamespace, data, true, false);

package/dist/esm/components/common/interface/interface-controller.js

@@ -21,8 +21,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() {
@@ -35,8 +37,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);
         });
     }