@coveo/atomic-react 3.11.34 → 3.11.36

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

@@ -360,8 +360,7 @@ const renderButton = ({ props })=>(children)=>{
       ?disabled=${props.disabled}
       ${props.ref ? ref_js.ref(props.ref) : lit.nothing}
     >
-      ${when_js.when(props.text, ()=>lit.html`<span class="truncate">${props.text}</span>`)}
-      ${children}
+      ${when_js.when(props.text, ()=>lit.html`<span class="truncate">${props.text}</span>`)} ${children}
     </button>`;
     };
 
@@ -3424,11 +3423,7 @@ const renderBreadcrumbContent = ({ props })=>{
     <span part="breadcrumb-value" class=${multiClassMap(valueClass)}>
       ${props.breadcrumb.content ?? value}
     </span>
-    <atomic-icon
-      part="breadcrumb-clear"
-      class="mt-px ml-2 h-2.5 w-2.5"
-      icon=${images_close}
-    >
+    <atomic-icon part="breadcrumb-clear" class="mt-px ml-2 h-2.5 w-2.5" icon=${images_close}>
     </atomic-icon>`;
 };
 
@@ -4157,13 +4152,8 @@ AtomicCommerceBreadbox$1 = _ts_decorate$12([
 ], AtomicCommerceBreadbox$1);
 
 const renderFacetContainer = ()=>(children)=>lit.html`
-      <div
-        class="bg-background border-neutral rounded-lg border p-4"
-        part="facet"
-      >
-        ${children}
-      </div>
-    `;
+    <div class="bg-background border-neutral rounded-lg border p-4" part="facet">${children}</div>
+  `;
 
 var arrow_bottom_rounded = "<svg viewBox=\"0 0 12.6 7.2\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.421 7.04c-.3 0-.5-.1-.7-.3l-4.6-4.6-4.6 4.6c-.4.4-1 .4-1.4 0s-.4-1 0-1.4l5.2-5.2c.4-.4 1.2-.4 1.6 0l5.2 5.2c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3\" transform=\"matrix(-1 0 0 -1 12.366 7.086)\"/></svg>";
 
@@ -4402,10 +4392,7 @@ const renderFacetSearchInput = ({ props })=>{
                     inputRef.value?.focus();
                 }
             }
-        })(lit.html`<atomic-icon
-              part="search-clear-button"
-              .icon=${images_close}
-            ></atomic-icon>`))}
+        })(lit.html`<atomic-icon part="search-clear-button" .icon=${images_close}></atomic-icon>`))}
       </div>
     </div>
   `;
@@ -4567,11 +4554,7 @@ const renderCategoryFacetAllCategoryButton = ({ props: { i18n, onClick, facetId,
             part: 'all-categories-button',
             onClick: onClick
         }
-    })(lit.html`<atomic-icon
-          aria-hidden="true"
-          icon=${arrow_left_rounded}
-          part="back-arrow"
-        ></atomic-icon>
+    })(lit.html`<atomic-icon aria-hidden="true" icon=${arrow_left_rounded} part="back-arrow"></atomic-icon>
         <span class="truncate">${allCategories}</span>`)}
   `;
 };
@@ -4605,11 +4588,7 @@ const renderCategoryFacetParentButton = ({ props })=>{
             ariaLabel: ariaLabel
         }
     })(lit.html`
-    <atomic-icon
-      icon=${arrow_left_rounded}
-      part="back-arrow"
-      class="back-arrow"
-    ></atomic-icon>
+    <atomic-icon icon=${arrow_left_rounded} part="back-arrow" class="back-arrow"></atomic-icon>
     <span class="truncate">${displayValue}</span>
   `);
 };
@@ -4710,9 +4689,7 @@ class HierarchicalPathDirective extends directive_js.Directive {
         const ellipsedPath = this.getEllipsedPath(path, maxLength, ellipsis);
         return ellipsedPath.map((value, index)=>lit.html`
         ${index > 0 ? lit.html`<span class=${separatorClass}>${separator}</span>` : ''}
-        <span class=${value === ellipsis ? ellipsisClass : itemClass}>
-          ${value}
-        </span>
+        <span class=${value === ellipsis ? ellipsisClass : itemClass}> ${value} </span>
       `);
     }
     getEllipsedPath(path, maxLength, ellipsis) {
@@ -4785,9 +4762,7 @@ const renderCategoryFacetSearchValue = ({ props })=>{
         path: localizedPath,
         separator: SEPARATOR,
         maxLength: PATH_MAX_LENGTH,
-        emptyPathContent: lit.html`<span class="truncate">
-            ${inLabel} ${allCategories}
-          </span>`,
+        emptyPathContent: lit.html`<span class="truncate"> ${inLabel} ${allCategories} </span>`,
         separatorClass: 'mx-0.5',
         itemClass: 'max-w-max flex-1 truncate',
         ellipsisClass: ''
@@ -5940,9 +5915,7 @@ class AtomicCommerceFacetNumberInput extends LightDomMixin(lit.LitElement) {
             return false;
         }}
       >
-        <label part="label-start" class=${labelClasses} for="${facetId}_start">
-          ${minText}
-        </label>
+        <label part="label-start" class=${labelClasses} for="${facetId}_start"> ${minText} </label>
         <input
           part="input-start"
           id="${facetId}_start"
@@ -5961,9 +5934,7 @@ class AtomicCommerceFacetNumberInput extends LightDomMixin(lit.LitElement) {
             this.startRef = ref;
         })}
         />
-        <label part="label-end" class=${labelClasses} for="${facetId}_end">
-          ${maxText}
-        </label>
+        <label part="label-end" class=${labelClasses} for="${facetId}_end"> ${maxText} </label>
         <input
           part="input-end"
           id="${facetId}_end"
