@coveo/atomic 3.64.1 → 3.65.0

package/custom-elements.json

@@ -6818,21 +6818,25 @@
               "name": "recent-query-text-highlight"
             },
             {
-              "description": "The clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.",
+              "description": "The clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-title-item"
             },
             {
-              "description": "The contents of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.",
+              "description": "The contents of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-title-content"
             },
             {
-              "description": "The \"recent searches\" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.",
+              "description": "The \"recent searches\" title above the recent queries from the `atomic-commerce-search-box-recent-queries` component.",
               "name": "recent-query-title"
             },
             {
-              "description": "The \"clear\" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.",
+              "description": "The \"clear\" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-clear"
             },
+            {
+              "description": "The button below suggestions to clear the recent queries from the `atomic-commerce-search-box-recent-queries` component, when `clear-recent-button-position` is `bottom`.",
+              "name": "recent-query-clear-button"
+            },
             {
               "description": "An instant product rendered by an `atomic-commerce-search-box-instant-products` component.",
               "name": "instant-results-item"
@@ -6853,6 +6857,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "propsSchema",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Schema({ clearRecentButtonPosition: new StringValue({constrainTo: ['top', 'bottom']}), })"
+            },
             {
               "kind": "field",
               "name": "shadowRootOptions",
@@ -6899,6 +6911,16 @@
               "name": "textAreaRef",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "setLeftPanel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "setRightPanel",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "searchBoxSuggestionEventsQueue",
@@ -7016,6 +7038,18 @@
               "attribute": "clear-filters",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "clearRecentButtonPosition",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "privacy": "public",
+              "default": "'top'",
+              "description": "The position of the option to clear the recent queries.\n\n- `top`: The option is the first suggestion, next to the \"Recent searches\" title.\n- `bottom`: The option is a button below the suggestions, so the arrow keys only navigate through the suggestions and the button is reached with the Tab key.\n\nIn the next major version of Atomic (v4), `bottom` will become the default behavior. To adopt it ahead of time, set this property to `bottom`.",
+              "attribute": "clear-recent-button-position",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "initialize",
@@ -7189,6 +7223,30 @@
               "name": "renderTextBox",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "clearRecentQueriesElement",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderRecentQueriesTitle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderClearRecentQueriesButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "SearchBoxSuggestionElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderSuggestions",
@@ -7335,6 +7393,15 @@
               "default": "true",
               "description": "Whether to clear all active query filters when the end user submits a new query from the search box.\nSetting this option to \"false\" is not recommended and can lead to an increasing number of queries returning no products.",
               "fieldName": "clearFilters"
+            },
+            {
+              "name": "clear-recent-button-position",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'top'",
+              "description": "The position of the option to clear the recent queries.\n\n- `top`: The option is the first suggestion, next to the \"Recent searches\" title.\n- `bottom`: The option is a button below the suggestions, so the arrow keys only navigate through the suggestions and the button is reached with the Tab key.\n\nIn the next major version of Atomic (v4), `bottom` will become the default behavior. To adopt it ahead of time, set this property to `bottom`.",
+              "fieldName": "clearRecentButtonPosition"
             }
           ],
           "superclass": {
@@ -42069,100 +42136,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This section is intended to render an informative summary of the result's content\n\nBehavior:\n* Has a fixed height of one to three lines, depending on the layout and density.\n* Ellipses overflowing text.\n* Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n* Has a defined CSS `color` property for text.",
-          "name": "AtomicResultSectionExcerpt",
-          "mixins": [
-            {
-              "name": "ItemSectionMixin",
-              "package": "@/src/mixins/item-section-mixin"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "atomic-result-section-excerpt",
-          "customElement": true,
-          "members": [
-            {
-              "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "styles",
-              "inheritedFrom": {
-                "name": "ItemSectionMixin",
-                "module": "src/mixins/item-section-mixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "injectStyles",
-              "parameters": [
-                {
-                  "name": "dynamicStyles",
-                  "optional": true,
-                  "type": {
-                    "text": "CSSResultGroup"
-                  },
-                  "description": "Optional dynamic styles to inject along with static styles"
-                }
-              ],
-              "description": "Injects styles into the document or shadow root.\n\nWhen called without arguments, injects the component's static styles.\nWhen called with dynamic styles, injects both static and dynamic styles.",
-              "inheritedFrom": {
-                "name": "LightDomMixin",
-                "module": "src/mixins/light-dom.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getStyleSheet",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "CSSStyleSheet | null"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "style",
-                  "type": {
-                    "text": "CSSResultOrNative | CSSResultArray | null | undefined"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "LightDomMixin",
-                "module": "src/mixins/light-dom.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AtomicResultSectionExcerpt",
-          "declaration": {
-            "name": "AtomicResultSectionExcerpt",
-            "module": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "atomic-result-section-excerpt",
-          "declaration": {
-            "name": "AtomicResultSectionExcerpt",
-            "module": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/search/atomic-result-section-title/atomic-result-section-title.ts",
@@ -43408,21 +43381,25 @@
               "name": "recent-query-text-highlight"
             },
             {
-              "description": "The clear button above suggestions from the `atomic-search-box-recent-queries` component.",
+              "description": "The clear button above suggestions from the `atomic-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-title-item"
             },
             {
-              "description": "The contents of the clear button above suggestions from the `atomic-search-box-recent-queries` component.",
+              "description": "The contents of the clear button above suggestions from the `atomic-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-title-content"
             },
             {
-              "description": "The \"recent searches\" text of the clear button above suggestions from the `atomic-search-box-recent-queries` component.",
+              "description": "The \"recent searches\" title above the recent queries from the `atomic-search-box-recent-queries` component.",
               "name": "recent-query-title"
             },
             {
-              "description": "The \"clear\" text of the clear button above suggestions from the `atomic-search-box-recent-queries` component.",
+              "description": "The \"clear\" text of the clear button above suggestions from the `atomic-search-box-recent-queries` component, when `clear-recent-button-position` is `top`.",
               "name": "recent-query-clear"
             },
+            {
+              "description": "The button below suggestions to clear the recent queries from the `atomic-search-box-recent-queries` component, when `clear-recent-button-position` is `bottom`.",
+              "name": "recent-query-clear-button"
+            },
             {
               "description": "An instant result rendered by an `atomic-search-box-instant-results` component.",
               "name": "instant-results-item"
@@ -43443,6 +43420,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "propsSchema",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Schema({ clearRecentButtonPosition: new StringValue({constrainTo: ['top', 'bottom']}), })"
+            },
             {
               "kind": "field",
               "name": "shadowRootOptions",
@@ -43489,6 +43474,16 @@
               "name": "textAreaRef",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "setLeftPanel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "setRightPanel",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "searchBoxSuggestionEventsQueue",
@@ -43625,6 +43620,18 @@
               "attribute": "enable-query-syntax",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "clearRecentButtonPosition",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "privacy": "public",
+              "default": "'top'",
+              "description": "The position of the option to clear the recent queries.\n\n- `top`: The option is the first suggestion, next to the \"Recent searches\" title.\n- `bottom`: The option is a button below the suggestions, so the arrow keys only navigate through the suggestions and the button is reached with the Tab key.\n\nIn the next major version of Atomic (v4), `bottom` will become the default behavior. To adopt it ahead of time, set this property to `bottom`.",
+              "attribute": "clear-recent-button-position",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "initialize",
@@ -43790,6 +43797,30 @@
               "name": "renderTextBox",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "clearRecentQueriesElement",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderRecentQueriesTitle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderClearRecentQueriesButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "SearchBoxSuggestionElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderSuggestions",
@@ -43940,6 +43971,15 @@
               "default": "false",
               "description": "Whether to interpret advanced [Coveo query syntax](https://docs.coveo.com/en/1552/) in the query.\nYou should only enable query syntax in the search box if you have good reasons to do so, as it\nrequires end users to be familiar with Coveo query syntax, otherwise they will likely be surprised\nby the search box behaviour.\n\nWhen the `redirection-url` property is set and redirects to a page with more `atomic-search-box` components, all `atomic-search-box` components need to have the same `enable-query-syntax` value.",
               "fieldName": "enableQuerySyntax"
+            },
+            {
+              "name": "clear-recent-button-position",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'top'",
+              "description": "The position of the option to clear the recent queries.\n\n- `top`: The option is the first suggestion, next to the \"Recent searches\" title.\n- `bottom`: The option is a button below the suggestions, so the arrow keys only navigate through the suggestions and the button is reached with the Tab key.\n\nIn the next major version of Atomic (v4), `bottom` will become the default behavior. To adopt it ahead of time, set this property to `bottom`.",
+              "fieldName": "clearRecentButtonPosition"
             }
           ],
           "superclass": {
@@ -43969,6 +44009,100 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This section is intended to render an informative summary of the result's content\n\nBehavior:\n* Has a fixed height of one to three lines, depending on the layout and density.\n* Ellipses overflowing text.\n* Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n* Has a defined CSS `color` property for text.",
+          "name": "AtomicResultSectionExcerpt",
+          "mixins": [
+            {
+              "name": "ItemSectionMixin",
+              "package": "@/src/mixins/item-section-mixin"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "atomic-result-section-excerpt",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "styles",
+              "inheritedFrom": {
+                "name": "ItemSectionMixin",
+                "module": "src/mixins/item-section-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "injectStyles",
+              "parameters": [
+                {
+                  "name": "dynamicStyles",
+                  "optional": true,
+                  "type": {
+                    "text": "CSSResultGroup"
+                  },
+                  "description": "Optional dynamic styles to inject along with static styles"
+                }
+              ],
+              "description": "Injects styles into the document or shadow root.\n\nWhen called without arguments, injects the component's static styles.\nWhen called with dynamic styles, injects both static and dynamic styles.",
+              "inheritedFrom": {
+                "name": "LightDomMixin",
+                "module": "src/mixins/light-dom.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getStyleSheet",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CSSStyleSheet | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "style",
+                  "type": {
+                    "text": "CSSResultOrNative | CSSResultArray | null | undefined"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "LightDomMixin",
+                "module": "src/mixins/light-dom.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AtomicResultSectionExcerpt",
+          "declaration": {
+            "name": "AtomicResultSectionExcerpt",
+            "module": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "atomic-result-section-excerpt",
+          "declaration": {
+            "name": "AtomicResultSectionExcerpt",
+            "module": "src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.ts",

package/dist/cjs/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.cjs

@@ -30,11 +30,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     AtomicCommerceSearchBox: ()=>AtomicCommerceSearchBox
 });
+const bueno_namespaceObject = require("@coveo/bueno");
 const commerce_namespaceObject = require("@coveo/headless/commerce");
 const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
 const class_map_js_namespaceObject = require("lit/directives/class-map.js");
 const ref_js_namespaceObject = require("lit/directives/ref.js");
+const when_js_namespaceObject = require("lit/directives/when.js");
+const button_cjs_namespaceObject = require("../../common/button.cjs");
+const validate_props_controller_cjs_namespaceObject = require("../../common/validate-props-controller/validate-props-controller.cjs");
 const boolean_converter_cjs_namespaceObject = require("../../../converters/boolean-converter.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
 const binding_guard_cjs_namespaceObject = require("../../../decorators/binding-guard.cjs");
@@ -258,7 +262,7 @@ class AtomicCommerceSearchBox extends external_lit_namespaceObject.LitElement {
                 }
                 break;
             case 'Tab':
-                this.suggestionManager.clearSuggestions();
+                if ('bottom' !== this.clearRecentButtonPosition || !this.clearRecentQueriesElement) this.suggestionManager.clearSuggestions();
                 break;
             default:
                 if (this.suggestionManager.keyboardActiveDescendant) this.suggestionManager.updateKeyboardActiveDescendant();
@@ -323,11 +327,59 @@ class AtomicCommerceSearchBox extends external_lit_namespaceObject.LitElement {
             }
         })}`;
     }
+    get clearRecentQueriesElement() {
+        const { leftSuggestionElements, rightSuggestionElements } = this.suggestionManager;
+        return [
+            leftSuggestionElements,
+            rightSuggestionElements
+        ].flatMap((elements)=>elements.slice(0, -1)).find((element)=>'recent-query-clear' === element.key);
+    }
+    renderRecentQueriesTitle() {
+        return (0, external_lit_namespaceObject.html)`<div
+      part="recent-query-title"
+      class="text-neutral-dark flex min-h-10 items-center px-4 font-bold"
+      @mousedown=${(e)=>e.preventDefault()}
+    >
+      ${this.bindings.i18n.t('recent-searches')}
+    </div>`;
+    }
+    renderClearRecentQueriesButton(element) {
+        const deselectSuggestion = ()=>{
+            this.suggestionManager.updateKeyboardActiveDescendant();
+            this.suggestionManager.updateActiveDescendant();
+        };
+        return (0, external_lit_namespaceObject.html)`<div
+      class="border-neutral flex border-t"
+      @mousedown=${(e)=>e.preventDefault()}
+      @mouseenter=${deselectSuggestion}
+      @focusin=${deselectSuggestion}
+      @keydown=${(e)=>{
+            if ('Escape' !== e.key) return;
+            this.textAreaRef.value?.focus();
+            this.isExpanded = false;
+            this.suggestionManager.clearSuggestions();
+        }}
+    >
+      ${(0, button_cjs_namespaceObject.renderButton)({
+            props: {
+                style: 'text-primary',
+                text: this.bindings.i18n.t('clear-recent-searches'),
+                part: 'recent-query-clear-button',
+                class: 'focus-visible:ring-ring-primary flex min-h-12 w-full items-center justify-center rounded-none px-4 focus-visible:ring-2 focus-visible:ring-inset',
+                onClick: (e)=>{
+                    element.onSelect?.(e);
+                    this.textAreaRef.value?.focus();
+                }
+            }
+        })(external_lit_namespaceObject.nothing)}
+    </div>`;
+    }
     renderSuggestions() {
         const part = `suggestions-wrapper ${this.suggestionManager.isDoubleList ? 'suggestions-double-list' : 'suggestions-single-list'}`;
         const isVisible = this.suggestionManager.hasSuggestions && this.isExpanded && !this.isSearchDisabledForEndUser;
         const classes = {
             'bg-background border-neutral absolute top-full left-0 z-10 flex w-full rounded-md border': true,
+            'overflow-hidden': 'bottom' === this.clearRecentButtonPosition,
             hidden: !isVisible
         };
         return (0, external_lit_namespaceObject.html)`<div
@@ -338,25 +390,43 @@ class AtomicCommerceSearchBox extends external_lit_namespaceObject.LitElement {
       aria-label=${this.bindings.i18n.t(this.suggestionManager.isDoubleList ? 'search-suggestions-double-list' : 'search-suggestions-single-list')}
       aria-activedescendant=${this.suggestionManager.activeDescendant}
     >
-      ${this.renderPanel('left', this.suggestionManager.leftSuggestionElements, (el)=>{
-            this.suggestionManager.leftPanel = el;
-        }, ()=>this.suggestionManager.leftPanel)}
-      ${this.renderPanel('right', this.suggestionManager.rightSuggestionElements, (el)=>{
-            this.suggestionManager.rightPanel = el;
-        }, ()=>this.suggestionManager.rightPanel)}
+      ${this.renderPanel('left', this.suggestionManager.leftSuggestionElements, this.setLeftPanel, ()=>this.suggestionManager.leftPanel)}
+      ${this.renderPanel('right', this.suggestionManager.rightSuggestionElements, this.setRightPanel, ()=>this.suggestionManager.rightPanel)}
     </div>`;
     }
     renderPanel(side, elements, setRef, getRef) {
-        if (!elements.length) return null;
+        let listElements = elements;
+        let isListNested = false;
+        let recentQueriesTitle;
+        let clearRecentQueriesButton;
+        switch(this.clearRecentButtonPosition){
+            case 'bottom':
+                {
+                    isListNested = true;
+                    const clearElement = this.clearRecentQueriesElement;
+                    if (clearElement && elements.includes(clearElement)) {
+                        listElements = elements.filter((element)=>element !== clearElement);
+                        clearRecentQueriesButton = this.renderClearRecentQueriesButton(clearElement);
+                        if (elements[0] === clearElement) recentQueriesTitle = this.renderRecentQueriesTitle();
+                    }
+                    break;
+                }
+        }
+        if (!listElements.length) return null;
+        const suggestions = listElements.map((suggestion, index)=>this.renderSuggestion(suggestion, index, listElements.length - 1, side));
         return (0, external_lit_namespaceObject.html)`<div
       part="suggestions suggestions-${side}"
-      ${(0, ref_js_namespaceObject.ref)(setRef)}
+      ${(0, ref_js_namespaceObject.ref)(isListNested ? void 0 : setRef)}
       class="flex grow basis-1/2 flex-col"
       @mousedown=${(e)=>{
             if (e.target === getRef()) e.preventDefault();
         }}
     >
-      ${elements.map((suggestion, index)=>this.renderSuggestion(suggestion, index, elements.length - 1, side))}
+      ${recentQueriesTitle}
+      ${(0, when_js_namespaceObject.when)(isListNested, ()=>(0, external_lit_namespaceObject.html)`<div class="flex grow flex-col" ${(0, ref_js_namespaceObject.ref)(setRef)}>
+            ${suggestions}
+          </div>`, ()=>suggestions)}
+      ${clearRecentQueriesButton}
     </div>`;
     }
     renderSuggestion(item, index, lastIndex, side) {
@@ -422,10 +492,25 @@ class AtomicCommerceSearchBox extends external_lit_namespaceObject.LitElement {
     announceClearSearchBoxToScreenReader() {
         this.searchBoxAriaMessage.message = this.bindings.i18n.t('search-box-cleared');
     }
-    constructor(...args){
-        super(...args), this.isExpanded = false, this.textAreaRef = (0, ref_js_namespaceObject.createRef)(), this.searchBoxSuggestionEventsQueue = [], this.searchBoxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'search-box'), this.suggestionsAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'search-suggestions', true), this.numberOfQueries = 8, this.suggestionTimeout = 400, this.suggestionDelay = 0, this.disableSearch = false, this.minimumQueryLength = 0, this.clearFilters = true, this.updateBreakpoints = (0, utils_cjs_namespaceObject.once)(()=>(0, replace_breakpoint_utils_cjs_namespaceObject.updateBreakpoints)(this));
+    constructor(){
+        super(), this.isExpanded = false, this.textAreaRef = (0, ref_js_namespaceObject.createRef)(), this.setLeftPanel = (el)=>{
+            this.suggestionManager.leftPanel = el;
+        }, this.setRightPanel = (el)=>{
+            this.suggestionManager.rightPanel = el;
+        }, this.searchBoxSuggestionEventsQueue = [], this.searchBoxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'search-box'), this.suggestionsAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'search-suggestions', true), this.numberOfQueries = 8, this.suggestionTimeout = 400, this.suggestionDelay = 0, this.disableSearch = false, this.minimumQueryLength = 0, this.clearFilters = true, this.clearRecentButtonPosition = 'top', this.updateBreakpoints = (0, utils_cjs_namespaceObject.once)(()=>(0, replace_breakpoint_utils_cjs_namespaceObject.updateBreakpoints)(this));
+        new validate_props_controller_cjs_namespaceObject.ValidatePropsController(this, ()=>({
+                clearRecentButtonPosition: this.clearRecentButtonPosition
+            }), AtomicCommerceSearchBox.propsSchema);
     }
 }
+AtomicCommerceSearchBox.propsSchema = new bueno_namespaceObject.Schema({
+    clearRecentButtonPosition: new bueno_namespaceObject.StringValue({
+        constrainTo: [
+            'top',
+            'bottom'
+        ]
+    })
+});
 AtomicCommerceSearchBox.shadowRootOptions = {
     ...external_lit_namespaceObject.LitElement.shadowRootOptions,
     delegatesFocus: true
@@ -499,6 +584,14 @@ _ts_decorate([
         converter: boolean_converter_cjs_namespaceObject.booleanConverter
     })
 ], AtomicCommerceSearchBox.prototype, "clearFilters", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: String,
+        attribute: 'clear-recent-button-position',
+        reflect: true
+    }),
+    _ts_metadata("design:type", String)
+], AtomicCommerceSearchBox.prototype, "clearRecentButtonPosition", void 0);
 _ts_decorate([
     (0, watch_cjs_namespaceObject.watch)('redirectionUrl'),
     _ts_metadata("design:type", Function),
@@ -515,7 +608,9 @@ _ts_decorate([
 AtomicCommerceSearchBox = _ts_decorate([
     (0, decorators_js_namespaceObject.customElement)('atomic-commerce-search-box'),
     (0, bindings_cjs_namespaceObject.bindings)(),
-    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
+    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles,
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [])
 ], AtomicCommerceSearchBox);
 exports.AtomicCommerceSearchBox = __webpack_exports__.AtomicCommerceSearchBox;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/cjs/components/commerce/product-list/product-template-provider.cjs

@@ -33,6 +33,8 @@ __webpack_require__.d(__webpack_exports__, {
 const commerce_namespaceObject = require("@coveo/headless/commerce");
 const template_provider_cjs_namespaceObject = require("../../common/template-provider/template-provider.cjs");
 require("../atomic-product-template/atomic-product-template.cjs");
+require("../atomic-product-section-name/atomic-product-section-name.cjs");
+require("../atomic-product-section-visual/atomic-product-section-visual.cjs");
 class ProductTemplateProvider extends template_provider_cjs_namespaceObject.TemplateProvider {
     makeDefaultTemplate() {
         const content = document.createDocumentFragment();