@coveo/atomic 3.64.0 → 3.65.0

package/dist/esm/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -1,8 +1,12 @@
+import { Schema, StringValue } from "@coveo/bueno";
 import { buildSearchBox, buildStandaloneSearchBox, loadQuerySetActions } from "@coveo/headless/commerce";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { when } from "lit/directives/when.js";
+import { renderButton } from "../../common/button.js";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
 import { booleanConverter } from "../../../converters/boolean-converter.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
@@ -226,7 +230,7 @@ class AtomicCommerceSearchBox extends 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();
@@ -291,11 +295,59 @@ class AtomicCommerceSearchBox extends 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 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 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();
+        }}
+    >
+      ${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();
+                }
+            }
+        })(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 html`<div
@@ -306,25 +358,43 @@ class AtomicCommerceSearchBox extends 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 html`<div
       part="suggestions suggestions-${side}"
-      ${ref(setRef)}
+      ${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}
+      ${when(isListNested, ()=>html`<div class="flex grow flex-col" ${ref(setRef)}>
+            ${suggestions}
+          </div>`, ()=>suggestions)}
+      ${clearRecentQueriesButton}
     </div>`;
     }
     renderSuggestion(item, index, lastIndex, side) {
@@ -390,10 +460,25 @@ class AtomicCommerceSearchBox extends LitElement {
     announceClearSearchBoxToScreenReader() {
         this.searchBoxAriaMessage.message = this.bindings.i18n.t('search-box-cleared');
     }
-    constructor(...args){
-        super(...args), this.isExpanded = false, this.textAreaRef = createRef(), this.searchBoxSuggestionEventsQueue = [], this.searchBoxAriaMessage = new AriaLiveRegionController(this, 'search-box'), this.suggestionsAriaMessage = new 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 = once(()=>updateBreakpoints(this));
+    constructor(){
+        super(), this.isExpanded = false, this.textAreaRef = createRef(), this.setLeftPanel = (el)=>{
+            this.suggestionManager.leftPanel = el;
+        }, this.setRightPanel = (el)=>{
+            this.suggestionManager.rightPanel = el;
+        }, this.searchBoxSuggestionEventsQueue = [], this.searchBoxAriaMessage = new AriaLiveRegionController(this, 'search-box'), this.suggestionsAriaMessage = new 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 = once(()=>updateBreakpoints(this));
+        new ValidatePropsController(this, ()=>({
+                clearRecentButtonPosition: this.clearRecentButtonPosition
+            }), AtomicCommerceSearchBox.propsSchema);
     }
 }
+AtomicCommerceSearchBox.propsSchema = new Schema({
+    clearRecentButtonPosition: new StringValue({
+        constrainTo: [
+            'top',
+            'bottom'
+        ]
+    })
+});
 AtomicCommerceSearchBox.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true
@@ -465,6 +550,14 @@ _ts_decorate([
         converter: booleanConverter
     })
 ], AtomicCommerceSearchBox.prototype, "clearFilters", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        attribute: 'clear-recent-button-position',
+        reflect: true
+    }),
+    _ts_metadata("design:type", String)
+], AtomicCommerceSearchBox.prototype, "clearRecentButtonPosition", void 0);
 _ts_decorate([
     watch('redirectionUrl'),
     _ts_metadata("design:type", Function),
@@ -481,6 +574,8 @@ _ts_decorate([
 AtomicCommerceSearchBox = _ts_decorate([
     customElement('atomic-commerce-search-box'),
     bindings(),
-    withTailwindStyles
+    withTailwindStyles,
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [])
 ], AtomicCommerceSearchBox);
 export { AtomicCommerceSearchBox };

package/dist/esm/components/commerce/product-list/product-template-provider.js

@@ -1,6 +1,8 @@
 import { buildProductTemplatesManager } from "@coveo/headless/commerce";
 import { TemplateProvider } from "../../common/template-provider/template-provider.js";
 import "../atomic-product-template/atomic-product-template.js";
+import "../atomic-product-section-name/atomic-product-section-name.js";
+import "../atomic-product-section-visual/atomic-product-section-visual.js";
 class ProductTemplateProvider extends TemplateProvider {
     makeDefaultTemplate() {
         const content = document.createDocumentFragment();

package/dist/esm/components/common/atomic-focus-trap/atomic-focus-trap.js

@@ -28,6 +28,10 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
         if (element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || 'atomic-aria-live' === element.tagName.toLowerCase()) return;
         element.setAttribute('aria-hidden', 'true');
         this.hiddenElements.push(element);
+        if (!element.hasAttribute('inert')) {
+            element.setAttribute('inert', '');
+            this.inertElements.push(element);
+        }
     }
     showAll() {
         let el = this.hiddenElements.pop();
@@ -35,6 +39,11 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
             el.removeAttribute('aria-hidden');
             el = this.hiddenElements.pop();
         }
+        let inertElement = this.inertElements.pop();
+        while(inertElement){
+            inertElement.removeAttribute('inert');
+            inertElement = this.inertElements.pop();
+        }
     }
     hideSiblingsRecursively(element) {
         const parent = getParent(element);
@@ -68,6 +77,7 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
         this.showSelf();
         if (!isInitialLoad) {
             await defer();
+            if (!this.active) return;
             getFirstFocusableDescendant(this)?.focus();
         }
         this.hideSiblingsRecursively(this);
@@ -81,7 +91,7 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
         return this.container ?? this;
     }
     constructor(...args){
-        super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.onFocusChanged = (e)=>{
+        super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.inertElements = [], this.onFocusChanged = (e)=>{
             if (!e.target || !this.active) return;
             const focusedElement = getFocusedElement();
             if (focusedElement && isAncestorOf(this, focusedElement)) return;

package/dist/esm/components/common/atomic-layout-section/layout.js

@@ -64,11 +64,15 @@ function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName,
        }
     }`;
     };