@@ -6056,11 +6027,7 @@ class AtomicFacetPlaceholder extends lit.LitElement {
         class="bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7"
         aria-hidden="true"
       >
-        <div
-          part="title-skeleton"
-          class="bg-neutral h-8 rounded"
-          style="width: 75%;"
-        ></div>
+        <div part="title-skeleton" class="bg-neutral h-8 rounded" style="width: 75%;"></div>
         <div part="values-container" class="mt-7">
           ${map_js.map(Array.from({
             length: this.valueCount
@@ -6508,11 +6475,7 @@ class AtomicFacetDateInput extends LightDomMixin(lit.LitElement) {
             return false;
         }}
       >
-        <label
-          part="input-label"
-          class=${labelClasses}
-          for=${`${this.facetId}_start`}
-        >
+        <label part="input-label" class=${labelClasses} for=${`${this.facetId}_start`}>
           ${startLabel}:
         </label>
         <input
@@ -6532,11 +6495,7 @@ class AtomicFacetDateInput extends LightDomMixin(lit.LitElement) {
             this.start = parseDate(e.target.value).toDate();
         }}
         />
-        <label
-          part="input-label"
-          class=${labelClasses}
-          for=${`${this.facetId}_end`}
-        >
+        <label part="input-label" class=${labelClasses} for=${`${this.facetId}_end`}>
           ${endLabel}:
         </label>
         <input
@@ -6774,10 +6733,10 @@ let AtomicCommerceTimeframeFacet$1 = class AtomicCommerceTimeframeFacet extends
     render() {
         const { hasError, firstRequestExecuted } = this.summaryState;
         return lit.html`${when_js.when(!hasError && firstRequestExecuted && this.shouldRenderFacet, ()=>renderFacetContainer()(lit.html`${this.renderHeader()}
-          ${when_js.when(!this.isCollapsed, ()=>lit.html`
-              ${when_js.when(this.shouldRenderValues, ()=>this.renderValues())}
-              ${when_js.when(this.shouldRenderInput, ()=>this.renderDateInput())}
-            `)}`))}`;
+        ${when_js.when(!this.isCollapsed, ()=>lit.html`
+            ${when_js.when(this.shouldRenderValues, ()=>this.renderValues())}
+            ${when_js.when(this.shouldRenderInput, ()=>this.renderDateInput())}
+          `)}`))}`;
     }
     updated(changedProps) {
         super.updated(changedProps);
@@ -6894,9 +6853,7 @@ let AtomicCommerceFacets$1 = class AtomicCommerceFacets extends LightDomMixin(li
     renderFacetPlaceholders() {
         return map_js.map(Array.from({
             length: this.collapseFacetsAfter
-        }), ()=>lit.html`<atomic-facet-placeholder
-          value-count="8"
-        ></atomic-facet-placeholder>`);
+        }), ()=>lit.html`<atomic-facet-placeholder value-count="8"></atomic-facet-placeholder>`);
     }
     renderFacets() {
         return map_js.map(this.facetGenerator.facets, (facet, index)=>{
@@ -9340,7 +9297,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.60.2",
+        version: "3.60.4",
         headlessVersion
     };
 }
@@ -10596,9 +10553,7 @@ let AtomicCommerceInterface$1 = class AtomicCommerceInterface extends ChildrenUp
     scrollToTop() {
         const scrollContainerElement = document.querySelector(this.scrollContainer);
         if (!scrollContainerElement) return void console.warn(`Could not find the scroll container with the selector "${this.scrollContainer}". This will prevent UX interactions that require a scroll from working correctly. Please review the CSS selector in the scrollContainer option`);
-        scrollContainerElement.scrollIntoView({
-            behavior: 'smooth'
-        });
+        scrollContainerElement.scrollIntoView();
     }
     updateHash() {
         const newFragment = this.urlManager.state.fragment;
@@ -10779,11 +10734,7 @@ class LayoutStylesController {
 
 const styles$8 = lit.css`.atomic-modal-opened{overflow-y:hidden}atomic-layout-section[section=search]{grid-area:atomic-section-search}atomic-layout-section[section=facets]{grid-area:atomic-section-facets}atomic-layout-section[section=main]{grid-area:atomic-section-main}atomic-layout-section[section=status]{grid-area:atomic-section-status}atomic-layout-section[section=pagination]{grid-area:atomic-section-pagination}atomic-commerce-layout{display:none;grid-template-areas:". atomic-section-search ." ". atomic-section-main .";grid-template-columns:var(--atomic-layout-spacing-x) minmax(0,1fr) var(
         --atomic-layout-spacing-x
-      );height:100%;width:100%;atomic-layout-section[section=search]{justify-self:center;margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width,678px);width:100%;atomic-commerce-search-box{&::part(suggestions-double-list){max-width:var(
-            --atomic-layout-max-search-box-double-suggestions-width,800px
-          );width:125%}&::part(suggestions-left){flex-basis:var(
-            --atomic-layout-search-box-left-suggestions-width,30%
-          )}&::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}}}atomic-layout-section[section=facets]{display:none;atomic-commerce-facets *{margin-bottom:var(--atomic-layout-spacing-y)}}atomic-layout-section[section=main]{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=horizontal-facets]{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:.5rem;&>atomic-popover{display:none;margin-right:.5rem}}atomic-layout-section[section=horizontal-facets]>*{max-width:100%}atomic-layout-section[section=status]{display:grid;grid-template-areas:"atomic-breadbox       atomic-breadbox" "atomic-query-summary  atomic-sort" "atomic-did-you-mean   atomic-did-you-mean" "atomic-notifications  atomic-notifications";justify-content:space-between;atomic-commerce-breadbox{grid-area:atomic-breadbox}atomic-commerce-query-summary{align-self:center;grid-area:atomic-query-summary;overflow:hidden}atomic-commerce-sort-dropdown{grid-area:atomic-sort;justify-self:end}atomic-commerce-refine-toggle{grid-area:atomic-sort}atomic-commerce-did-you-mean{grid-area:atomic-did-you-mean}atomic-commerce-notifications{grid-area:atomic-notifications}}atomic-layout-section[section=status]>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=pagination]{align-items:center;display:flex;flex-direction:column;justify-content:space-between;atomic-commerce-load-more-products{width:100%}&:has(:only-child){justify-content:center}@media only screen and (min-width:50rem){flex-direction:row}}atomic-layout-section[section=pagination]>*{margin-top:var(--atomic-layout-spacing-y)}}`;
+      );height:100%;width:100%;atomic-layout-section[section=search]{justify-self:center;margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width,678px);width:100%;atomic-commerce-search-box{&::part(suggestions-double-list){max-width:var(--atomic-layout-max-search-box-double-suggestions-width,800px);width:125%}&::part(suggestions-left){flex-basis:var(--atomic-layout-search-box-left-suggestions-width,30%)}&::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}}}atomic-layout-section[section=facets]{display:none;atomic-commerce-facets *{margin-bottom:var(--atomic-layout-spacing-y)}}atomic-layout-section[section=main]{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=horizontal-facets]{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:.5rem;&>atomic-popover{display:none;margin-right:.5rem}}atomic-layout-section[section=horizontal-facets]>*{max-width:100%}atomic-layout-section[section=status]{display:grid;grid-template-areas:"atomic-breadbox       atomic-breadbox" "atomic-query-summary  atomic-sort" "atomic-did-you-mean   atomic-did-you-mean" "atomic-notifications  atomic-notifications";justify-content:space-between;atomic-commerce-breadbox{grid-area:atomic-breadbox}atomic-commerce-query-summary{align-self:center;grid-area:atomic-query-summary;overflow:hidden}atomic-commerce-sort-dropdown{grid-area:atomic-sort;justify-self:end}atomic-commerce-refine-toggle{grid-area:atomic-sort}atomic-commerce-did-you-mean{grid-area:atomic-did-you-mean}atomic-commerce-notifications{grid-area:atomic-notifications}}atomic-layout-section[section=status]>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=pagination]{align-items:center;display:flex;flex-direction:column;justify-content:space-between;atomic-commerce-load-more-products{width:100%}&:has(:only-child){justify-content:center}@media only screen and (min-width:50rem){flex-direction:row}}atomic-layout-section[section=pagination]>*{margin-top:var(--atomic-layout-spacing-y)}}`;
 var atomic_commerce_layout_tw_css = styles$8;
 
 function _ts_decorate$S(decorators, target, key, desc) {
@@ -10851,9 +10802,7 @@ const renderLoadMoreButton = ({ props })=>{
     })(lit.html`${i18n.t(label)}`);
 };
 
-const renderLoadMoreContainer = ()=>(children)=>lit.html`
-      <div class="flex flex-col items-center" part="container">${children}</div>
-    `;
+const renderLoadMoreContainer = ()=>(children)=>lit.html` <div class="flex flex-col items-center" part="container">${children}</div> `;
 
 const renderLoadMoreProgressBar = ({ props })=>{
     const { from, to } = props;
@@ -10883,9 +10832,7 @@ const renderLoadMoreSummary = ({ props })=>{
         total: wrapHighlight(to.toLocaleString(locale))
     });
     return lit.html`
