@coveo/atomic 3.61.5 → 3.63.0

package/custom-elements.json

@@ -500,25 +500,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/dayjs-locales-data.ts",
+      "path": "src/directives/hierarchical-path.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/hierarchical-path.ts",
+      "path": "src/directives/localized-string.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/localized-string.ts",
+      "path": "src/directives/multi-class-map.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/multi-class-map.ts",
+      "path": "src/generated/dayjs-locales-data.ts",
       "declarations": [],
       "exports": []
     },
@@ -998,6 +998,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/locale-utils.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/memoize.ts",
@@ -1712,6 +1718,22 @@
               "description": "The highlighted query inside the facet values.",
               "name": "search-highlight"
             },
+            {
+              "description": "The row displaying the currently selected value and the button that clears the facet.",
+              "name": "selected-value"
+            },
+            {
+              "description": "The pill displaying the currently selected value.",
+              "name": "selected-value-pill"
+            },
+            {
+              "description": "The button that clears the facet, displayed next to the selected value.",
+              "name": "selected-value-clear-button"
+            },
+            {
+              "description": "The icon of the button that clears the facet.",
+              "name": "selected-value-clear-button-icon"
+            },
             {
               "description": "The container surrounding the whole hierarchy of values.",
               "name": "parents"
@@ -1733,7 +1755,7 @@
               "name": "parent-button"
             },
             {
-              "description": "The clickable active parent displayed first within the last sub-parents.",
+              "description": "The currently selected value, displayed last within the parents. Not interactive.",
               "name": "active-parent"
             },
             {
@@ -1923,6 +1945,11 @@
               "name": "renderHeader",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderSelectedValue",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderValuesTree",
@@ -2973,6 +3000,18 @@
               "attribute": "language",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "localizeWithCountry",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.\n\nWhen Atomic has translations for the regional locale (for example `pt-BR` or `zh-TW`), the\ninterface uses them instead of those of the language. To customize strings for such an\ninterface, register them under the regional locale.",
+              "attribute": "localize-with-country",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "engine",
@@ -3110,7 +3149,7 @@
                   "description": "(Optional) The ISO-4217 currency code (for example, `USD`)."
                 }
               ],
-              "description": "Updates the locale settings for the commerce interface and headless commerce\nengine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing."
+              "description": "Updates the locale settings for the commerce interface and headless commerce\nengine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing.\n\nWith `localize-with-country`, the country also drives the number, currency, and\ndate formatting of the interface."
             },
             {
               "kind": "method",
@@ -3122,6 +3161,11 @@
               "name": "updateLanguage",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "toggleLocalizeWithCountry",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "updateIconAssetsPath",
@@ -3176,6 +3220,26 @@
               "name": "initLanguage",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getLocale",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "language",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "country",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "initRequestStatus",
@@ -3297,6 +3361,15 @@
               "deprecated": "- This property will be removed in the next major version of\nAtomic (v4). Rather than using this property, set the initial language\nthrough the engine configuration when calling `initializeWithEngine`, and\nupdate the language as needed using the `updateLocale` method.",
               "fieldName": "language"
             },
+            {
+              "name": "localize-with-country",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.\n\nWhen Atomic has translations for the regional locale (for example `pt-BR` or `zh-TW`), the\ninterface uses them instead of those of the language. To customize strings for such an\ninterface, register them under the regional locale.",
+              "fieldName": "localizeWithCountry"
+            },
             {
               "name": "reflect-state-in-url",
               "type": {
@@ -4279,6 +4352,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -5348,6 +5427,17 @@
               "attribute": "language",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "localizeWithCountry",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.",
+              "attribute": "localize-with-country",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "analytics",
@@ -5417,7 +5507,7 @@
                   "description": "(Optional) The ISO-4217 currency code (for example, `USD`)."
                 }
               ],
