@coveo/atomic 3.61.5 → 3.63.0

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.61.5",
+        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/{components/common/facets/category-facet/parent-value-link.cjs → utils/locale-utils.cjs}

@@ -27,20 +27,23 @@ var __webpack_require__ = {};
 })();
 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__, {
-    renderCategoryFacetParentValueLink: ()=>renderCategoryFacetParentValueLink
+    withCountry: ()=>withCountry
 });
-const external_value_link_cjs_namespaceObject = require("./value-link.cjs");
-const renderCategoryFacetParentValueLink = ({ props })=>(0, external_value_link_cjs_namespaceObject.renderCategoryFacetValueLink)({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-exports.renderCategoryFacetParentValueLink = __webpack_exports__.renderCategoryFacetParentValueLink;
+exports.withCountry = __webpack_exports__.withCountry;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "renderCategoryFacetParentValueLink"
+    "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.61.5";
+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-category-facet/atomic-commerce-category-facet.js

@@ -18,13 +18,14 @@ import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { AriaLiveRegionController, FocusTargetController } from "../../../utils/accessibility-utils.js";
 import { getFieldValueCaption } from "../../../utils/field-utils.js";
+import { renderCategoryFacetActiveValue } from "../../common/facets/category-facet/active-value.js";
 import { renderCategoryFacetAllCategoryButton } from "../../common/facets/category-facet/all-categories-button.js";
 import { renderCategoryFacetChildrenAsTreeContainer } from "../../common/facets/category-facet/children-as-tree-container.js";
 import { renderCategoryFacetParentAsTreeContainer } from "../../common/facets/category-facet/parent-as-tree-container.js";
 import { renderCategoryFacetParentButton } from "../../common/facets/category-facet/parent-button.js";
-import { renderCategoryFacetParentValueLink } from "../../common/facets/category-facet/parent-value-link.js";
 import { renderCategoryFacetSearchResultsContainer } from "../../common/facets/category-facet/search-results-container.js";
 import { renderCategoryFacetSearchValue } from "../../common/facets/category-facet/search-value.js";
+import { renderCategoryFacetSelectedValue } from "../../common/facets/category-facet/selected-value.js";
 import { renderCategoryFacetTreeValueContainer } from "../../common/facets/category-facet/value-as-tree-container.js";
 import { renderCategoryFacetValueLink } from "../../common/facets/category-facet/value-link.js";
 import facet_common_tw_css from "../../common/facets/facet-common.tw.css.js";
@@ -93,6 +94,21 @@ class AtomicCommerceCategoryFacet extends LitElement {
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return nothing;
+        return renderCategoryFacetSelectedValue({
+            props: {
+                displayValue: getFieldValueCaption(this.facetState.field, activeValue.value, this.bindings.i18n),
+                label: this.displayName,
+                i18n: this.bindings.i18n,
+                onClearFilters: ()=>{
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                }
+            }
+        });
+    }
     renderValuesTree(parents, isRoot) {
         if (!this.hasParents) return this.renderChildren();
         if (isRoot) return renderCategoryFacetTreeValueContainer()(html`
@@ -137,16 +153,12 @@ class AtomicCommerceCategoryFacet extends LitElement {
         const activeParent = parents[0];
         const activeParentDisplayValue = getFieldValueCaption(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return html`
-      ${renderCategoryFacetParentValueLink({
+      ${renderCategoryFacetActiveValue({
             props: {
                 displayValue: activeParentDisplayValue,
                 numberOfResults: activeParent.numberOfResults,
                 i18n: this.bindings.i18n,
                 isLeafValue: activeParent.isLeafValue,
-                onClick: ()=>{
-                    this.focusTargets.activeValueFocus.focusAfterSearch();
-                    this.facet.deselectAll();
-                },
                 searchQuery: this.facetState.facetSearch.query,
                 setRef: (el)=>{
                     this.focusTargets.activeValueFocus.setTarget(el);
@@ -171,7 +183,6 @@ class AtomicCommerceCategoryFacet extends LitElement {
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -246,6 +257,7 @@ class AtomicCommerceCategoryFacet extends LitElement {
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${when(shouldDisplaySearchResults(facetSearch), ()=>html`
               ${when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {

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/facets/category-facet/active-value.js

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
+import { ref } from "lit/directives/ref.js";
+import { renderFacetValueLabelHighlight } from "../facet-value-label-highlight/facet-value-label-highlight.js";
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return html`${keyed(displayValue, html`<li class="contents">
+        <span
+          part="active-parent ${isLeafValue ? 'leaf-value' : 'node-value'}"
+          class="text-primary flex w-full items-center truncate px-2 py-2.5 text-left"
+          aria-current="true"
+          tabindex="-1"
+          ${ref(setRef)}
+        >
+          ${renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected: true
+            }
+        })}
+          <span part="value-count" class="value-count">
+            ${i18n.t('between-parentheses', {
+            text: count
+        })}
+          </span>
+        </span>
+        ${children}
+      </li>`)}`;
+    };
+export { renderCategoryFacetActiveValue };

package/dist/esm/components/common/facets/category-facet/selected-value.js

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import images_close from "../../../../images/close.js";
+import "../../atomic-icon/atomic-icon.js";
+import { renderButton } from "../../button.js";
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>html`<div part="selected-value" class="mt-3 flex items-center justify-between gap-2">
+    <span
+      part="selected-value-pill"
+      title=${displayValue}
+      class="bg-neutral-light truncate rounded-md px-2 py-1 text-sm"
+      >${displayValue}</span
+    >
+    ${renderButton({
+        props: {
+            part: 'selected-value-clear-button',
+            style: 'text-primary',
+            class: 'flex shrink-0 items-center p-1 text-sm',
+            ariaLabel: i18n.t('clear-filters-for-facet', {
+                count: 1,
+                label: i18n.t(label)
+            }),
+            onClick: onClearFilters
+        }
+    })(html`<atomic-icon
+          part="selected-value-clear-button-icon"
+          class="mr-1 h-2 w-2"
+          .icon=${images_close}
+        ></atomic-icon>
+        <span>${i18n.t('clear')}</span>`)}
+  </div>`;
+export { renderCategoryFacetSelectedValue };

package/dist/esm/components/common/facets/category-facet/value-link.js

@@ -1,12 +1,11 @@
 import { html } from "lit";
 import { renderFacetValueLabelHighlight } from "../facet-value-label-highlight/facet-value-label-highlight.js";
 import { renderFacetValueLink } from "../facet-value-link/facet-value-link.js";
-const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isParent, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
-        const partNames = [];
-        if (isParent) partNames.push('active-parent');
-        else partNames.push(`value-link${isSelected ? ' value-link-selected' : ''}`);
-        if (isLeafValue) partNames.push('leaf-value');
-        else partNames.push('node-value');
+const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const partNames = [
+            `value-link${isSelected ? ' value-link-selected' : ''}`,
+            isLeafValue ? 'leaf-value' : 'node-value'
+        ];
         return html`${renderFacetValueLink({
             props: {
                 displayValue,