-    <div class="text-neutral-dark my-2 text-lg" part="showing-results">
-      ${unsafeHtml_js.unsafeHTML(content)}
-    </div>
+    <div class="text-neutral-dark my-2 text-lg" part="showing-results">${unsafeHtml_js.unsafeHTML(content)}</div>
   `;
 };
 
@@ -10982,11 +10929,9 @@ AtomicCommerceLoadMoreProducts$1 = _ts_decorate$R([
 ], AtomicCommerceLoadMoreProducts$1);
 
 const renderNoItemsContainer = ()=>(children)=>lit.html`
-      <div class="text-on-background flex h-full w-full flex-col items-center">
-        ${children}
-      </div>
-      <slot></slot>
-    `;
+    <div class="text-on-background flex h-full w-full flex-col items-center">${children}</div>
+    <slot></slot>
+  `;
 
 class NoItemsGuardDirective extends directive_js.Directive {
     render({ firstSearchExecuted, isLoading, hasResults }, content) {
@@ -11026,12 +10971,7 @@ const renderNoItems = ({ props })=>{
         }
     }) : props.i18n.t(props.i18nKey);
     return lit.html`
-    <div
-      class="my-2 max-w-full text-center text-2xl font-medium"
-      part="no-results"
-    >
-      ${content}
-    </div>
+    <div class="my-2 max-w-full text-center text-2xl font-medium" part="no-results">${content}</div>
   `;
 };
 
@@ -11075,8 +11015,7 @@ let AtomicCommerceNoProducts$1 = class AtomicCommerceNoProducts extends lit.LitE
             firstSearchExecuted: this.summaryState.firstRequestExecuted,
             hasResults: this.summaryState.hasProducts
         }, ()=>renderNoItemsContainer()(lit.html`
-          ${renderMagnifyingGlass()} ${this.renderNoItems()}
-          ${this.renderSearchTips()}
+          ${renderMagnifyingGlass()} ${this.renderNoItems()} ${this.renderSearchTips()}
         `))}`;
     }
     renderNoItems() {
@@ -12424,10 +12363,7 @@ let AtomicProductLink$1 = class AtomicProductLink extends LightDomMixin(SlotsFor
                     }
                 }
             })(lit.html`
