@coveo/atomic-react 3.11.45 → 3.11.47

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

@@ -4987,6 +4987,46 @@ const booleanConverter = {
     }
 };
 
+const renderFacetValueLabelHighlight = ({ props })=>{
+    const classNames = tw({
+        'value-label peer-hover:text-error truncate': true,
+        'font-bold': props.isSelected || !!props.isExcluded
+    });
+    return lit.html`<span
+    title=${props.displayValue}
+    part="value-label"
+    class=${multiClassMap(classNames)}
+    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
+  ></span>`;
+};
+
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return lit.html`${keyed_js.keyed(displayValue, lit.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_js.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>`)}`;
+    };
+
 var arrow_left_rounded = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
 
 const getAllCategoriesLocalizedLabel = ({ facetId, field, i18n })=>{
@@ -5047,91 +5087,6 @@ const renderCategoryFacetParentButton = ({ props })=>{
   `);
 };
 
-const renderFacetValueLabelHighlight = ({ props })=>{
-    const classNames = tw({
-        'value-label peer-hover:text-error truncate': true,
-        'font-bold': props.isSelected || !!props.isExcluded
-    });
-    return lit.html`<span
-    title=${props.displayValue}
-    part="value-label"
-    class=${multiClassMap(classNames)}
-    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
-  ></span>`;
-};
-
-const renderFacetValueLink = ({ props })=>(children)=>{
-        const count = props.numberOfResults.toLocaleString(props.i18n.language);
-        const ariaLabel = props.i18n.t('facet-value', {
-            value: props.displayValue,
-            count: props.numberOfResults,
-            formattedCount: count,
-            interpolation: {
-                escapeValue: false
-            }
-        });
-        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
-        if (props.additionalPart) part += ` ${props.additionalPart}`;
-        return lit.html`
-      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
-          ${renderButton({
-            props: {
-                style: 'text-neutral',
-                part,
-                onClick: ()=>props.onClick(),
-                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
-                ariaPressed: props.isSelected ? 'true' : 'false',
-                ariaLabel,
-                ref: props.buttonRef
-            }
-        })(lit.html`${children}<span part="value-count" class="value-count">
-                ${props.i18n.t('between-parentheses', {
-            text: count
-        })}
-              </span>`)}
-          ${props.subList}
-        </li>`)}
-    `;
-    };
-
-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');
-        return lit.html`${renderFacetValueLink({
-            props: {
-                displayValue,
-                numberOfResults,
-                i18n,
-                onClick,
-                isSelected,
-                searchQuery,
-                part: partNames.join(' '),
-                class: 'contents',
-                buttonRef: (element)=>{
-                    setRef?.(element);
-                },
-                subList: children
-            }
-        })(renderFacetValueLabelHighlight({
-            props: {
-                displayValue,
-                searchQuery,
-                isSelected
-            }
-        }))}`;
-    };
-
-const renderCategoryFacetParentValueLink = ({ props })=>renderCategoryFacetValueLink({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-
 const renderCategoryFacetSearchResultsContainer = ()=>(children)=>lit.html`<ul part="search-results" class="mt-3">
       ${children}
     </ul>`;
@@ -5226,8 +5181,97 @@ const renderCategoryFacetSearchValue = ({ props })=>{
   </li>`;
 };
 
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>lit.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
+        }
+    })(lit.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>`;
+
 const renderCategoryFacetTreeValueContainer = ()=>(children)=>lit.html`<li class="contents">${children}</li>`;
 
+const renderFacetValueLink = ({ props })=>(children)=>{
+        const count = props.numberOfResults.toLocaleString(props.i18n.language);
+        const ariaLabel = props.i18n.t('facet-value', {
+            value: props.displayValue,
+            count: props.numberOfResults,
+            formattedCount: count,
+            interpolation: {
+                escapeValue: false
+            }
+        });
+        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
+        if (props.additionalPart) part += ` ${props.additionalPart}`;
+        return lit.html`
+      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
+          ${renderButton({
+            props: {
+                style: 'text-neutral',
+                part,
+                onClick: ()=>props.onClick(),
+                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
+                ariaPressed: props.isSelected ? 'true' : 'false',
+                ariaLabel,
+                ref: props.buttonRef
+            }
+        })(lit.html`${children}<span part="value-count" class="value-count">
+                ${props.i18n.t('between-parentheses', {
+            text: count
+        })}
+              </span>`)}
+          ${props.subList}
+        </li>`)}
+    `;
+    };
+
+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 lit.html`${renderFacetValueLink({
+            props: {
+                displayValue,
+                numberOfResults,
+                i18n,
+                onClick,
+                isSelected,
+                searchQuery,
+                part: partNames.join(' '),
+                class: 'contents',
+                buttonRef: (element)=>{
+                    setRef?.(element);
+                },
+                subList: children
+            }
+        })(renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected
+            }
+        }))}`;
+    };
+
 const styles$e = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark)}[part=value-exclude-button]+.value-count{margin-right:calc(var(--spacing,.25rem)*2)}:host(:state(hidden)){display:none}:host(.popover-nested){min-width:var(--container-2xs,18rem)}:host(.popover-nested)::part(label-button){display:none}:host(.popover-nested)::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host(.popover-nested)::part(values){max-height:calc(var(--spacing,.25rem)*96);margin-top:0;overflow-y:auto}:host(.popover-nested)::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
 const facet_common_tw_css = styles$e;
 