-    const horizontalFacets = ()=>`${mediaQuerySelector} {
-      ${layoutSelector} ${sectionSelector('horizontal-facets')} > atomic-popover:not(.atomic-hidden) {
+    const horizontalFacets = ()=>{
+        const horizontalFacetsSelector = `${layoutSelector} ${sectionSelector('horizontal-facets')}`;
+        return `${mediaQuerySelector} {
+      ${horizontalFacetsSelector} > atomic-popover:not(.atomic-hidden),
+      ${horizontalFacetsSelector} > atomic-facet-manager > atomic-popover:not(.atomic-hidden) {
         display: block;
       }
     }`;
+    };
     return [
         display,
         search,

package/dist/esm/components/common/atomic-modal/atomic-modal.js

@@ -11,7 +11,8 @@ import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
 import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin.js";
 import { buildCustomEvent, listenOnce } from "../../../utils/event-utils.js";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils.js";
-import { once, randomID } from "../../../utils/utils.js";
+import { getFocusedElement, isAncestorOf, once, randomID } from "../../../utils/utils.js";
+import "../atomic-focus-trap/atomic-focus-trap.js";
 function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);
@@ -52,7 +53,7 @@ class AtomicModal extends InitializeBindingsMixin(LitElement) {
               role="dialog"
               aria-modal=${this.isOpen ? 'true' : 'false'}
               aria-labelledby=${this.headerId}
-              .source=${this.source}
+              .source=${this.source ?? this.focusedElementBeforeOpen}
               .container=${this.container ?? this}
               ${ref(this.focusTrap)}
               .scope=${this.scope ?? this.bindings?.interfaceElement ?? document.body}
@@ -96,6 +97,8 @@ class AtomicModal extends InitializeBindingsMixin(LitElement) {
     }
     async handleModalOpen() {
         const executionId = this.createExecutionTracker();
+        const focusedElement = getFocusedElement();
+        this.focusedElementBeforeOpen = focusedElement instanceof HTMLElement && !isAncestorOf(this, focusedElement) ? focusedElement : void 0;
         if (!this.shouldRender) {
             this.shouldRender = true;
             await this.updateComplete;
@@ -272,6 +275,10 @@ _ts_decorate([
     }),
     _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
 ], AtomicModal.prototype, "source", void 0);
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
+], AtomicModal.prototype, "focusedElementBeforeOpen", void 0);
 _ts_decorate([
     errorGuard(),
     _ts_metadata("design:type", Function),

package/dist/esm/components/common/atomic-tab-popover/atomic-tab-popover.js

@@ -9,6 +9,7 @@ import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import arrow_bottom_rounded from "../../../images/arrow-bottom-rounded.js";
+import "../atomic-icon/atomic-icon.js";
 function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);

package/dist/esm/components/common/facets/facet-common.js

@@ -34,9 +34,22 @@ function isAutomaticFacetGenerator(element) {
 function isPseudoFacet(el) {
     return 'facetId' in el;
 }
+function isPopover(element) {
+    return 'ATOMIC-POPOVER' === element.tagName;
+}
+function isFacetNestedInPopover(facet) {
+    return !!facet.parentElement && isPopover(facet.parentElement);
+}
+function getFacetElementToReorder(facet) {
+    return isFacetNestedInPopover(facet) ? facet.parentElement : facet;
+}
 function getFacetsInChildren(parent) {
-    const facets = Array.from(parent.children).filter((child)=>isPseudoFacet(child));
-    return facets;
+    return Array.from(parent.children).flatMap((child)=>{
+        if (isPseudoFacet(child)) return [
+            child
+        ];
+        return isPopover(child) ? Array.from(child.children).filter(isPseudoFacet) : [];
+    });
 }
 function getAutomaticFacetGenerator(parent) {
     return Array.from(parent.children).find(isAutomaticFacetGenerator);
@@ -58,4 +71,4 @@ function triageFacetsByParents(facets, ...parents) {
     }
     return sortedFacets;
 }
-export { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetsInChildren, getFirstNewFacetValueIndex, isAutomaticFacetGenerator, shouldDisplayInputForFacetRange, sortFacetVisibility, triageFacetsByParents };
+export { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetElementToReorder, getFacetsInChildren, getFirstNewFacetValueIndex, isAutomaticFacetGenerator, isFacetNestedInPopover, shouldDisplayInputForFacetRange, sortFacetVisibility, triageFacetsByParents };

package/dist/esm/components/common/facets/timeframe-facet-common.js

@@ -156,8 +156,8 @@ class TimeframeFacetCommon {
                 label: this.props.label
             }
         })(html`<ul class="mt-3" part="values">
