@coveo/atomic 3.60.1 → 3.60.3

package/dist/cjs/components/commerce/atomic-commerce-facet-number-input/atomic-commerce-facet-number-input.cjs

@@ -108,9 +108,7 @@ class AtomicCommerceFacetNumberInput extends (0, light_dom_cjs_namespaceObject.L
             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"
@@ -129,9 +127,7 @@ class AtomicCommerceFacetNumberInput extends (0, light_dom_cjs_namespaceObject.L
             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"

package/dist/cjs/components/commerce/atomic-commerce-facets/atomic-commerce-facets.cjs

@@ -90,9 +90,7 @@ class AtomicCommerceFacets extends (0, light_dom_cjs_namespaceObject.LightDomMix
     renderFacetPlaceholders() {
         return (0, map_js_namespaceObject.map)(Array.from({
             length: this.collapseFacetsAfter
-        }), ()=>(0, external_lit_namespaceObject.html)`<atomic-facet-placeholder
-          value-count="8"
-        ></atomic-facet-placeholder>`);
+        }), ()=>(0, external_lit_namespaceObject.html)`<atomic-facet-placeholder value-count="8"></atomic-facet-placeholder>`);
     }
     renderFacets() {
         return (0, map_js_namespaceObject.map)(this.facetGenerator.facets, (facet, index)=>{

package/dist/cjs/components/commerce/atomic-commerce-layout/atomic-commerce-layout.tw.css.cjs

@@ -82,23 +82,15 @@ const styles = (0, external_lit_namespaceObject.css)`
       atomic-commerce-search-box {
         &::part(suggestions-double-list) {
           width: 125%;
-          max-width: var(
-            --atomic-layout-max-search-box-double-suggestions-width,
-            800px
-          );
+          max-width: var(--atomic-layout-max-search-box-double-suggestions-width, 800px);
         }
 
         &::part(suggestions-left) {
-          flex-basis: var(
-            --atomic-layout-search-box-left-suggestions-width,
-            30%
-          );
+          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%)
-          );
+          flex-basis: calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%));
         }
       }
     }

package/dist/cjs/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.cjs

@@ -68,8 +68,7 @@ class AtomicCommerceNoProducts extends external_lit_namespaceObject.LitElement {
             firstSearchExecuted: this.summaryState.firstRequestExecuted,
             hasResults: this.summaryState.hasProducts
         }, ()=>(0, container_cjs_namespaceObject.renderNoItemsContainer)()((0, external_lit_namespaceObject.html)`
-          ${(0, magnifying_glass_cjs_namespaceObject.renderMagnifyingGlass)()} ${this.renderNoItems()}
-          ${this.renderSearchTips()}
+          ${(0, magnifying_glass_cjs_namespaceObject.renderMagnifyingGlass)()} ${this.renderNoItems()} ${this.renderSearchTips()}
         `))}`;
     }
     renderNoItems() {

package/dist/cjs/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.cjs

@@ -177,10 +177,7 @@ class AtomicCommerceRecommendationList extends (0, children_update_complete_mixi
         if (!this.augmentedRecommendationListState.headline) return;
         if (this.augmentedRecommendationListState.hasError) return;
         if (!this.isEveryProductReady && this.isAppLoaded) return (0, external_lit_namespaceObject.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 (0, external_lit_namespaceObject.html)`${(0, heading_cjs_namespaceObject.renderHeading)({
             props: {
@@ -374,14 +371,8 @@ AtomicCommerceRecommendationList.styles = [
      */
         .list-root {
           @apply atomic-grid-with-cards;
-          grid-template-columns: repeat(
-            var(--atomic-recs-number-of-columns, 1),
-            minmax(0, 1fr)
-          );
-          grid-template-rows: repeat(
-            var(--atomic-recs-number-of-rows, 1),
-            minmax(0, 1fr)
-          );
+          grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));
+          grid-template-rows: repeat(var(--atomic-recs-number-of-rows, 1), minmax(0, 1fr));
         }
 
         [part='label'] {

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

@@ -89,16 +89,16 @@ class AtomicCommerceSearchBoxInstantProducts extends external_lit_namespaceObjec
             const partialItem = (0, instant_item_cjs_namespaceObject.getPartialInstantItemElement)(this.bindings.i18n, 'instant-products-suggestion-label', this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
             const key = `instant-product-${(0, string_utils_cjs_namespaceObject.encodeForDomAttribute)(product.permanentid)}`;
             const template = (0, external_lit_namespaceObject.html)`${(0, keyed_js_namespaceObject.keyed)(key, (0, external_lit_namespaceObject.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');
             (0, external_lit_namespaceObject.render)(template, container);
             const productElement = container.firstElementChild;

package/dist/cjs/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.cjs

@@ -211,10 +211,10 @@ class AtomicCommerceTimeframeFacet extends external_lit_namespaceObject.LitEleme
     render() {
         const { hasError, firstRequestExecuted } = this.summaryState;
         return (0, external_lit_namespaceObject.html)`${(0, when_js_namespaceObject.when)(!hasError && firstRequestExecuted && this.shouldRenderFacet, ()=>(0, facet_container_cjs_namespaceObject.renderFacetContainer)()((0, external_lit_namespaceObject.html)`${this.renderHeader()}
-          ${(0, when_js_namespaceObject.when)(!this.isCollapsed, ()=>(0, external_lit_namespaceObject.html)`
-              ${(0, when_js_namespaceObject.when)(this.shouldRenderValues, ()=>this.renderValues())}
-              ${(0, when_js_namespaceObject.when)(this.shouldRenderInput, ()=>this.renderDateInput())}
-            `)}`))}`;
+        ${(0, when_js_namespaceObject.when)(!this.isCollapsed, ()=>(0, external_lit_namespaceObject.html)`
+            ${(0, when_js_namespaceObject.when)(this.shouldRenderValues, ()=>this.renderValues())}
+            ${(0, when_js_namespaceObject.when)(this.shouldRenderInput, ()=>this.renderDateInput())}
+          `)}`))}`;
     }
     updated(changedProps) {
         super.updated(changedProps);

package/dist/cjs/components/commerce/atomic-product-children/atomic-product-children.cjs

@@ -105,9 +105,7 @@ class AtomicProductChildren extends (0, light_dom_cjs_namespaceObject.LightDomMi
     renderLabel() {
         return (0, external_lit_namespaceObject.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>
     `;
     }

package/dist/cjs/components/commerce/atomic-product-description/atomic-product-description.cjs

@@ -105,9 +105,7 @@ class AtomicProductDescription extends (0, light_dom_cjs_namespaceObject.LightDo
                 isCollapsible: this.isCollapsible,
                 textRef: this.descriptionRef
             }
-        })((0, external_lit_namespaceObject.html)`
-      <atomic-product-text field=${this.field}></atomic-product-text>
-    `)}`;
+        })((0, external_lit_namespaceObject.html)` <atomic-product-text field=${this.field}></atomic-product-text> `)}`;
     }
     constructor(){
         super(), this.productController = (0, product_context_controller_cjs_namespaceObject.createProductContextController)(this), this.isExpanded = false, this.isTruncated = false, this.descriptionRef = (0, ref_js_namespaceObject.createRef)(), this.truncateAfter = '2', this.field = 'ec_shortdesc', this.isCollapsible = false, this.onToggleExpand = (e)=>{

package/dist/cjs/components/commerce/atomic-product-link/atomic-product-link.cjs

@@ -117,10 +117,7 @@ class AtomicProductLink extends (0, light_dom_cjs_namespaceObject.LightDomMixin)
                     }
                 }
             })((0, external_lit_namespaceObject.html)`
-        ${this.renderDefaultSlotContent((0, external_lit_namespaceObject.html)`<atomic-product-text
-            field="ec_name"
-            default="no-title"
-          ></atomic-product-text>`)}
+        ${this.renderDefaultSlotContent((0, external_lit_namespaceObject.html)`<atomic-product-text field="ec_name" default="no-title"></atomic-product-text>`)}
       `);
         })}`;
     }

package/dist/cjs/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.cjs

@@ -93,9 +93,7 @@ class AtomicProductMultiValueText extends external_lit_namespaceObject.LitElemen
         const kebabValue = (0, utils_cjs_namespaceObject.titleToKebab)(value);
         return (0, external_lit_namespaceObject.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>
     `;
     }
@@ -133,10 +131,7 @@ class AtomicProductMultiValueText extends external_lit_namespaceObject.LitElemen
     render() {
         if (0 === this.sortedValues.length) return external_lit_namespaceObject.nothing;
         return (0, external_lit_namespaceObject.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>
     `;

package/dist/cjs/components/commerce/atomic-product-rating/atomic-product-rating.cjs

@@ -109,9 +109,7 @@ class AtomicProductRating extends (0, light_dom_cjs_namespaceObject.LightDomMixi
                 }
             })}
             ${(0, when_js_namespaceObject.when)(null !== this.ratingDetails, ()=>(0, external_lit_namespaceObject.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>
         `)}

package/dist/cjs/components/common/atomic-agent-stream-of-thought/atomic-agent-stream-of-thought.cjs

@@ -87,9 +87,7 @@ class AtomicAgentStreamOfThought extends external_lit_namespaceObject.LitElement
         if (0 === resolvedSteps.length) return external_lit_namespaceObject.nothing;
         const isComplete = !this.isStreaming;
         const isCollapsible = resolvedSteps.length > 1;
-        if (isComplete && !this.expanded && isCollapsible) return (0, external_lit_namespaceObject.html)`
-        <div class="timeline">${this.renderCollapsedTimelineSummary()}</div>
-      `;
+        if (isComplete && !this.expanded && isCollapsible) return (0, external_lit_namespaceObject.html)` <div class="timeline">${this.renderCollapsedTimelineSummary()}</div> `;
         return (0, external_lit_namespaceObject.html)`
       <div class="timeline">
         ${(0, map_js_namespaceObject.map)(resolvedSteps, (step)=>this.renderStep(step))}
@@ -144,9 +142,7 @@ class AtomicAgentStreamOfThought extends external_lit_namespaceObject.LitElement
     `;
     }
     renderSpinner() {
-        return (0, external_lit_namespaceObject.html)`<span class="step-icon"
-      ><span class="spinner" aria-hidden="true"></span
-    ></span>`;
+        return (0, external_lit_namespaceObject.html)`<span class="step-icon"><span class="spinner" aria-hidden="true"></span></span>`;
     }
     renderCheckmark() {
         return (0, external_lit_namespaceObject.html)`

package/dist/cjs/components/common/atomic-aria-live/atomic-aria-live.cjs

@@ -54,9 +54,10 @@ class AtomicAriaLive extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(ex
     disconnectedCallback() {
         super.disconnectedCallback();
         this.messagesQueue.clear();
+        this.queuedMessageIds.clear();
         document.removeEventListener('atomic/accessibility/findAriaLive', this.onFindAriaLive);
     }
-    updateMessage(region, message, assertive) {
+    updateMessage(region, message, assertive, preserveQueuedMessages = false) {
         const updateRegion = ()=>{
             this.regions = {
                 ...this.regions,
@@ -66,11 +67,18 @@ class AtomicAriaLive extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(ex
                 }
             };
         };
-        if (message) this.messagesQueue.enqueue(updateRegion, region);
-        else {
-            this.messagesQueue.cancelActionIfQueued(region);
+        if (!message) {
+            this.clearQueuedMessages(region);
             updateRegion();
+            return;
         }
+        if (!preserveQueuedMessages) {
+            this.clearQueuedMessages(region);
+            this.messagesQueue.enqueue(updateRegion, region);
+            return;
+        }
+        if (this.regions[region]?.message === message && this.regions[region]?.assertive === assertive) return;
+        this.queueMessage(region, message, updateRegion);
     }
     registerRegion(region, assertive) {
         if (region in this.regions) return;
@@ -82,6 +90,28 @@ class AtomicAriaLive extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(ex
             }
         };
     }
+    clearQueuedMessages(region) {
+        for (const messageId of this.queuedMessageIds.get(region) ?? [])this.messagesQueue.cancelActionIfQueued(messageId);
+        this.queuedMessageIds.delete(region);
+    }
+    getMessageQueueId(region, message) {
+        return JSON.stringify([
+            region,
+            message
+        ]);
+    }
+    queueMessage(region, message, updateRegion) {
+        const messageId = this.getMessageQueueId(region, message);
+        const queuedMessageIds = this.queuedMessageIds.get(region) ?? new Set();
+        if (queuedMessageIds.has(messageId)) return;
+        queuedMessageIds.add(messageId);
+        this.queuedMessageIds.set(region, queuedMessageIds);
+        this.messagesQueue.enqueue(()=>{
+            queuedMessageIds.delete(messageId);
+            if (0 === queuedMessageIds.size) this.queuedMessageIds.delete(region);
+            updateRegion();
+        }, messageId);
+    }
     render() {
         const hostStyles = {
             position: 'absolute',
@@ -107,7 +137,7 @@ class AtomicAriaLive extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(ex
     constructor(...args){
         super(...args), this.regions = {}, this.messagesQueue = (0, debounce_utils_cjs_namespaceObject.buildDebouncedQueue)({
             delay: 500
-        }), this.onFindAriaLive = (event)=>{
+        }), this.queuedMessageIds = new Map(), this.onFindAriaLive = (event)=>{
             const customEvent = event;
             customEvent.detail.element = this;
         };

package/dist/cjs/components/common/atomic-ask-follow-up-input/atomic-ask-follow-up-input.cjs

@@ -139,12 +139,7 @@ class AtomicAskFollowUpInput extends external_lit_namespaceObject.LitElement {
                 ariaLabel: this.i18n.t('submit-follow-up'),
                 onClick: ()=>this.handleSubmit()
             }
-        })((0, external_lit_namespaceObject.html)`<svg
-            class="h-4 w-4"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            part="submit-icon"
-          >
+        })((0, external_lit_namespaceObject.html)`<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" part="submit-icon">
             <path
               fill-rule="evenodd"
               d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04L10.75 5.612V16.25A.75.75 0 0110 17z"

package/dist/cjs/components/common/atomic-citation/atomic-citation.cjs

@@ -46,6 +46,7 @@ var class_map_js_namespaceObject = require("lit/directives/class-map.js");
 var ref_js_namespaceObject = require("lit/directives/ref.js");
 var watch_cjs_namespaceObject = require("../../../decorators/watch.cjs");
 var with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
+var markdown_utils_cjs_namespaceObject = require("../generated-answer/generated-content/markdown-utils.cjs");
 var external_heading_cjs_namespaceObject = require("../heading.cjs");
 var item_link_cjs_namespaceObject = require("../item-link/item-link.cjs");
 var external_atomic_citation_tw_css_cjs_namespaceObject = require("./atomic-citation.tw.css.cjs");
@@ -107,11 +108,7 @@ class AtomicCitation extends external_lit_namespaceObject.LitElement {
                 onFocus: this.openPopover,
                 onBlur: this.closePopover
             }
-        })((0, external_lit_namespaceObject.html)`
-          <span class="citation-title mx-1 truncate">
-            ${this.citation.title}
-          </span>
-        `)}
+        })((0, external_lit_namespaceObject.html)` <span class="citation-title mx-1 truncate"> ${this.citation.title} </span> `)}
         ${this.renderPopover()}
       </div>
     `;
@@ -148,7 +145,8 @@ class AtomicCitation extends external_lit_namespaceObject.LitElement {
         clearTimeout(this.closePopoverTimeout);
     }
     getTruncatedText() {
-        return this.citation.text && `${this.citation.text?.trim().slice(0, 200)}${this.citation.text.length > 200 ? '...' : ''}`;
+        const plainText = (0, markdown_utils_cjs_namespaceObject.markdownToPlainText)(this.citation.text ?? '');
+        return plainText ? `${plainText.slice(0, 200)}${plainText.length > 200 ? '...' : ''}` : void 0;
     }
     anchorUrl(uri, text, filetype, pageNumber) {
         if (this.disableCitationAnchoring) return uri;

package/dist/cjs/components/common/atomic-facet-date-input/atomic-facet-date-input.cjs

@@ -139,11 +139,7 @@ class AtomicFacetDateInput extends (0, light_dom_cjs_namespaceObject.LightDomMix
             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
@@ -163,11 +159,7 @@ class AtomicFacetDateInput extends (0, light_dom_cjs_namespaceObject.LightDomMix
             this.start = (0, date_utils_cjs_namespaceObject.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

package/dist/cjs/components/common/atomic-facet-number-input/atomic-facet-number-input.cjs

@@ -80,11 +80,7 @@ class AtomicFacetNumberInput extends (0, light_dom_cjs_namespaceObject.LightDomM
             return false;
         }}
       >
-        <label
-          part="label-start"
-          class=${labelClasses}
-          for="${this.filterState.facetId}_start"
-        >
+        <label part="label-start" class=${labelClasses} for="${this.filterState.facetId}_start">
           ${minText}
         </label>
         <input
@@ -103,11 +99,7 @@ class AtomicFacetNumberInput extends (0, light_dom_cjs_namespaceObject.LightDomM
         }}
           ${(0, ref_js_namespaceObject.ref)(this.startRef)}
         />
-        <label
-          part="label-end"
-          class=${labelClasses}
-          for="${this.filterState.facetId}_end"
-        >
+        <label part="label-end" class=${labelClasses} for="${this.filterState.facetId}_end">
           ${maxText}
         </label>
         <input

package/dist/cjs/components/common/atomic-facet-placeholder/atomic-facet-placeholder.cjs

@@ -48,11 +48,7 @@ class AtomicFacetPlaceholder extends external_lit_namespaceObject.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">
           ${(0, map_js_namespaceObject.map)(Array.from({
             length: this.valueCount

package/dist/cjs/components/common/atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.cjs

@@ -178,9 +178,7 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
             ${this.bindings.i18n.t(label)}
             <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'text-error-red ml-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
           </label>
         </div>
         <span
@@ -220,29 +218,29 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
                     label: this.bindings.i18n.t(localeKey)
                 }
             })((0, external_lit_namespaceObject.html)`
-              <div
-                class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+            <div
+              class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                 'answer-evaluation mt-3 flex items-center': true,
                 [String(correspondingAnswer)]: true
             })}
-                key=${String(correspondingAnswer)}
-              >
-                <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+              key=${String(correspondingAnswer)}
+            >
+              <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                 'flex-1 pr-4': true
             })}>
-                  ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
-                </div>
-                <div
-                  class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+                ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
+              </div>
+              <div
+                class=${(0, multi_class_map_cjs_namespaceObject.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>
     `;
     }
@@ -305,18 +303,12 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
     }
     renderSuccessMessage() {
         return (0, external_lit_namespaceObject.html)`
-      <div
-        slot="body"
-        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+      <div slot="body" class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'my-4 flex flex-col items-center gap-4': true
-        })}
-      >
-        <atomic-icon
-          icon=${success_cjs_default()}
-          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+        })}>
+        <atomic-icon icon=${success_cjs_default()} class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'w-48': true
-        })}
-        ></atomic-icon>
+        })}></atomic-icon>
         <p
           class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'text-base': true