-        ${this.renderDefaultSlotContent(lit.html`<atomic-product-text
-            field="ec_name"
-            default="no-title"
-          ></atomic-product-text>`)}
+        ${this.renderDefaultSlotContent(lit.html`<atomic-product-text field="ec_name" default="no-title"></atomic-product-text>`)}
       `);
         })}`;
     }
@@ -12537,11 +12473,7 @@ const renderImageCarousel = ({ props })=>{
                 class: `${commonPaginationClasses} right-0 mr-1`
             }
         })(lit.html`
-      <atomic-icon
-        part="next-icon"
-        icon=${arrow_right}
-        class=${commonArrowClasses}
-      ></atomic-icon>
+      <atomic-icon part="next-icon" icon=${arrow_right} class=${commonArrowClasses}></atomic-icon>
     `);
     const renderIndicators = ()=>renderCarouselIndicator({
             props: {
@@ -12559,9 +12491,7 @@ const renderImageCarousel = ({ props })=>{
       aria-label=${props.label}
     >
       ${renderPreviousButton()}
-      <div class="w-full h-full" aria-live="polite" aria-atomic="false">
-        ${children}
-      </div>
+      <div class="w-full h-full" aria-live="polite" aria-atomic="false">${children}</div>
       ${renderNextButton()} ${renderIndicators()}
     </div>`;
     };
@@ -13197,10 +13127,7 @@ class AtomicResultPlaceholder extends lit.LitElement {
     renderExcerptLine(width) {
         return lit.html`
       <div style="height: var(--line-height); width: ${width};">
-        <div
-          class=${placeholderClasses}
-          style="height: var(--font-size);"
-        ></div>
+        <div class=${placeholderClasses} style="height: var(--font-size);"></div>
       </div>
     `;
     }
@@ -13234,11 +13161,7 @@ class AtomicResultPlaceholder extends lit.LitElement {
           <div class="fields-placeholder">
             ${Array.from({
             length: 4
-        }, ()=>lit.html`
-                <div
-                  class="field-value-placeholder ${placeholderClasses}"
-                ></div>
-              `)}
+        }, ()=>lit.html` <div class="field-value-placeholder ${placeholderClasses}"></div> `)}
           </div>
         </atomic-result-section-bottom-metadata>
       </div>
@@ -13289,22 +13212,13 @@ class AtomicResultTablePlaceholder extends lit.LitElement {
         <thead aria-hidden="true">
           <tr>
             <th>
-              <div
-                class="mt-2 h-8 block bg-neutral rounded"
-                style="width: 14.5rem;"
-              ></div>
+              <div class="mt-2 h-8 block bg-neutral rounded" style="width: 14.5rem;"></div>
             </th>
             <th>
-              <div
-                class="mt-2 h-8 block bg-neutral rounded"
-                style="width: 9.75rem;"
-              ></div>
+              <div class="mt-2 h-8 block bg-neutral rounded" style="width: 9.75rem;"></div>
             </th>
             <th>
-              <div
-                class="mt-2 h-8 block bg-neutral rounded"
-                style="width: 6.5rem;"
-              ></div>
+              <div class="mt-2 h-8 block bg-neutral rounded" style="width: 6.5rem;"></div>
             </th>
           </tr>
         </thead>
@@ -13314,30 +13228,15 @@ class AtomicResultTablePlaceholder extends lit.LitElement {
         }), ()=>lit.html`
               <tr>
                 <td>
-                  <div
-                    class="mb-6 h-8 block bg-neutral rounded"
-                    style="width: 22.875rem;"
-                  ></div>
-                  <div
-                    class="mb-2 h-5 block bg-neutral rounded"
-                    style="width: 23.75rem;"
-                  ></div>
-                  <div
-                    class="h-5 block bg-neutral rounded"
-                    style="width: 11.5rem;"
-                  ></div>
+                  <div class="mb-6 h-8 block bg-neutral rounded" style="width: 22.875rem;"></div>
+                  <div class="mb-2 h-5 block bg-neutral rounded" style="width: 23.75rem;"></div>
+                  <div class="h-5 block bg-neutral rounded" style="width: 11.5rem;"></div>
                 </td>
                 <td>
-                  <div
-                    class="mt-1.5 h-5 block bg-neutral rounded"
-                    style="width: 11rem;"
-                  ></div>
+                  <div class="mt-1.5 h-5 block bg-neutral rounded" style="width: 11rem;"></div>
                 </td>
                 <td>
-                  <div
-                    class="mt-1.5 h-5 block bg-neutral rounded"
-                    style="width: 4.875rem;"
-                  ></div>
+                  <div class="mt-1.5 h-5 block bg-neutral rounded" style="width: 4.875rem;"></div>
                 </td>
               </tr>
             `)}
@@ -13417,9 +13316,7 @@ const renderListWrapper = ({ props })=>{
 };
 const renderListRoot = ({ props })=>{
     const { listClasses } = props;
-    return (children)=>lit.html`<div class="list-root ${listClasses}" part="result-list">
-      ${children}
-    </div>`;
+    return (children)=>lit.html`<div class="list-root ${listClasses}" part="result-list">${children}</div>`;
 };
 
 const renderGridLayout = ({ props })=>{
@@ -13537,17 +13434,11 @@ const renderTableLayout = ({ props })=>{
     const { host, listClasses, logger, label } = props;
     const fieldColumns = getFieldTableColumns(props);
     if (!fieldColumns.length) logger.error('atomic-table-element elements missing in the template to display columns.', host);
-    return (children)=>lit.html`<table
-      class="list-root ${listClasses}"
-      part="result-table"
-      aria-label=${label}
-    >
+    return (children)=>lit.html`<table class="list-root ${listClasses}" part="result-table" aria-label=${label}>
       <thead part="result-table-heading">
         <tr part="result-table-heading-row">
           ${map_js.map(fieldColumns, (column)=>lit.html`<th part="result-table-heading-cell">
-              <atomic-text
-                .value=${column.getAttribute('label')}
-              ></atomic-text>
+              <atomic-text .value=${column.getAttribute('label')}></atomic-text>
             </th>`)}
         </tr>
       </thead>
@@ -14026,12 +13917,7 @@ const renderChoices = ({ props })=>{
         else if (choice > pageSize) focusOnNextNewResult();
     };
     return lit.html`
-    <div
-      part="buttons"
-      role="radiogroup"
-      aria-label=${label}
-      class="flex flex-wrap gap-2"
-    >
+    <div part="buttons" role="radiogroup" aria-label=${label} class="flex flex-wrap gap-2">
       ${choices.map((choice)=>{
         const isSelected = pageSize === choice;
         const parts = [
@@ -14062,14 +13948,14 @@ const renderChoices = ({ props })=>{
 };
 
 const renderLabel = ()=>(children)=>lit.html`
-      <span
-        part="label"
-        class="text-on-background mr-3 self-start text-lg leading-10"
-        aria-hidden="true"
-      >
-        ${children}
-      </span>
-    `;
+    <span
+      part="label"
+      class="text-on-background mr-3 self-start text-lg leading-10"
+      aria-hidden="true"
+    >
+      ${children}
+    </span>
+  `;
 
 class ChoiceIsNaNError extends Error {
     constructor(choice){
@@ -14313,11 +14199,7 @@ const renderQueryErrorLink = ({ props })=>{
         }
     };
     const link = getErrorLink();
-    return link ? lit.html`<a
-        href=${link}
-        part="doc-link"
-        class="btn-primary mt-10 inline-block p-3"
-      >
+    return link ? lit.html`<a href=${link} part="doc-link" class="btn-primary mt-10 inline-block p-3">
         ${props.i18n.t('coveo-online-help')}
       </a>` : lit.nothing;
 };
@@ -14451,9 +14333,7 @@ const renderQuerySummaryContainer = ({ props })=>(children)=>{
             'text-on-background': true,
             [props.additionalClasses ?? '']: Boolean(props.additionalClasses)
         };
-        return lit.html`
-      <div class=${multiClassMap(classNames)} part="container">${children}</div>
-    `;
+        return lit.html` <div class=${multiClassMap(classNames)} part="container">${children}</div> `;
     };
 
 const renderQuerySummaryGuard = ({ props })=>(children)=>{
@@ -14680,9 +14560,7 @@ let AtomicCommerceRecommendationInterface$1 = class AtomicCommerceRecommendation
     scrollToTop() {
         const scrollContainerElement = document.querySelector(this.scrollContainer);
         if (!scrollContainerElement) return void this.bindings.engine.logger.warn(`Could not find the scroll container with the selector "${this.scrollContainer}". This will prevent UX interactions that require a scroll from working correctly. Please review the CSS selector in the scrollContainer option`);
-        scrollContainerElement.scrollIntoView({
-            behavior: 'smooth'
-        });
+        scrollContainerElement.scrollIntoView();
     }
     async internalInitialization(initEngine) {
         await Promise.all([
@@ -14894,9 +14772,7 @@ const renderCarousel = ({ props })=>(children)=>{
             ${renderPreviousButton(numberOfPages, previousPage, props.bindings)}
             ${renderNextButton(numberOfPages, nextPage, props.bindings)}
           </div>
-          <div class="carousel-items" aria-live="polite" aria-atomic="false">
-            ${children}
-          </div>
+          <div class="carousel-items" aria-live="polite" aria-atomic="false">${children}</div>
         </div>
         ${renderIndicators(numberOfPages, currentPage)}
       </div>
@@ -15012,10 +14888,7 @@ let AtomicCommerceRecommendationList$1 = class AtomicCommerceRecommendationList
         if (!this.augmentedRecommendationListState.headline) return;
         if (this.augmentedRecommendationListState.hasError) return;
         if (!this.isEveryProductReady && this.isAppLoaded) return lit.html`
-        <div
-          aria-hidden="true"
-          class="bg-neutral my-2 h-8 w-60 animate-pulse rounded"
-        ></div>
+        <div aria-hidden="true" class="bg-neutral my-2 h-8 w-60 animate-pulse rounded"></div>
       `;
         return lit.html`${renderHeading({
             props: {
@@ -15315,10 +15188,7 @@ const renderRefineModalBody = (i18n)=>(children)=>lit.html`
 
 const renderRefineModalFiltersSection = ({ props })=>(children)=>lit.html`
       <div part="filter-section" class="mt-8 mb-3 flex w-full justify-between">
-        <h2
-          part="section-title section-filters-title"
-          class="truncate text-2xl font-bold"
-        >
+        <h2 part="section-title section-filters-title" class="truncate text-2xl font-bold">
           ${props.i18n.t('filters')}
         </h2>
         ${children}
@@ -15636,11 +15506,7 @@ const renderRefineModal = ({ props })=>(children)=>{
                     onClick: props.onClose,
                     ariaLabel: props.i18n.t('close')
                 }
-            })(lit.html`<atomic-icon
-              part="close-icon"
-              class="h-5 w-5"
-              icon=${images_close}
-            ></atomic-icon>`)}
+            })(lit.html`<atomic-icon part="close-icon" class="h-5 w-5" icon=${images_close}></atomic-icon>`)}
         </div>
       `;
         const renderFooter = ()=>lit.html`
@@ -15690,10 +15556,7 @@ const renderRefineModal = ({ props })=>(children)=>{
 var sort = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M7.5 6L7.5 17\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M11 14L7.5 18L4 14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M16.5 18L16.5 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M13 10L16.5 6L20 10\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
 
 const renderRefineModalSortSection = ({ props })=>(children)=>lit.html`
-      <h2
-        part="section-title section-sort-title"
-        class="mb-3 truncate text-2xl font-bold"
-      >
+      <h2 part="section-title section-sort-title" class="mb-3 truncate text-2xl font-bold">
         ${props.i18n.t('sort')}
       </h2>
       <div part="select-wrapper" class="relative">
@@ -15709,18 +15572,12 @@ const renderRefineModalSortSection = ({ props })=>(children)=>lit.html`
           part="select-icon-wrapper"
           class="peer-hover:text-primary-light peer-focus-within:text-primary-light pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-center pr-6"
         >
-          <atomic-icon
-            part="select-icon"
-            icon=${sort}
-            class="h-6 w-6"
-          ></atomic-icon>
+          <atomic-icon part="select-icon" icon=${sort} class="h-6 w-6"></atomic-icon>
         </div>
       </div>
     `;
 
-const renderSortOption = ({ props: { value, selected, i18n, label } })=>lit.html`
-    <option value=${value} ?selected=${selected}>${i18n.t(label)}</option>
-  `;
+const renderSortOption = ({ props: { value, selected, i18n, label } })=>lit.html` <option value=${value} ?selected=${selected}>${i18n.t(label)}</option> `;
 
 const renderCommerceSortOption = ({ props })=>{
     const { sort } = props;
@@ -16014,11 +15871,7 @@ const renderSearchBoxWrapper = ({ props })=>(children)=>{
             'focus-within:border-disabled focus-within:ring-neutral': props.disabled,
             'focus-within:border-primary focus-within:ring-ring-primary': !props.disabled
         });
-        return lit.html`<div
-      part="wrapper"
-      class=${multiClassMap(classes)}
-      @focusout=${props.onFocusout}
-    >
+        return lit.html`<div part="wrapper" class=${multiClassMap(classes)} @focusout=${props.onFocusout}>
       ${children}
     </div>`;
     };
@@ -16041,11 +15894,7 @@ const renderTextAreaClearButton = ({ props: { textAreaRef, i18n, onClick } })=>l
             },
             ariaLabel: i18n.t('clear-searchbox')
         }
-    })(lit.html`<atomic-icon
-        part="clear-icon"
-        icon=${clear_slim}
-        class="h-4 w-4"
-      ></atomic-icon>`)}
+    })(lit.html`<atomic-icon part="clear-icon" icon=${clear_slim} class="h-4 w-4"></atomic-icon>`)}
   </div>`;
 
 function syncTextWithReplica(ref, value) {
@@ -16139,10 +15988,7 @@ var search_slim = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"
 
 const renderSubmitButton = ({ props })=>{
     const { i18n, disabled, onClick } = props;
-    return lit.html`<div
-    part="submit-button-wrapper"
-    class="mr-2 flex items-center justify-center py-2"
-  >
+    return lit.html`<div part="submit-button-wrapper" class="mr-2 flex items-center justify-center py-2">
     ${renderButton({
         props: {
             style: 'text-primary',
@@ -16154,11 +16000,7 @@ const renderSubmitButton = ({ props })=>{
             },
             disabled
         }
-    })(lit.html`<atomic-icon
-        part="submit-icon"
-        icon=${search_slim}
-        class="h-4 w-4"
-      ></atomic-icon>`)}
+    })(lit.html`<atomic-icon part="submit-icon" icon=${search_slim} class="h-4 w-4"></atomic-icon>`)}
   </div>`;
 };
 
@@ -16490,16 +16332,16 @@ let AtomicCommerceSearchBoxInstantProducts$1 = class AtomicCommerceSearchBoxInst
             const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-products-suggestion-label', this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
             const key = `instant-product-${encodeForDomAttribute(product.permanentid)}`;
             const template = lit.html`${keyed_js.keyed(key, lit.html`<atomic-product
-            part="outline"
-            .product=${product}
-            .interactiveProduct=${interactiveProduct}
-            .display=${this.display}
-            .density=${this.density}
-            .imageSize=${this.imageSize}
-            .content=${this.itemTemplateProvider.getTemplateContent(product)}
-            .stopPropagation=${false}
-            .renderingFunction=${this.itemRenderingFunction}
-          ></atomic-product>`)}`;
+          part="outline"
+          .product=${product}
+          .interactiveProduct=${interactiveProduct}
+          .display=${this.display}
+          .density=${this.density}
+          .imageSize=${this.imageSize}
+          .content=${this.itemTemplateProvider.getTemplateContent(product)}
+          .stopPropagation=${false}
+          .renderingFunction=${this.itemRenderingFunction}
+        ></atomic-product>`)}`;
             const container = document.createElement('div');
             lit.render(template, container);
             const productElement = container.firstElementChild;
@@ -16628,10 +16470,7 @@ const getPartialSearchBoxSuggestionElement = (suggestion, i18n)=>({
 const renderQuerySuggestion = ({ icon, hasQuery, suggestion, hasMultipleKindOfSuggestions, alwaysShowIcon = false })=>{
     const shouldShowIcon = alwaysShowIcon || hasMultipleKindOfSuggestions;
     const template = lit.html`
-    <div
-      part="query-suggestion-content"
-      class="pointer-events-none flex items-center"
-    >
+    <div part="query-suggestion-content" class="pointer-events-none flex items-center">
       ${shouldShowIcon ? lit.html`<atomic-icon
             part="query-suggestion-icon"
             icon=${icon}
@@ -16786,11 +16625,7 @@ const renderRecentQuery = ({ icon, query, value })=>{
     part="recent-query-content"
     class="pointer-events-none flex items-center text-left break-all"
   >
-    <atomic-icon
-      part="recent-query-icon"
-      icon=${icon}
-      class="mr-2 h-4 w-4 shrink-0"
-    ></atomic-icon>
+    <atomic-icon part="recent-query-icon" icon=${icon} class="mr-2 h-4 w-4 shrink-0"></atomic-icon>
 
     ${when_js.when(hasQuery, ()=>lit.html`<span
           part="recent-query-text"
@@ -16806,9 +16641,7 @@ const renderRecentQuery = ({ icon, query, value })=>{
                 }
             ]
         })}
-        ></span>`, ()=>lit.html`<span part="recent-query-text" class="line-clamp-2 break-all">
-          ${value}
-        </span>`)}
+        ></span>`, ()=>lit.html`<span part="recent-query-text" class="line-clamp-2 break-all"> ${value} </span>`)}
   </div>`;
     const container = document.createElement('div');
     lit.render(template, container);
@@ -16819,9 +16652,7 @@ const renderRecentQueryClear = ({ i18n })=>{
     part="recent-query-title-content"
     class="pointer-events-none flex w-full justify-between"
   >
-    <span class="font-bold" part="recent-query-title">
-      ${i18n.t('recent-searches')}
-    </span>
+    <span class="font-bold" part="recent-query-title"> ${i18n.t('recent-searches')} </span>
     <span part="recent-query-clear">${i18n.t('clear')}</span>
   </div>`;
     const container = document.createElement('div');
@@ -19093,11 +18924,7 @@ AtomicCommerceSearchBox$1 = _ts_decorate$n([
     withTailwindStyles
 ], AtomicCommerceSearchBox$1);
 
-const renderSortLabel = ({ props: { i18n, id } })=>lit.html`<label
-    class="m-2 cursor-pointer text-sm font-bold"
-    part="label"
-    for=${id}
-  >
+const renderSortLabel = ({ props: { i18n, id } })=>lit.html`<label class="m-2 cursor-pointer text-sm font-bold" part="label" for=${id}>
     ${i18n.t('with-colon', {
         text: i18n.t('sort-by')
     })}
@@ -19290,9 +19117,7 @@ let AtomicProductChildren$1 = class AtomicProductChildren extends LightDomMixin(
     renderLabel() {
         return lit.html`
       <div class="text-neutral-dark my-2 font-semibold">
-        <atomic-commerce-text
-          .value=${this.bindings.i18n.t(this.label)}
-        ></atomic-commerce-text>
+        <atomic-commerce-text .value=${this.bindings.i18n.t(this.label)}></atomic-commerce-text>
       </div>
     `;
     }
@@ -19389,11 +19214,7 @@ const renderExpandableText = ({ props: { isExpanded, isTruncated, isCollapsible,
         const buttonLabel = isExpanded ? showLessLabel : showMoreLabel;
         const icon = isExpanded ? minus : plus;
         return lit.html`<div class="flex flex-col items-start">
-      <div
-        part="expandable-text"
-        class="${multiClassMap(expandableTextClasses)}"
-        ${ref_js.ref(textRef)}
-      >
+      <div part="expandable-text" class="${multiClassMap(expandableTextClasses)}" ${ref_js.ref(textRef)}>
         ${children}
       </div>
 
@@ -19407,10 +19228,7 @@ const renderExpandableText = ({ props: { isExpanded, isTruncated, isCollapsible,
                 },
                 onClick: onToggleExpand
             }
-        })(lit.html` <atomic-icon
-            icon="${icon}"
-            class="mx-1 w-2 align-baseline"
-          ></atomic-icon>
+        })(lit.html` <atomic-icon icon="${icon}" class="mx-1 w-2 align-baseline"></atomic-icon>
           ${buttonLabel}`)}
     </div>`;
     };
@@ -19478,9 +19296,7 @@ let AtomicProductDescription$1 = class AtomicProductDescription extends LightDom
                 isCollapsible: this.isCollapsible,
                 textRef: this.descriptionRef
             }
-        })(lit.html`
-      <atomic-product-text field=${this.field}></atomic-product-text>
-    `)}`;
+        })(lit.html` <atomic-product-text field=${this.field}></atomic-product-text> `)}`;
     }
     constructor(){
         super(), this.productController = createProductContextController(this), this.isExpanded = false, this.isTruncated = false, this.descriptionRef = ref_js.createRef(), this.truncateAfter = '2', this.field = 'ec_shortdesc', this.isCollapsible = false, this.onToggleExpand = (e)=>{
@@ -19763,9 +19579,7 @@ let AtomicProductMultiValueText$1 = class AtomicProductMultiValueText extends li
         const kebabValue = titleToKebab(value);
         return lit.html`
       <li part="product-multi-value-text-value" class="inline-block">
-        <slot name=${`product-multi-value-text-value-${kebabValue}`}>
-          ${label}
-        </slot>
+        <slot name=${`product-multi-value-text-value-${kebabValue}`}> ${label} </slot>
       </li>
     `;
     }
@@ -19803,10 +19617,7 @@ let AtomicProductMultiValueText$1 = class AtomicProductMultiValueText extends li
     render() {
         if (0 === this.sortedValues.length) return lit.nothing;
         return lit.html`
-      <ul
-        part="product-multi-value-text-list"
-        class="m-0 flex list-none p-0 set-font-size-sm"
-      >
+      <ul part="product-multi-value-text-list" class="m-0 flex list-none p-0 set-font-size-sm">
         ${this.renderListItems(this.sortedValues)}
       </ul>
     `;
@@ -20061,12 +19872,9 @@ const renderRating = ({ props })=>{
     })}
   >
     <div class="z-0 flex gap-0.5">${emptyIconDisplay()}</div>
-    <div
-      class="absolute top-0 left-0 z-1 flex gap-0.5 overflow-hidden"
-      style=${styleMap_js.styleMap({
+    <div class="absolute top-0 left-0 z-1 flex gap-0.5 overflow-hidden" style=${styleMap_js.styleMap({
         width
-    })}
-    >
+    })}>
       ${filledIconDisplay()}
     </div>
   </div>`;
@@ -20127,9 +19935,7 @@ let AtomicProductRating$1 = class AtomicProductRating extends LightDomMixin(lit.
                 }
             })}
             ${when_js.when(null !== this.ratingDetails, ()=>lit.html`
-                <span class="text-neutral-dark rating-details pl-1">
-                  (${this.ratingDetails})
-                </span>
+                <span class="text-neutral-dark rating-details pl-1"> (${this.ratingDetails}) </span>
               `)}
           </div>
         `)}
@@ -20591,9 +20397,7 @@ let AtomicGeneratedAnswerFeedbackModal$1 = class AtomicGeneratedAnswerFeedbackMo
             ${this.bindings.i18n.t(label)}
             <span class=${multiClassMap({
             'text-error-red ml-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
           </label>
         </div>
         <span
@@ -20633,29 +20437,29 @@ let AtomicGeneratedAnswerFeedbackModal$1 = class AtomicGeneratedAnswerFeedbackMo
                     label: this.bindings.i18n.t(localeKey)
                 }
             })(lit.html`