-              "description": "Updates the locale settings for the commerce recommendation interface and\nheadless commerce engine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing."
+              "description": "Updates the locale settings for the commerce recommendation interface and\nheadless commerce engine. Only the provided parameters will be updated.\n\nCalling this method affects the localization of the interface as well as\nthe catalog configuration being used by the Commerce API. If the resulting\nlanguage-country-currency combination matches no existing catalog\nconfiguration in your Coveo organization, requests made through the\ncommerce engine will start failing.\n\nWith `localize-with-country`, the country also drives the number, currency, and\ndate formatting of the interface."
             },
             {
               "kind": "method",
@@ -5429,6 +5519,11 @@
               "name": "updateIconAssetsPath",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "toggleLocalizeWithCountry",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "updateLanguage",
@@ -5477,6 +5572,26 @@
               "name": "initLanguage",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "getLocale",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "language",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "country",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "isNewLocale",
@@ -5556,6 +5671,15 @@
               "deprecated": "- This property will be removed in the next major version of\nAtomic (v4). Rather than using this property, set the initial language\nthrough the engine configuration when calling `initializeWithEngine`, and\nupdate the language as needed using the `updateLocale` method.",
               "fieldName": "language"
             },
+            {
+              "name": "localize-with-country",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to localize the interface with the country of the commerce context as well as its\nlanguage, for example `fr-CA` rather than `fr`.\n\nNumber, currency, and date formatting then follow the country: with the `en` language and the\n`CA` country, a CAD price renders as `$1,000.10` rather than `CA$1,000.10`.",
+              "fieldName": "localizeWithCountry"
+            },
             {
               "name": "analytics",
               "type": {
@@ -14741,6 +14865,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/common/pager/pager-fit-controller.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/common/pager/pager-navigation.ts",
@@ -17074,7 +17204,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The service insight interface language.",
+              "description": "The service insight interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -17293,7 +17423,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The service insight interface language.",
+              "description": "The service insight interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {
@@ -18496,6 +18626,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-insight-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -25852,7 +25988,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The recommendation interface language.",
+              "description": "The recommendation interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -26070,7 +26206,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The recommendation interface language.",
+              "description": "The recommendation interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {
@@ -28106,6 +28242,22 @@
               "description": "The highlighted query inside the facet values.",
               "name": "search-highlight"
             },
+            {
+              "description": "The row displaying the currently selected value and the button that clears the facet.",
+              "name": "selected-value"
+            },
+            {
+              "description": "The pill displaying the currently selected value.",
+              "name": "selected-value-pill"
+            },
+            {
+              "description": "The button that clears the facet, displayed next to the selected value.",
+              "name": "selected-value-clear-button"
+            },
+            {
+              "description": "The icon of the button that clears the facet.",
+              "name": "selected-value-clear-button-icon"
+            },
             {
               "description": "The container surrounding the whole hierarchy of values.",
               "name": "parents"
@@ -28119,7 +28271,7 @@
               "name": "values"
             },
             {
-              "description": "The \"View all\" button displayed first within the parents.",
+              "description": "The \"All Categories\" button displayed first within the parents.",
               "name": "all-categories-button"
             },
             {
@@ -28127,7 +28279,7 @@
               "name": "parent-button"
             },
             {
-              "description": "The clickable active parent displayed first within the last sub-parents.",
+              "description": "The currently selected value, displayed last within the parents. Not interactive.",
               "name": "active-parent"
             },
             {
@@ -28529,6 +28681,11 @@
               "name": "renderSearchInput",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderSelectedValue",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderValuesTree",
@@ -34342,6 +34499,12 @@
               "privacy": "protected",
               "default": "new AriaLiveRegionController(this, 'atomic-pager')"
             },
+            {
+              "kind": "field",
+              "name": "pagerFit",
+              "privacy": "private",
+              "default": "new PagerFitController(this)"
+            },
             {
               "kind": "field",
               "name": "previousButton",
@@ -38266,7 +38429,7 @@
               },
               "privacy": "public",
               "default": "'D/M/YYYY'",
-              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format",
+              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format\n\n[Localized formats](https://day.js.org/docs/en/display/format#localized-formats) such as `L`, `LL`, or `LLL`\nfollow the interface `language`: with `format=\"L\"`, `en-US` renders `09/30/2026` and `en-CA` renders `2026-09-30`.",
               "attribute": "format",
               "reflects": true
             },
@@ -38389,7 +38552,7 @@
                 "text": "string"
               },
               "default": "'D/M/YYYY'",