-      ${children}
-    </ul>`);
+        ${children}
+      </ul>`);
     }
     renderHeader(isCollapsed, headerFocus, onToggleCollapse) {
         return renderFacetHeader({

package/dist/esm/components/common/generated-answer/generated-content/markdown-utils.js

@@ -1,5 +1,6 @@
 import { Marked, Renderer } from "marked";
 import { parseHTML } from "../../../../utils/utils.js";
+import "../../atomic-generated-answer-inline-link/atomic-generated-answer-inline-link.js";
 const toInlinePlainText = (textWithHtml)=>{
     const withoutHtmlTags = textWithHtml.replace(/<[^>]*>/g, ' ');
     const withCollapsedWhitespaces = withoutHtmlTags.replace(/\s{2,}/g, ' ');

package/dist/esm/components/common/item-list/result-template-provider.js

@@ -1,5 +1,6 @@
 import { buildResultTemplatesManager } from "@coveo/headless";
 import { TemplateProvider } from "../template-provider/template-provider.js";
+import "../../search/atomic-result-link/atomic-result-link.js";
 class ResultTemplateProvider extends TemplateProvider {
     makeDefaultTemplate() {
         const content = document.createDocumentFragment();

package/dist/esm/components/common/result-templates/result-template-controller.js

@@ -1,4 +1,5 @@
 import { BaseTemplateController } from "../template-controller/base-template-controller.js";
+import "../../search/atomic-result-link/atomic-result-link.js";
 class ResultTemplateController extends BaseTemplateController {
     getTemplate(conditions) {
         const baseTemplate = this.getBaseTemplate(conditions);

package/dist/esm/components/common/suggestions/suggestion-manager.js

@@ -58,11 +58,13 @@ class SuggestionManager {
             const panelHasActiveDescendant = this.previousActiveDescendantElement && panel.contains(this.previousActiveDescendantElement);
             const newValue = panelHasActiveDescendant ? this.previousActiveDescendantElement : panel.firstElementChild;
             this.updateDescendants(newValue.id);
+            this.updateKeyboardActiveDescendant(newValue.id);
         }
     }
     clearSuggestions() {
         this.clearSuggestionElements();
         this.updateActiveDescendant();
+        this.updateKeyboardActiveDescendant();
     }
     async focusNextValue() {
         if (!this.hasSuggestions || !this.nextOrFirstValue) return;
@@ -111,6 +113,7 @@ class SuggestionManager {
     }
     async executeQuerySuggestion() {
         this.updateActiveDescendant();
+        this.updateKeyboardActiveDescendant();
         const settled = await Promise.allSettled(this.suggestions.map((suggestion)=>promiseTimeout(suggestion.onInput ? suggestion.onInput() : Promise.resolve(), this.ownerSearchBoxProps.getSuggestionTimeout())));
         const fulfilledSuggestions = [];
         settled.forEach((prom, j)=>{

package/dist/esm/components/insight/atomic-insight-facet/atomic-insight-facet.js

@@ -110,8 +110,8 @@ class AtomicInsightFacet extends LitElement {
                 label: this.label
             }
         })(html`<ul class="mt-3 ${'box' === this.displayValuesAs ? 'box-container' : ''}" part="values">
-      ${children}
-    </ul>`);
+        ${children}
+      </ul>`);
     }
     renderValues() {
         const firstNewValueIndex = getFirstNewFacetValueIndex(this.facet.state.values, this.valuesBeforeShowMore);

package/dist/esm/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js

@@ -8,6 +8,7 @@ import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import attach from "../../../images/attach.js";
+import "../../common/atomic-icon/atomic-icon.js";
 function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);

package/dist/esm/components/insight/atomic-insight-user-actions-session/atomic-insight-user-actions-session.js

@@ -9,6 +9,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import flag from "../../../images/flag.js";
 import three_dots from "../../../images/three-dots.js";
 import { renderUserAction } from "./user-action.js";
+import "../../common/atomic-icon/atomic-icon.js";
 function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);

package/dist/esm/components/insight/atomic-insight-user-actions-session/user-action.js

@@ -6,6 +6,7 @@ import images_document from "../../../images/document.js";
 import point from "../../../images/point.js";
 import quickview from "../../../images/quickview.js";
 import search from "../../../images/search.js";
+import "../../common/atomic-icon/atomic-icon.js";
 const icons = {
     SEARCH: search,
     CLICK: images_document,

package/dist/esm/components/search/atomic-facet-manager/atomic-facet-manager.js

@@ -2,7 +2,7 @@ import { NumberValue, Schema } from "@coveo/bueno";
 import { buildFacetManager } from "@coveo/headless";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetsInChildren, sortFacetVisibility } from "../../common/facets/facet-common.js";
+import { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetElementToReorder, getFacetsInChildren, isFacetNestedInPopover, sortFacetVisibility } from "../../common/facets/facet-common.js";
 import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
@@ -45,9 +45,13 @@ class AtomicFacetManager extends ChildrenUpdateCompleteMixin(LightDomMixin(LitEl
             const sortedFacets = this.sortFacetsUsingManager(facets, this.facetManager);
             const { visibleFacets, invisibleFacets } = sortFacetVisibility(sortedFacets, this.bindings.store.getAllFacets());
             const generator = getAutomaticFacetGenerator(this);
-            collapseFacetsAfter(visibleFacets, this.collapseFacetsAfter);
-            generator?.updateCollapseFacetsDependingOnFacetsVisibility?.(this.collapseFacetsAfter, visibleFacets.length);
-            this.append(...visibleFacets, ...invisibleFacets, ...generator ? [
+            const collapsibleFacets = visibleFacets.filter((facet)=>!isFacetNestedInPopover(facet));
+            collapseFacetsAfter(collapsibleFacets, this.collapseFacetsAfter);
+            generator?.updateCollapseFacetsDependingOnFacetsVisibility?.(this.collapseFacetsAfter, collapsibleFacets.length);
+            this.append(...[
+                ...visibleFacets,
+                ...invisibleFacets
+            ].map((facet)=>getFacetElementToReorder(facet)), ...generator ? [
                 generator
             ] : []);
         };

package/dist/esm/components/search/atomic-popover/atomic-popover.js

@@ -61,9 +61,8 @@ class AtomicPopover extends LitElement {
         .active=${this.isOpen}
         .shouldHideSelf=${false}
       >
-        ${this.renderPopover()}
+        ${this.renderPopover()} ${when(this.isOpen, ()=>this.renderBackdrop())}
       </atomic-focus-trap>
-      ${when(this.isOpen, ()=>this.renderBackdrop())}
     `;
     }
     updated() {

package/dist/esm/components/search/atomic-rating-range-facet/atomic-rating-range-facet.js

@@ -194,8 +194,8 @@ class AtomicRatingRangeFacet extends LitElement {
                 label: this.label
             }
         })(html`<ul class="mt-3" part="values">
-      ${children}
-    </ul>`);
+        ${children}
+      </ul>`);
     }
     renderValues() {
         return this.renderValuesContainer(this.valuesToRender.map((value)=>this.renderValue(value, ()=>this.facet.toggleSingleSelect(value))));
@@ -212,8 +212,7 @@ class AtomicRatingRangeFacet extends LitElement {
                 }
             });
             if (!this.valuesToRender.length) return nothing;
-            return renderFacetContainer()(html`${this.renderHeader()}
-      ${when(!this.isCollapsed, ()=>this.renderValues())}`);
+            return renderFacetContainer()(html`${this.renderHeader()} ${when(!this.isCollapsed, ()=>this.renderValues())}`);
         })}`;
     }
     constructor(){