-              <div
-                class=${multiClassMap({
+            <div
+              class=${multiClassMap({
                 'answer-evaluation mt-3 flex items-center': true,
                 [String(correspondingAnswer)]: true
             })}
-                key=${String(correspondingAnswer)}
-              >
-                <div class=${multiClassMap({
+              key=${String(correspondingAnswer)}
+            >
+              <div class=${multiClassMap({
                 'flex-1 pr-4': true
             })}>
-                  ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
-                </div>
-                <div
-                  class=${multiClassMap({
+                ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
+              </div>
+              <div
+                class=${multiClassMap({
                 'options flex flex-shrink-0 text-base': true
             })}
-                >
-                  ${this.renderFeedbackOption('yes', correspondingAnswer)}
-                  ${this.renderFeedbackOption('unknown', correspondingAnswer)}
-                  ${this.renderFeedbackOption('no', correspondingAnswer)}
-                </div>
+              >
+                ${this.renderFeedbackOption('yes', correspondingAnswer)}
+                ${this.renderFeedbackOption('unknown', correspondingAnswer)}
+                ${this.renderFeedbackOption('no', correspondingAnswer)}
               </div>
-            `))}
+            </div>
+          `))}
       </fieldset>
     `;
     }
@@ -20718,18 +20522,12 @@ let AtomicGeneratedAnswerFeedbackModal$1 = class AtomicGeneratedAnswerFeedbackMo
     }
     renderSuccessMessage() {
         return lit.html`
-      <div
-        slot="body"
-        class=${multiClassMap({
+      <div slot="body" class=${multiClassMap({
             'my-4 flex flex-col items-center gap-4': true
-        })}
-      >
-        <atomic-icon
-          icon=${success}
-          class=${multiClassMap({
+        })}>
+        <atomic-icon icon=${success} class=${multiClassMap({
             'w-48': true
-        })}
-        ></atomic-icon>
+        })}></atomic-icon>
         <p
           class=${multiClassMap({
             'text-base': true
@@ -20751,19 +20549,15 @@ let AtomicGeneratedAnswerFeedbackModal$1 = class AtomicGeneratedAnswerFeedbackMo
         const buttonClasses = 'flex items-center justify-center text-sm leading-4 p-2 rounded-md';
         return lit.html`
       <div slot="footer" part="modal-footer">
-        <div
-          class=${multiClassMap({
+        <div class=${multiClassMap({
             'flex items-center justify-between': true
-        })}
-        >
+        })}>
           <div class=${multiClassMap({
             'required-label text-base': true
         })}>
             <span class=${multiClassMap({
             'text-error-red mr-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
             ${this.bindings.i18n.t('required-fields')}
           </div>
           <div class=${multiClassMap({
@@ -21409,7 +21203,7 @@ const ListWrapper$1 = (props) => {
             }
         });
     }, [otherProps.display, template]);
-    return (React.createElement(AtomicCommerceProductList, { ref: commerceProductListRef, ...otherProps }));
+    return React.createElement(AtomicCommerceProductList, { ref: commerceProductListRef, ...otherProps });
 };
 const isTemplate = (template) => {
     return template.linkTemplate !== undefined;
@@ -21459,8 +21253,7 @@ const InterfaceWrapper = (props) => {
     React.useEffect(() => {
         const CommerceRecommendationInterfaceAtomic = interfaceRef.current;
         if (!initialization) {
-            initialization =
-                CommerceRecommendationInterfaceAtomic.initializeWithEngine(engine);
+            initialization = CommerceRecommendationInterfaceAtomic.initializeWithEngine(engine);
             initialization.then(() => {
                 localization(CommerceRecommendationInterfaceAtomic.i18n);
             });