-              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format",
+              "description": "The format of the date.\nAvailable formats: https://day.js.org/docs/en/display/format\n\n[Localized formats](https://day.js.org/docs/en/display/format#localized-formats) such as `L`, `LL`, or `LLL`\nfollow the interface `language`: with `format=\"L\"`, `en-US` renders `09/30/2026` and `en-CA` renders `2026-09-30`.",
               "fieldName": "format"
             },
             {
@@ -44455,7 +44618,7 @@
               },
               "privacy": "public",
               "default": "'en'",
-              "description": "The search interface language.",
+              "description": "The search interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "attribute": "language",
               "reflects": true
             },
@@ -44812,7 +44975,7 @@
                 "text": "string"
               },
               "default": "'en'",
-              "description": "The search interface language.",
+              "description": "The search interface language.\n\nAccepts a language (`en`) or a [BCP 47](https://www.rfc-editor.org/info/bcp47) locale\n(`en-CA`). The region drives number, currency, and localized date formats, while\ntranslations use the closest available language.",
               "fieldName": "language"
             },
             {
@@ -48874,6 +49037,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/common/facets/category-facet/active-value.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/common/facets/category-facet/all-categories-button.ts",
@@ -48906,19 +49075,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/parent-value-link.ts",
+      "path": "src/components/common/facets/category-facet/search-results-container.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/search-results-container.ts",
+      "path": "src/components/common/facets/category-facet/search-value.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/search-value.ts",
+      "path": "src/components/common/facets/category-facet/selected-value.ts",
       "declarations": [],
       "exports": []
     },

package/dist/cjs/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.cjs

@@ -59,13 +59,14 @@ const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard
 const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
 const accessibility_utils_cjs_namespaceObject = require("../../../utils/accessibility-utils.cjs");
 const field_utils_cjs_namespaceObject = require("../../../utils/field-utils.cjs");
+const active_value_cjs_namespaceObject = require("../../common/facets/category-facet/active-value.cjs");
 const all_categories_button_cjs_namespaceObject = require("../../common/facets/category-facet/all-categories-button.cjs");
 const children_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/children-as-tree-container.cjs");
 const parent_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/parent-as-tree-container.cjs");
 const parent_button_cjs_namespaceObject = require("../../common/facets/category-facet/parent-button.cjs");
-const parent_value_link_cjs_namespaceObject = require("../../common/facets/category-facet/parent-value-link.cjs");
 const search_results_container_cjs_namespaceObject = require("../../common/facets/category-facet/search-results-container.cjs");
 const search_value_cjs_namespaceObject = require("../../common/facets/category-facet/search-value.cjs");
+const selected_value_cjs_namespaceObject = require("../../common/facets/category-facet/selected-value.cjs");
 const value_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/value-as-tree-container.cjs");
 const value_link_cjs_namespaceObject = require("../../common/facets/category-facet/value-link.cjs");
 const facet_common_tw_css_cjs_namespaceObject = require("../../common/facets/facet-common.tw.css.cjs");
