@coveo/atomic 3.64.1 → 3.65.1

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-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/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/answer-announcement.js

@@ -20,12 +20,15 @@ const getAnswerAnnouncement = (answer, i18n)=>{
         message: i18n.t('generating-answer'),
         assertive: false
     };
-    if (answer.answer?.trim()) return {
-        message: i18n.t('answer-generated', {
+    if (answer.answer?.trim()) {
+        const answerGenerated = i18n.t('answer-generated', {
             answer: markdownToPlainText(answer.answer)
-        }),
-        assertive: false
-    };
+        });
+        return {
+            message: `${answerGenerated} ${i18n.t('generated-answer-disclaimer-announcement')}`,
+            assertive: false
+        };
+    }
     return SILENT;
 };
 const isSettledAnswer = (answer)=>Boolean(answer && !answer.isStreaming && !answer.isLoading && !answer.error && !answer.cannotAnswer && answer.answer?.trim());

package/dist/esm/components/common/generated-answer/generated-answer-controller.js

@@ -39,9 +39,12 @@ class GeneratedAnswerController {
         if (isHidden) return bindings.i18n.t('generated-answer-hidden');
         if (isGenerating) return bindings.i18n.t('generating-answer');
         if (hasError || cannotAnswer) return bindings.i18n.t('answer-could-not-be-generated');
-        if (hasNonEmptyAnswer) return bindings.i18n.t('answer-generated', {
-            answer: markdownToPlainText(state.answer)
-        });
+        if (hasNonEmptyAnswer) {
+            const answerGenerated = bindings.i18n.t('answer-generated', {
+                answer: markdownToPlainText(state.answer)
+            });
+            return `${answerGenerated} ${bindings.i18n.t('generated-answer-disclaimer-announcement')}`;
+        }
         return '';
     }
     isStatusAssertive() {

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/generated-answer/render-disclaimer.js

@@ -1,10 +1,11 @@
 import { html } from "lit";
+const DISCLAIMER_ID = 'generated-answer-disclaimer';
 const renderDisclaimer = ({ props })=>{
     const { i18n } = props;
     return html`
-    <div class="flex justify-end text-neutral-dark text-xs/[1rem]">
+    <small id=${DISCLAIMER_ID} class="flex justify-end text-neutral-dark text-xs/[1rem]">
       <slot name="disclaimer">${i18n.t('generated-answer-disclaimer')}</slot>
-    </div>
+    </small>
   `;
 };
-export { renderDisclaimer };
+export { DISCLAIMER_ID, renderDisclaimer };

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-generated-answer/atomic-insight-generated-answer.js

@@ -8,7 +8,7 @@ import { renderAnswerContent } from "../../common/generated-answer/render-answer
 import { renderCardHeader } from "../../common/generated-answer/render-card-header.js";
 import { renderCitations } from "../../common/generated-answer/render-citations.js";
 import { renderCustomNoAnswerMessage } from "../../common/generated-answer/render-custom-no-answer-message.js";
-import { renderDisclaimer } from "../../common/generated-answer/render-disclaimer.js";
+import { DISCLAIMER_ID, renderDisclaimer } from "../../common/generated-answer/render-disclaimer.js";
 import { renderFeedbackAndCopyButtons } from "../../common/generated-answer/render-feedback-and-copy-buttons.js";
 import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
 import { booleanConverter } from "../../../converters/boolean-converter.js";
@@ -101,6 +101,7 @@ class AtomicInsightGeneratedAnswer extends LitElement {
           class=${contentClasses}
           part="container"
           aria-label=${this.bindings.i18n.t('generated-answer-title')}
+          aria-describedby=${this.isAnswerVisible ? DISCLAIMER_ID : nothing}
         >
           <div part="generated-content">
             ${this.renderCardHeaderWrapper()}

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-generated-answer/atomic-generated-answer.js

@@ -11,7 +11,7 @@ import { renderAnswerContent } from "../../common/generated-answer/render-answer
 import { renderCardHeader } from "../../common/generated-answer/render-card-header.js";
 import { renderCitations } from "../../common/generated-answer/render-citations.js";
 import { renderCustomNoAnswerMessage } from "../../common/generated-answer/render-custom-no-answer-message.js";
-import { renderDisclaimer } from "../../common/generated-answer/render-disclaimer.js";
+import { DISCLAIMER_ID, renderDisclaimer } from "../../common/generated-answer/render-disclaimer.js";
 import { renderFeedbackAndCopyButtons } from "../../common/generated-answer/render-feedback-and-copy-buttons.js";
 import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
 import { arrayConverter } from "../../../converters/array-converter.js";
@@ -121,6 +121,7 @@ class AtomicGeneratedAnswer extends LitElement {
           class=${contentClasses}
           part="container"
           aria-label=${this.bindings.i18n.t('generated-answer-title')}
+          aria-describedby=${this.isAnswerVisible ? DISCLAIMER_ID : nothing}
         >
           <div part="generated-content">
             ${this.renderCardHeaderWrapper()}
@@ -133,6 +134,7 @@ class AtomicGeneratedAnswer extends LitElement {
                 'agent-scrollable': this.areFollowUpsEnabled
             })}
                     tabindex=${this.areFollowUpsEnabled ? '0' : nothing}
+                    aria-describedby=${this.areFollowUpsEnabled ? DISCLAIMER_ID : nothing}
                   >
                     <article>${this.renderAnswerContent()}</article>
                   </div>

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(){