@@ -338,19 +330,15 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
         const buttonClasses = 'flex items-center justify-center text-sm leading-4 p-2 rounded-md';
         return (0, external_lit_namespaceObject.html)`
       <div slot="footer" part="modal-footer">
-        <div
-          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+        <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'flex items-center justify-between': true
-        })}
-        >
+        })}>
           <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'required-label text-base': true
         })}>
             <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'text-error-red mr-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
             ${this.bindings.i18n.t('required-fields')}
           </div>
           <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({

package/dist/cjs/components/common/atomic-generated-answer-thread/atomic-generated-answer-thread.cjs

@@ -74,8 +74,7 @@ class AtomicGeneratedAnswerThread extends external_lit_namespaceObject.LitElemen
             const lastGeneratedAnswer = this.generatedAnswers[this.generatedAnswers.length - 1];
             return (0, external_lit_namespaceObject.html)`
         <ul>
-          ${this.renderShowPreviousAnswersButton()}
-          ${this.renderThread([
+          ${this.renderShowPreviousAnswersButton()} ${this.renderThread([
                 lastGeneratedAnswer
             ])}
         </ul>
@@ -122,12 +121,13 @@ class AtomicGeneratedAnswerThread extends external_lit_namespaceObject.LitElemen
         const showPreviousButtonClasses = `
       text-on-background text-base min-w-0 inline-flex text-left mr-auto
       px-2 py-1.5 font-normal bg-transparent border-0 appearance-none
-      transition-colors hover:bg-neutral-light rounded-md cursor-pointer
+      transition-colors hover:bg-neutral hover:text-primary rounded-md cursor-pointer
       focus-visible:outline-none focus-visible:ring-2
       focus-visible:ring-primary focus-visible:ring-offset-2
     `;
         const timelineDotClasses = `
-      h-2 w-2 rounded-full bg-neutral-dim
+      h-2 w-2 rounded-full bg-neutral-dim transition-colors
+      hover:bg-neutral-dark group-has-[button:hover]/title:bg-neutral-dark
     `;
         const timelineConnectorClasses = `
       relative h-full w-px bg-neutral
@@ -137,23 +137,23 @@ class AtomicGeneratedAnswerThread extends external_lit_namespaceObject.LitElemen
       after:h-[8px] after:w-px after:bg-neutral after:content-['']
     `;
         return (0, external_lit_namespaceObject.html)`
-      <li class="grid min-w-0">
-        <div class="flex min-w-0 items-center gap-3">
-          <div class="flex w-[10px] shrink-0 items-center justify-center">
+      <li class="group/title grid min-w-0 grid-cols-[10px_1fr] gap-x-3">
+        <div class="row-span-2 flex flex-col items-center">
+          <div class="flex justify-center items-center text-base h-[1lh] my-1.5">
             <span class=${timelineDotClasses}></span>
           </div>
-          <div class="flex min-w-0 flex-col">
-            <button
-              type="button"
-              class=${showPreviousButtonClasses}
-              @click=${this.handleShowAllClick}
-            >
-              ${label}
-            </button>
+          <div class="flex grow w-full justify-center items-center py-2 -my-2 min-h-3">
+            <span class=${timelineConnectorClasses}> </span>
           </div>
         </div>
-        <div class="flex h-3 w-[10px] shrink-0 justify-center">
-          <span class=${timelineConnectorClasses}> </span>
+        <div class="flex min-w-0 flex-col">
+          <button
+            type="button"
+            class=${showPreviousButtonClasses}
+            @click=${this.handleShowAllClick}
+          >
+            ${label}
+          </button>
         </div>
       </li>
     `;