@@ -136,6 +137,21 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return external_lit_namespaceObject.nothing;
+        return (0, selected_value_cjs_namespaceObject.renderCategoryFacetSelectedValue)({
+            props: {
+                displayValue: (0, field_utils_cjs_namespaceObject.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 (0, value_as_tree_container_cjs_namespaceObject.renderCategoryFacetTreeValueContainer)()((0, external_lit_namespaceObject.html)`
@@ -180,16 +196,12 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
         const activeParent = parents[0];
         const activeParentDisplayValue = (0, field_utils_cjs_namespaceObject.getFieldValueCaption)(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return (0, external_lit_namespaceObject.html)`
-      ${(0, parent_value_link_cjs_namespaceObject.renderCategoryFacetParentValueLink)({
+      ${(0, active_value_cjs_namespaceObject.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);
@@ -214,7 +226,6 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -289,6 +300,7 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${(0, when_js_namespaceObject.when)((0, facet_search_utils_cjs_namespaceObject.shouldDisplaySearchResults)(facetSearch), ()=>(0, external_lit_namespaceObject.html)`
               ${(0, when_js_namespaceObject.when)(facetSearch.values.length > 0, ()=>(0, facet_values_group_cjs_namespaceObject.renderFacetValuesGroup)({
                         props: {

package/dist/cjs/components/commerce/atomic-commerce-interface/atomic-commerce-interface.cjs

@@ -58,6 +58,7 @@ const children_update_complete_mixin_cjs_namespaceObject = require("../../../mix
 const init_queue_cjs_namespaceObject = require("../../../utils/init-queue.cjs");
 const initialization_common_utils_cjs_namespaceObject = require("../../../utils/initialization-common-utils.cjs");
 const local_storage_utils_cjs_namespaceObject = require("../../../utils/local-storage-utils.cjs");
+const locale_utils_cjs_namespaceObject = require("../../../utils/locale-utils.cjs");
 const external_analytics_config_cjs_namespaceObject = require("./analytics-config.cjs");
 const external_store_cjs_namespaceObject = require("./store.cjs");
 function _ts_decorate(decorators, target, key, desc) {
@@ -114,7 +115,7 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
     }
     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 } = (0, commerce_namespaceObject.loadContextActions)(this.engine);
             this.engine.dispatch(setContext({
@@ -139,7 +140,11 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
         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;
@@ -180,7 +185,10 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
     }
     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 ? (0, locale_utils_cjs_namespaceObject.withCountry)(language, country) : language;
     }
     initRequestStatus() {
         this.searchOrListing = 'product-listing' === this.type ? (0, commerce_namespaceObject.buildProductListing)(this.engine) : (0, commerce_namespaceObject.buildSearch)(this.engine);
@@ -244,7 +252,7 @@ class AtomicCommerceInterface extends (0, children_update_complete_mixin_cjs_nam
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
     constructor(){
-        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.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 interface_controller_cjs_namespaceObject.InterfaceController(this, 'CoveoAtomic', commerce_namespaceObject.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);
@@ -314,6 +322,13 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", String)
 ], AtomicCommerceInterface.prototype, "language", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceInterface.prototype, "localizeWithCountry", void 0);
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({
         type: Object,
@@ -369,6 +384,12 @@ _ts_decorate([
     _ts_metadata("design:paramtypes", []),
     _ts_metadata("design:returntype", void 0)
 ], AtomicCommerceInterface.prototype, "updateLanguage", null);
+_ts_decorate([
+    (0, watch_cjs_namespaceObject.watch)('localizeWithCountry'),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicCommerceInterface.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate([
     (0, watch_cjs_namespaceObject.watch)('iconAssetsPath'),
     _ts_metadata("design:type", Function),

package/dist/cjs/components/commerce/atomic-commerce-pager/atomic-commerce-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");
@@ -81,7 +82,7 @@ class AtomicCommercePager extends external_lit_namespaceObject.LitElement {
         });
     }
     render() {
-        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
+        const pagesRange = (0, pager_utils_cjs_namespaceObject.getCurrentPagesRange)(this.pagerState.page, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.totalPages - 1);
         return (0, external_lit_namespaceObject.html)`
       ${(0, when_js_namespaceObject.when)(this.pagerState.totalPages > 1 && this.isAppLoaded, ()=>(0, external_lit_namespaceObject.html)`
           ${(0, pager_navigation_cjs_namespaceObject.renderPagerNavigation)({
@@ -152,7 +153,7 @@ class AtomicCommercePager extends external_lit_namespaceObject.LitElement {
         });
     }
     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
             }), AtomicCommercePager.propsSchema);

package/dist/cjs/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.cjs

@@ -80,7 +80,7 @@ class AtomicCommerceProductsPerPage extends external_lit_namespaceObject.LitElem
     render() {
         return (0, external_lit_namespaceObject.html)`
       ${(0, when_js_namespaceObject.when)(!this.summaryState.hasError && this.summaryState.hasProducts && this.isAppLoaded, ()=>(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: {