@@ -5298,6 +5342,21 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return lit.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()(lit.html`
@@ -5342,16 +5401,12 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
         const activeParent = parents[0];
         const activeParentDisplayValue = getFieldValueCaption(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return lit.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);
@@ -5376,7 +5431,6 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -5451,6 +5505,7 @@ let AtomicCommerceCategoryFacet$1 = class AtomicCommerceCategoryFacet extends li
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${when_js.when(shouldDisplaySearchResults(facetSearch), ()=>lit.html`
               ${when_js.when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {
@@ -9781,7 +9836,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.5",
+        version: "3.63.0",
         headlessVersion
     };
 }
@@ -9805,20 +9860,20 @@ function augmentAnalyticsConfigWithAtomicVersion() {
 const locales = {
     af: ()=>Promise.resolve().then(function () { return af$1; }),
     am: ()=>Promise.resolve().then(function () { return am$1; }),
-    'ar-IQ': ()=>Promise.resolve().then(function () { return arIq$1; }),
-    'ar-DZ': ()=>Promise.resolve().then(function () { return arDz$1; }),
-    'ar-KW': ()=>Promise.resolve().then(function () { return arKw$1; }),
-    'ar-LY': ()=>Promise.resolve().then(function () { return arLy$1; }),
-    'ar-MA': ()=>Promise.resolve().then(function () { return arMa$1; }),
-    'ar-SA': ()=>Promise.resolve().then(function () { return arSa$1; }),
-    'ar-TN': ()=>Promise.resolve().then(function () { return arTn$1; }),
+    'ar-iq': ()=>Promise.resolve().then(function () { return arIq$1; }),
+    'ar-dz': ()=>Promise.resolve().then(function () { return arDz$1; }),
+    'ar-kw': ()=>Promise.resolve().then(function () { return arKw$1; }),
+    'ar-ly': ()=>Promise.resolve().then(function () { return arLy$1; }),
+    'ar-ma': ()=>Promise.resolve().then(function () { return arMa$1; }),
+    'ar-sa': ()=>Promise.resolve().then(function () { return arSa$1; }),
+    'ar-tn': ()=>Promise.resolve().then(function () { return arTn$1; }),
     ar: ()=>Promise.resolve().then(function () { return ar$1; }),
     az: ()=>Promise.resolve().then(function () { return az$1; }),
     be: ()=>Promise.resolve().then(function () { return be$1; }),
     bg: ()=>Promise.resolve().then(function () { return bg$1; }),
     bi: ()=>Promise.resolve().then(function () { return bi$1; }),
     bm: ()=>Promise.resolve().then(function () { return bm$1; }),
-    'bn-BD': ()=>Promise.resolve().then(function () { return bnBd$1; }),
+    'bn-bd': ()=>Promise.resolve().then(function () { return bnBd$1; }),
     bn: ()=>Promise.resolve().then(function () { return bn$1; }),
     bo: ()=>Promise.resolve().then(function () { return bo$1; }),
     br: ()=>Promise.resolve().then(function () { return br$1; }),
@@ -9828,49 +9883,49 @@ const locales = {
     cv: ()=>Promise.resolve().then(function () { return cv$1; }),
     cy: ()=>Promise.resolve().then(function () { return cy$1; }),
     da: ()=>Promise.resolve().then(function () { return da$1; }),
-    'de-AT': ()=>Promise.resolve().then(function () { return deAt$1; }),
-    'de-CH': ()=>Promise.resolve().then(function () { return deCh$1; }),
+    'de-at': ()=>Promise.resolve().then(function () { return deAt$1; }),
+    'de-ch': ()=>Promise.resolve().then(function () { return deCh$1; }),
     de: ()=>Promise.resolve().then(function () { return de$1; }),
     dv: ()=>Promise.resolve().then(function () { return dv$1; }),
-    'en-AU': ()=>Promise.resolve().then(function () { return enAu$1; }),
+    'en-au': ()=>Promise.resolve().then(function () { return enAu$1; }),
     el: ()=>Promise.resolve().then(function () { return el$1; }),
-    'en-GB': ()=>Promise.resolve().then(function () { return enGb$1; }),
-    'en-IE': ()=>Promise.resolve().then(function () { return enIe$1; }),
-    'en-IL': ()=>Promise.resolve().then(function () { return enIl$1; }),
-    'en-IN': ()=>Promise.resolve().then(function () { return enIn$1; }),
-    'en-NZ': ()=>Promise.resolve().then(function () { return enNz$1; }),
-    'en-SG': ()=>Promise.resolve().then(function () { return enSg$1; }),
-    'en-TT': ()=>Promise.resolve().then(function () { return enTt$1; }),
-    'en-CA': ()=>Promise.resolve().then(function () { return enCa$1; }),
+    'en-gb': ()=>Promise.resolve().then(function () { return enGb$1; }),
+    'en-ie': ()=>Promise.resolve().then(function () { return enIe$1; }),
+    'en-il': ()=>Promise.resolve().then(function () { return enIl$1; }),
+    'en-in': ()=>Promise.resolve().then(function () { return enIn$1; }),
+    'en-nz': ()=>Promise.resolve().then(function () { return enNz$1; }),
+    'en-sg': ()=>Promise.resolve().then(function () { return enSg$1; }),
+    'en-tt': ()=>Promise.resolve().then(function () { return enTt$1; }),
+    'en-ca': ()=>Promise.resolve().then(function () { return enCa$1; }),
     en: ()=>Promise.resolve().then(function () { return en$1; }),
     eo: ()=>Promise.resolve().then(function () { return eo$1; }),
-    'es-MX': ()=>Promise.resolve().then(function () { return esMx$1; }),
-    'es-PR': ()=>Promise.resolve().then(function () { return esPr$1; }),
-    'es-US': ()=>Promise.resolve().then(function () { return esUs$1; }),
-    'es-DO': ()=>Promise.resolve().then(function () { return esDo$1; }),
+    'es-mx': ()=>Promise.resolve().then(function () { return esMx$1; }),
+    'es-pr': ()=>Promise.resolve().then(function () { return esPr$1; }),
+    'es-us': ()=>Promise.resolve().then(function () { return esUs$1; }),
+    'es-do': ()=>Promise.resolve().then(function () { return esDo$1; }),
     et: ()=>Promise.resolve().then(function () { return et$1; }),
     eu: ()=>Promise.resolve().then(function () { return eu$1; }),
     fa: ()=>Promise.resolve().then(function () { return fa$1; }),
     fi: ()=>Promise.resolve().then(function () { return fi$1; }),
-    'fr-CA': ()=>Promise.resolve().then(function () { return frCa$1; }),
-    'fr-CH': ()=>Promise.resolve().then(function () { return frCh$1; }),
+    'fr-ca': ()=>Promise.resolve().then(function () { return frCa$1; }),
+    'fr-ch': ()=>Promise.resolve().then(function () { return frCh$1; }),
     fr: ()=>Promise.resolve().then(function () { return fr$1; }),
     fo: ()=>Promise.resolve().then(function () { return fo$1; }),
     fy: ()=>Promise.resolve().then(function () { return fy$1; }),
     ga: ()=>Promise.resolve().then(function () { return ga$1; }),
     gd: ()=>Promise.resolve().then(function () { return gd$1; }),
     gl: ()=>Promise.resolve().then(function () { return gl$1; }),
-    'gom-LATN': ()=>Promise.resolve().then(function () { return gomLatn$1; }),
+    'gom-latn': ()=>Promise.resolve().then(function () { return gomLatn$1; }),
     gu: ()=>Promise.resolve().then(function () { return gu$1; }),
     he: ()=>Promise.resolve().then(function () { return he$1; }),
     hi: ()=>Promise.resolve().then(function () { return hi$1; }),
     hr: ()=>Promise.resolve().then(function () { return hr$1; }),
     ht: ()=>Promise.resolve().then(function () { return ht$1; }),
     hu: ()=>Promise.resolve().then(function () { return hu$1; }),
-    'hy-AM': ()=>Promise.resolve().then(function () { return hyAm$1; }),
+    'hy-am': ()=>Promise.resolve().then(function () { return hyAm$1; }),
     id: ()=>Promise.resolve().then(function () { return id$1; }),
     is: ()=>Promise.resolve().then(function () { return is$1; }),
-    'it-CH': ()=>Promise.resolve().then(function () { return itCh$1; }),
+    'it-ch': ()=>Promise.resolve().then(function () { return itCh$1; }),
     it: ()=>Promise.resolve().then(function () { return it$1; }),
     jv: ()=>Promise.resolve().then(function () { return jv$1; }),
     ka: ()=>Promise.resolve().then(function () { return ka$1; }),
@@ -9890,7 +9945,7 @@ const locales = {
     ml: ()=>Promise.resolve().then(function () { return ml$1; }),
     mn: ()=>Promise.resolve().then(function () { return mn$1; }),
     mr: ()=>Promise.resolve().then(function () { return mr$1; }),
-    'ms-MY': ()=>Promise.resolve().then(function () { return msMy$1; }),
+    'ms-my': ()=>Promise.resolve().then(function () { return msMy$1; }),
     ms: ()=>Promise.resolve().then(function () { return ms$1; }),
     mt: ()=>Promise.resolve().then(function () { return mt$1; }),
     lo: ()=>Promise.resolve().then(function () { return lo$1; }),
@@ -9898,11 +9953,11 @@ const locales = {
     nb: ()=>Promise.resolve().then(function () { return nb$1; }),
     ne: ()=>Promise.resolve().then(function () { return ne$1; }),
     nl: ()=>Promise.resolve().then(function () { return nl$1; }),
-    'nl-BE': ()=>Promise.resolve().then(function () { return nlBe$1; }),
+    'nl-be': ()=>Promise.resolve().then(function () { return nlBe$1; }),
     nn: ()=>Promise.resolve().then(function () { return nn$1; }),
-    'pa-IN': ()=>Promise.resolve().then(function () { return paIn$1; }),
+    'pa-in': ()=>Promise.resolve().then(function () { return paIn$1; }),
     pl: ()=>Promise.resolve().then(function () { return pl$1; }),
-    'pt-BR': ()=>Promise.resolve().then(function () { return ptBr$1; }),
+    'pt-br': ()=>Promise.resolve().then(function () { return ptBr$1; }),
     pt: ()=>Promise.resolve().then(function () { return pt$1; }),
     rn: ()=>Promise.resolve().then(function () { return rn$1; }),
     ro: ()=>Promise.resolve().then(function () { return ro$1; }),
@@ -9914,12 +9969,12 @@ const locales = {
     si: ()=>Promise.resolve().then(function () { return si$1; }),
     sk: ()=>Promise.resolve().then(function () { return sk$1; }),
     sl: ()=>Promise.resolve().then(function () { return sl$1; }),
-    'oc-LNC': ()=>Promise.resolve().then(function () { return ocLnc$1; }),
+    'oc-lnc': ()=>Promise.resolve().then(function () { return ocLnc$1; }),
     sq: ()=>Promise.resolve().then(function () { return sq$1; }),
-    'sr-CYRL': ()=>Promise.resolve().then(function () { return srCyrl$1; }),
+    'sr-cyrl': ()=>Promise.resolve().then(function () { return srCyrl$1; }),
     sr: ()=>Promise.resolve().then(function () { return sr$1; }),
     ss: ()=>Promise.resolve().then(function () { return ss$1; }),
-    'sv-FI': ()=>Promise.resolve().then(function () { return svFi$1; }),
+    'sv-fi': ()=>Promise.resolve().then(function () { return svFi$1; }),
     sv: ()=>Promise.resolve().then(function () { return sv$1; }),
     sw: ()=>Promise.resolve().then(function () { return sw$1; }),
     ta: ()=>Promise.resolve().then(function () { return ta$1; }),
@@ -9927,42 +9982,56 @@ const locales = {
     tet: ()=>Promise.resolve().then(function () { return tet$1; }),
     tg: ()=>Promise.resolve().then(function () { return tg$1; }),
     th: ()=>Promise.resolve().then(function () { return th$1; }),
-    'tl-PH': ()=>Promise.resolve().then(function () { return tlPh$1; }),
+    'tl-ph': ()=>Promise.resolve().then(function () { return tlPh$1; }),
     tlh: ()=>Promise.resolve().then(function () { return tlh$1; }),
     tr: ()=>Promise.resolve().then(function () { return tr$1; }),
     tzl: ()=>Promise.resolve().then(function () { return tzl$1; }),
     tzm: ()=>Promise.resolve().then(function () { return tzm$1; }),
-    'ug-CN': ()=>Promise.resolve().then(function () { return ugCn$1; }),
+    'ug-cn': ()=>Promise.resolve().then(function () { return ugCn$1; }),
     uk: ()=>Promise.resolve().then(function () { return uk$1; }),
     tk: ()=>Promise.resolve().then(function () { return tk$1; }),
     ur: ()=>Promise.resolve().then(function () { return ur$1; }),
-    'uz-LATN': ()=>Promise.resolve().then(function () { return uzLatn$1; }),
+    'uz-latn': ()=>Promise.resolve().then(function () { return uzLatn$1; }),
     uz: ()=>Promise.resolve().then(function () { return uz$1; }),
     vi: ()=>Promise.resolve().then(function () { return vi$1; }),
-    'x-PSEUDO': ()=>Promise.resolve().then(function () { return xPseudo$1; }),
-    'tzm-LATN': ()=>Promise.resolve().then(function () { return tzmLatn$1; }),
+    'x-pseudo': ()=>Promise.resolve().then(function () { return xPseudo$1; }),
+    'tzm-latn': ()=>Promise.resolve().then(function () { return tzmLatn$1; }),
     yo: ()=>Promise.resolve().then(function () { return yo$1; }),
-    'zh-CN': ()=>Promise.resolve().then(function () { return zhCn$1; }),
-    'zh-HK': ()=>Promise.resolve().then(function () { return zhHk$1; }),
-    'zh-TW': ()=>Promise.resolve().then(function () { return zhTw$1; }),
+    'zh-cn': ()=>Promise.resolve().then(function () { return zhCn$1; }),
+    'zh-hk': ()=>Promise.resolve().then(function () { return zhHk$1; }),
+    'zh-tw': ()=>Promise.resolve().then(function () { return zhTw$1; }),
     zh: ()=>Promise.resolve().then(function () { return zh$1; })
 };
 
 const warn = (language)=>console.warn(`Cannot load dayjs locale file for "${language}"`);
-const resolveLanguage = (languageInput)=>{
-    if (locales[languageInput]) return languageInput;
-    if (languageInput.includes('-')) {
-        const regionlessLanguage = languageInput.split('-')[0];
-        if (locales[regionlessLanguage]) return regionlessLanguage;
+const getCandidateLocales = (languageInput)=>{
+    try {
+        const { language, script, region } = new Intl.Locale(languageInput);
+        return [
+            languageInput,
+            ...region ? [
+                `${language}-${region}`
+            ] : [],
+            ...script ? [
+                `${language}-${script}`
+            ] : [],
+            language
+        ];
+    } catch  {
+        return [
+            languageInput,
+            languageInput.split('-')[0]
+        ];
     }
-    return languageInput;
 };
-function loadDayjsLocale(languageInput) {
+const resolveLanguage = (languageInput)=>getCandidateLocales(languageInput).map((locale)=>locale.toLowerCase()).find((locale)=>Object.hasOwn(locales, locale)) ?? languageInput;
+async function loadDayjsLocale(languageInput) {
     const language = resolveLanguage(languageInput);
     if (!locales[language]) return void warn(language);
     try {
-        locales[language]().then(()=>dayjs.locale(language));
-    } catch (_) {
+        await locales[language]();
+        dayjs.locale(language);
+    } catch  {
         warn(language);
     }
 }
@@ -10349,9 +10418,13 @@ function i18nBackendOptions(atomicInterface) {
         }
     };
 }
-function loadTranslations(atomicInterface, language) {
+async function loadTranslations(atomicInterface, language) {
+    const { languageUtils } = atomicInterface.i18n.services;
+    const languages = languageUtils.toResolveHierarchy(languageUtils.formatLanguageCode(language), false);
+    await Promise.all(languages.filter(isI18nLocaleAvailable).map((lng)=>loadTranslationBundle(atomicInterface, lng)));
+}
+function loadTranslationBundle(atomicInterface, lng) {
     const { i18n } = atomicInterface;
-    const lng = language.split('-')[0];
     return new Promise((resolve)=>{
         new Backend(i18n.services, i18nBackendOptions(atomicInterface)).read(lng, i18nTranslationNamespace, (_error, data)=>{
             if (data) i18n.addResourceBundle(lng, i18nTranslationNamespace, data, true, false);
@@ -10566,8 +10639,10 @@ class InterfaceController {
         this.host.updateIconAssetsPath();
         initEngine();
         if (this.host.registerFieldsToInclude) this.host.registerFieldsToInclude();
-        loadDayjsLocale(this.host.language || 'en');
-        await this.i18nPromise;
+        await Promise.all([
+            this.i18nPromise,
+            loadDayjsLocale(this.host.language || 'en')
+        ]);
         this.initComponents();
     }
     onAnalyticsChange() {
@@ -10580,8 +10655,10 @@ class InterfaceController {
         const language = newLanguage ?? this.host.language;
         const languageWithFallback = language ?? 'en';
         const { i18n } = this.host;
-        loadDayjsLocale(languageWithFallback);
-        loadTranslations(this.host, languageWithFallback).then(()=>{
+        Promise.all([
+            loadDayjsLocale(languageWithFallback),
+            loadTranslations(this.host, languageWithFallback)
+        ]).then(()=>{
             i18n.changeLanguage(language);
         });
     }
@@ -10709,6 +10786,18 @@ class SafeStorage {
     }
 }
 
+function withCountry(language, country) {
+    if (!country) return language;
+    try {
+        if (new Intl.Locale(language).region) return language;
+        return new Intl.Locale(language, {
+            region: country
+        }).toString();
+    } catch  {
+        return language;
+    }
+}
+
 function getAnalyticsConfig(commerceEngineConfig, enabled) {
     return {
         enabled,
@@ -10834,7 +10923,7 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = commerce.loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -10859,7 +10948,11 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
+    }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
     }
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
@@ -10900,7 +10993,10 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? withCountry(language, country) : language;
     }
     initRequestStatus() {
         this.searchOrListing = 'product-listing' === this.type ? commerce.buildProductListing(this.engine) : commerce.buildSearch(this.engine);
@@ -10964,7 +11060,7 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
     constructor(){
-        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.type = 'search', this.analytics = true, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.unsubscribeUrlManager = ()=>{}, this.unsubscribeSummary = ()=>{}, this.initialized = false, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.type = 'search', this.analytics = true, this.localizeWithCountry = false, this.reflectStateInUrl = true, this.disableStateReflectionInUrl = false, this.scrollContainer = 'atomic-commerce-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         }, this.onHashChange = ()=>{
             this.urlManager.synchronize(this.fragment);
@@ -11026,6 +11122,13 @@ _ts_decorate$T([
     }),
     _ts_metadata$G("design:type", String)
 ], AtomicCommerceInterface$1.prototype, "language", void 0);
+_ts_decorate$T([
+    decorators_js.property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceInterface$1.prototype, "localizeWithCountry", void 0);
 _ts_decorate$T([
     decorators_js.property({
         type: Object,
@@ -11081,6 +11184,12 @@ _ts_decorate$T([
     _ts_metadata$G("design:paramtypes", []),
     _ts_metadata$G("design:returntype", void 0)
 ], AtomicCommerceInterface$1.prototype, "updateLanguage", null);
+_ts_decorate$T([
+    watch('localizeWithCountry'),
+    _ts_metadata$G("design:type", Function),
+    _ts_metadata$G("design:paramtypes", []),
+    _ts_metadata$G("design:returntype", void 0)
+], AtomicCommerceInterface$1.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate$T([
     watch('iconAssetsPath'),
     _ts_metadata$G("design:type", Function),
@@ -11504,6 +11613,40 @@ const renderPagerNavigation = ({ props })=>(children)=>lit.html`<nav aria-label=
       <div part="buttons" class="flex flex-wrap gap-2">${children}</div>
     </nav>`;
 
+class PagerFitController {
+    hostConnected() {
+        this.resizeObserver = new ResizeObserver(()=>requestAnimationFrame(()=>this.reset()));
+        this.resizeObserver.observe(document.documentElement);
+        if (this.host.parentElement) this.resizeObserver.observe(this.host.parentElement);
+    }
+    hostDisconnected() {
+        this.resizeObserver?.disconnect();
+    }
+    hostUpdated() {
+        const root = this.host.shadowRoot;
+        const previousButton = root?.querySelector('[part="previous-button"]');
+        const nextButton = root?.querySelector('[part="next-button"]');
+        const pageButtonCount = root?.querySelectorAll('[part~="page-button"]').length ?? 0;
+        const isWrapping = !!previousButton && !!nextButton && nextButton.offsetTop > previousButton.offsetTop;
+        if (isWrapping && pageButtonCount > 1) {
+            this.maxPages = pageButtonCount - 1;
+            queueMicrotask(()=>this.host.requestUpdate());
+        }
+    }
+    getNumberOfPagesToDisplay(numberOfPages) {
+        return Math.min(numberOfPages, this.maxPages);
+    }
+    reset() {
+        this.maxPages = 1 / 0;
+        this.host.requestUpdate();
+    }
+    constructor(host){
+        this.host = host;
+        this.maxPages = 1 / 0;
+        host.addController(this);
+    }
+}
+
 const minimumPage = 0;
 function getCurrentPagesRange(page, desiredNumberOfPages, maxPage) {
     let range = buildRange(page, desiredNumberOfPages);
@@ -11568,7 +11711,7 @@ let AtomicCommercePager$1 = class AtomicCommercePager extends lit.LitElement {
         });
     }
     render() {
-        const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
+        const pagesRange = getCurrentPagesRange(this.pagerState.page, this.pagerFit.getNumberOfPagesToDisplay(this.numberOfPages), this.pagerState.totalPages - 1);
         return lit.html`
       ${when_js.when(this.pagerState.totalPages > 1 && this.isAppLoaded, ()=>lit.html`
           ${renderPagerNavigation({
@@ -11638,7 +11781,7 @@ let AtomicCommercePager$1 = class AtomicCommercePager extends lit.LitElement {
         });
     }
     constructor(){
-        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded, this.nextButtonIcon = arrow_right_rounded, this.ariaMessage = new AriaLiveRegionController(this, 'atomic-pager');
+        super(), this.isAppLoaded = false, this.numberOfPages = 5, this.previousButtonIcon = arrow_left_rounded, this.nextButtonIcon = arrow_right_rounded, this.ariaMessage = new AriaLiveRegionController(this, 'atomic-pager'), this.pagerFit = new PagerFitController(this);
         new ValidatePropsController(this, ()=>({
                 numberOfPages: this.numberOfPages
             }), AtomicCommercePager.propsSchema);
@@ -14443,7 +14586,7 @@ let AtomicCommerceProductsPerPage$1 = class AtomicCommerceProductsPerPage extend
     render() {
         return lit.html`
       ${when_js.when(!this.summaryState.hasError && this.summaryState.hasProducts && this.isAppLoaded, ()=>lit.html`
-          <div class="flex items-center">
+          <div class="flex flex-wrap items-center">
             ${renderLabel()(lit.html`${this.label}`)}
             ${renderFieldsetGroup({
                 props: {
@@ -14940,7 +15083,7 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     }
     updateLocale(language, country, currency) {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.context) return;
-        language && this.interfaceController.onLanguageChange(language);
+        if (language || country && this.localizeWithCountry) this.interfaceController.onLanguageChange(this.getLocale(language || this.context.state.language, country || this.context.state.country));
         if (this.isNewLocale(language, country, currency)) {
             const { setContext } = commerce.loadContextActions(this.engine);
             this.engine.dispatch(setContext({
@@ -14963,11 +15106,15 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    toggleLocalizeWithCountry() {
+        if (!this.context) return;
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) || !this.language || !this.context) return;
         this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
-        return this.interfaceController.onLanguageChange();
+        return this.interfaceController.onLanguageChange(this.getLocale(this.language, this.context.state.country));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -15008,14 +15155,17 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     }
     initLanguage() {
         if (!this.context || this.language) return;
-        this.interfaceController.onLanguageChange(this.context.state.language);
+        this.interfaceController.onLanguageChange(this.getLocale(this.context.state.language, this.context.state.country));
+    }
+    getLocale(language, country) {
+        return this.localizeWithCountry ? withCountry(language, country) : language;
     }
     isNewLocale(language, country, currency) {
         if (!this.context) return false;
         return language && language !== this.context.state.language || country && country !== this.context.state.country || currency && currency !== this.context.state.currency;
     }
     constructor(){
-        super(), this.bindings = {}, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.analytics = true, this.handleInitialization = (event)=>{
+        super(), this.bindings = {}, this.interfaceController = new InterfaceController(this, 'CoveoAtomic', commerce.VERSION), this.scrollContainer = 'atomic-commerce-recommendation-interface', this.languageAssetsPath = './lang', this.iconAssetsPath = './assets', this.localizeWithCountry = false, this.analytics = true, this.handleInitialization = (event)=>{
             this.interfaceController.onComponentInitializing(event);
         };
         this.store = createCommerceRecommendationStore();
@@ -15083,6 +15233,13 @@ _ts_decorate$v([
     }),
     _ts_metadata$n("design:type", String)
 ], AtomicCommerceRecommendationInterface$1.prototype, "language", void 0);
+_ts_decorate$v([
+    decorators_js.property({
+        type: Boolean,
+        attribute: 'localize-with-country',
+        reflect: true
+    })
+], AtomicCommerceRecommendationInterface$1.prototype, "localizeWithCountry", void 0);
 _ts_decorate$v([
     decorators_js.property({
         type: Boolean,
@@ -15103,6 +15260,12 @@ _ts_decorate$v([
     _ts_metadata$n("design:paramtypes", []),
     _ts_metadata$n("design:returntype", void 0)
 ], AtomicCommerceRecommendationInterface$1.prototype, "updateIconAssetsPath", null);
+_ts_decorate$v([
+    watch('localizeWithCountry'),
+    _ts_metadata$n("design:type", Function),
+    _ts_metadata$n("design:paramtypes", []),
+    _ts_metadata$n("design:returntype", void 0)
+], AtomicCommerceRecommendationInterface$1.prototype, "toggleLocalizeWithCountry", null);
 _ts_decorate$v([
     watch('language'),
     _ts_metadata$n("design:type", Function),