@coveo/atomic 3.60.0 → 3.60.2

package/dist/esm/components/common/atomic-agent-stream-of-thought/atomic-agent-stream-of-thought.tw.css.js

@@ -1,4 +1,4 @@
 import { css } from "lit";
-const styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial;--tw-outline-style:solid}}}:host{display:block}@keyframes spin{to{transform:rotate(1turn)}}.timeline{font-size:var(--atomic-text-sm);gap:var(--spacing,.25rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-light,300);color:var(--atomic-neutral-dark);display:flex;flex-direction:column;font-weight:var(--font-weight-light,300)}.collapsed-timeline-summary,.step{align-items:center;display:flex;gap:calc(var(--spacing,.25rem)*2)}.collapsed-timeline-summary{cursor:pointer;--tw-border-style:none;background-color:#0000;border-style:none;color:inherit;font:inherit;padding:0;text-align:left}.collapsed-timeline-summary:focus-visible{border-radius:var(--atomic-border-radius);outline-color:var(--atomic-primary);outline-offset:2px;outline-style:var(--tw-outline-style);outline-width:2px}.toggle-button{align-items:center;cursor:pointer;gap:var(--spacing,.25rem);--tw-border-style:none;background-color:#0000;border-style:none;color:inherit;display:flex;font:inherit;padding:0}.toggle-button:focus-visible{border-radius:var(--atomic-border-radius);outline-color:var(--atomic-primary);outline-offset:2px;outline-style:var(--tw-outline-style);outline-width:2px}.step-icon{align-items:center;display:flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.checkmark-icon{color:var(--atomic-success,#1b8057)}.spinner{animation:spin .8s linear infinite;border:2px solid;border-radius:3.40282e+38px;border-top:2px solid #0000;display:inline-block;height:12px;width:12px}.chevron{align-items:center;display:flex;margin-left:var(--spacing,.25rem);transition:transform .2s}.chevron-up{transform:rotate(180deg)}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`;
-const atomic_agent_stream_of_thought_tw_css = styles;
+const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial;--tw-outline-style:solid}}}:host{display:block}@keyframes spin{to{transform:rotate(1turn)}}.timeline{font-size:var(--atomic-text-sm);gap:var(--spacing,.25rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-light,300);color:var(--atomic-neutral-dark);display:flex;flex-direction:column;font-weight:var(--font-weight-light,300)}.collapsed-timeline-summary,.step{align-items:center;display:flex;gap:calc(var(--spacing,.25rem)*2)}.collapsed-timeline-summary{cursor:pointer;--tw-border-style:none;background-color:#0000;border-style:none;color:inherit;font:inherit;padding:0;text-align:left}.collapsed-timeline-summary:focus-visible{border-radius:var(--atomic-border-radius);outline-color:var(--atomic-primary);outline-offset:2px;outline-style:var(--tw-outline-style);outline-width:2px}.toggle-button{align-items:center;cursor:pointer;gap:var(--spacing,.25rem);--tw-border-style:none;background-color:#0000;border-style:none;color:inherit;display:flex;font:inherit;padding:0}.toggle-button:focus-visible{border-radius:var(--atomic-border-radius);outline-color:var(--atomic-primary);outline-offset:2px;outline-style:var(--tw-outline-style);outline-width:2px}.step-icon{align-items:center;display:flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.checkmark-icon{color:var(--atomic-success,#1b8057)}.spinner{animation:spin .8s linear infinite;border:2px solid;border-radius:3.40282e+38px;border-top:2px solid #0000;display:inline-block;height:12px;width:12px}.chevron{align-items:center;display:flex;margin-left:var(--spacing,.25rem);transition:transform .2s}.chevron-up{transform:rotate(180deg)}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`;
+var atomic_agent_stream_of_thought_tw_css = styles;
 export default atomic_agent_stream_of_thought_tw_css;

package/dist/esm/components/common/atomic-aria-live/atomic-aria-live.js

@@ -22,9 +22,10 @@ class AtomicAriaLive extends LightDomMixin(LitElement) {
     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,
@@ -34,11 +35,18 @@ class AtomicAriaLive extends LightDomMixin(LitElement) {
                 }
             };
         };
-        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;
@@ -50,6 +58,28 @@ class AtomicAriaLive extends LightDomMixin(LitElement) {
             }
         };
     }
+    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',
@@ -75,7 +105,7 @@ class AtomicAriaLive extends LightDomMixin(LitElement) {
     constructor(...args){
         super(...args), this.regions = {}, this.messagesQueue = buildDebouncedQueue({
             delay: 500
-        }), this.onFindAriaLive = (event)=>{
+        }), this.queuedMessageIds = new Map(), this.onFindAriaLive = (event)=>{
             const customEvent = event;
             customEvent.detail.element = this;
         };

package/dist/esm/components/common/atomic-ask-follow-up-input/atomic-ask-follow-up-input.tw.css.js

@@ -1,4 +1,4 @@
 import { css } from "lit";
-const styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}[part=input-container]{min-height:calc(2.5rem + 2px)}[part=textarea-expander]:after{content:attr(data-replicated-value) " ";visibility:hidden}[part=textarea-expander]{margin-right:calc(var(--spacing,.25rem)*10)}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{-ms-overflow-style:none;scrollbar-width:none}:is([part=textarea-expander]>[part=input-field])::-webkit-scrollbar{display:none}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{background-color:#0000;overflow:hidden;padding-block:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*4);resize:none;white-space:nowrap}:is([part=textarea-expander]>[part=input-field])::placeholder{color:var(--atomic-neutral-dark)}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{--tw-outline-style:none;grid-area:1/1/2/2;min-height:2.5rem;outline-style:none;padding-right:3rem}[part=textarea-expander].expanded{background-color:var(--atomic-background);border-color:var(--atomic-primary);border-radius:var(--atomic-border-radius-md);border-style:var(--tw-border-style);border-width:1px;--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--atomic-primary);bottom:-1px;left:-1px;margin-right:0;overflow:visible;position:absolute;right:-1px;z-index:10}[part=textarea-expander].expanded:after,[part=textarea-expander].expanded>[part=input-field]{max-height:8rem;overflow-y:auto;white-space:pre-wrap}[part=submit-button]{z-index:11}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
-const atomic_ask_follow_up_input_tw_css = styles;
+const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}[part=input-container]{min-height:calc(2.5rem + 2px)}[part=textarea-expander]:after{content:attr(data-replicated-value) " ";visibility:hidden}[part=textarea-expander]{margin-right:calc(var(--spacing,.25rem)*10)}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{-ms-overflow-style:none;scrollbar-width:none}:is([part=textarea-expander]>[part=input-field])::-webkit-scrollbar{display:none}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{background-color:#0000;overflow:hidden;padding-block:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*4);resize:none;white-space:nowrap}:is([part=textarea-expander]>[part=input-field])::placeholder{color:var(--atomic-neutral-dark)}[part=textarea-expander]:after,[part=textarea-expander]>[part=input-field]{--tw-outline-style:none;grid-area:1/1/2/2;min-height:2.5rem;outline-style:none;padding-right:3rem}[part=textarea-expander].expanded{background-color:var(--atomic-background);border-color:var(--atomic-primary);border-radius:var(--atomic-border-radius-md);border-style:var(--tw-border-style);border-width:1px;--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--atomic-primary);bottom:-1px;left:-1px;margin-right:0;overflow:visible;position:absolute;right:-1px;z-index:10}[part=textarea-expander].expanded:after,[part=textarea-expander].expanded>[part=input-field]{max-height:8rem;overflow-y:auto;white-space:pre-wrap}[part=submit-button]{z-index:11}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
+var atomic_ask_follow_up_input_tw_css = styles;
 export default atomic_ask_follow_up_input_tw_css;

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

@@ -5,6 +5,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { watch } from "../../../decorators/watch.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { markdownToPlainText } from "../generated-answer/generated-content/markdown-utils.js";
 import { renderHeading } from "../heading.js";
 import { renderLinkWithItemAnalytics } from "../item-link/item-link.js";
 import atomic_citation_tw_css from "./atomic-citation.tw.css.js";
@@ -106,7 +107,8 @@ class AtomicCitation extends LitElement {
         clearTimeout(this.closePopoverTimeout);
     }
     getTruncatedText() {
-        return this.citation.text && `${this.citation.text?.trim().slice(0, 200)}${this.citation.text.length > 200 ? '...' : ''}`;
+        const plainText = 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/esm/components/common/atomic-citation/atomic-citation.tw.css.js

@@ -1,4 +1,4 @@
 import { css } from "lit";
-const styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */:host{display:contents;position:relative}[part=citation]{--height:2.2em;--index-height:1.1em;--max-citation-width:400px;height:var(--height);max-width:var(--max-citation-width)}[part=citation-popover]{--popover-width:350px;width:var(--popover-width)}[part=citation-popover] p{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}`;
-const atomic_citation_tw_css = styles;
+const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */:host{display:contents;position:relative}[part=citation]{--height:2.2em;--index-height:1.1em;--max-citation-width:400px;height:var(--height);max-width:var(--max-citation-width)}[part=citation-popover]{--popover-width:350px;width:var(--popover-width)}[part=citation-popover] p{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}`;
+var atomic_citation_tw_css = styles;
 export default atomic_citation_tw_css;

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

@@ -397,7 +397,7 @@ AtomicGeneratedAnswerFeedbackModal.options = [
         correspondingAnswer: 'readable'
     }
 ];
-AtomicGeneratedAnswerFeedbackModal.styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */[part=generated-answer-feedback-modal]::part(container){min-width:calc(var(--spacing,.25rem)*170)}[part=generated-answer-feedback-modal]::part(body),[part=generated-answer-feedback-modal]::part(footer),[part=generated-answer-feedback-modal]::part(header){max-width:calc(var(--spacing,.25rem)*170)}@media not all and (min-width:1024px){[part=generated-answer-feedback-modal]::part(container){min-width:100%;width:auto}[part=generated-answer-feedback-modal]::part(body),[part=generated-answer-feedback-modal]::part(footer),[part=generated-answer-feedback-modal]::part(header){max-width:100%}[part=generated-answer-feedback-modal] [part=buttons] .required-label{font-size:var(--atomic-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}[part=generated-answer-feedback-modal] [part=form] .answer-evaluation{display:block}[part=generated-answer-feedback-modal] [part=form] .options{margin-top:calc(var(--spacing,.25rem)*2)}[part=generated-answer-feedback-modal] [part=modal-header] .hide{display:none}}[part=form] .active{background-color:var(--atomic-primary-background);border-color:var(--atomic-primary-light);color:var(--atomic-primary-light)}[part=form] .text-error-red{color:var(--atomic-inline-code)}`;
+AtomicGeneratedAnswerFeedbackModal.styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */[part=generated-answer-feedback-modal]::part(container){min-width:calc(var(--spacing,.25rem)*170)}[part=generated-answer-feedback-modal]::part(body),[part=generated-answer-feedback-modal]::part(footer),[part=generated-answer-feedback-modal]::part(header){max-width:calc(var(--spacing,.25rem)*170)}@media not all and (min-width:1024px){[part=generated-answer-feedback-modal]::part(container){min-width:100%;width:auto}[part=generated-answer-feedback-modal]::part(body),[part=generated-answer-feedback-modal]::part(footer),[part=generated-answer-feedback-modal]::part(header){max-width:100%}[part=generated-answer-feedback-modal] [part=buttons] .required-label{font-size:var(--atomic-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}[part=generated-answer-feedback-modal] [part=form] .answer-evaluation{display:block}[part=generated-answer-feedback-modal] [part=form] .options{margin-top:calc(var(--spacing,.25rem)*2)}[part=generated-answer-feedback-modal] [part=modal-header] .hide{display:none}}[part=form] .active{background-color:var(--atomic-primary-background);border-color:var(--atomic-primary-light);color:var(--atomic-primary-light)}[part=form] .text-error-red{color:var(--atomic-inline-code)}`;
 _ts_decorate([
     property({
         type: Boolean,

package/dist/esm/components/common/atomic-generated-answer-inline-link/atomic-generated-answer-inline-link.tw.css.js

@@ -1,4 +1,4 @@
 import { css } from "lit";
-const styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */:host{display:inline}a{color:var(--atomic-primary);text-decoration-line:none}a [part=answer-link-text]{text-decoration-line:underline}.icon-wrapper{display:inline-block;height:1em;vertical-align:text-bottom;width:1em}`;
-const atomic_generated_answer_inline_link_tw_css = styles;
+const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */:host{display:inline}a{color:var(--atomic-primary);text-decoration-line:none}a [part=answer-link-text]{text-decoration-line:underline}.icon-wrapper{display:inline-block;height:1em;vertical-align:text-bottom;width:1em}`;
+var atomic_generated_answer_inline_link_tw_css = styles;
 export default atomic_generated_answer_inline_link_tw_css;

package/dist/esm/components/common/atomic-generated-answer-thread/atomic-generated-answer-thread.js

@@ -24,6 +24,20 @@ class AtomicGeneratedAnswerThread extends LitElement {
         }
     }
     render() {
+        if (1 === this.generatedAnswers.length) {
+            const answer = this.generatedAnswers[0];
+            return html`
+        <atomic-generated-answer-content
+          .generatedAnswer=${answer}
+          .i18n=${this.i18n}
+          .renderCitations=${this.renderCitations}
+          .onClickLike=${this.onClickLike}
+          .onClickDislike=${this.onClickDislike}
+          .onCopyToClipboard=${this.onCopyToClipboard}
+          exportparts=${GENERATED_ANSWER_CONTENT_EXPORT_PARTS}
+        ></atomic-generated-answer-content>
+      `;
+        }
         if (this.generatedAnswers.length > MIN_ANSWERS_TO_COLLAPSE && !this.allGeneratedAnswersDisplayed) {
             const lastGeneratedAnswer = this.generatedAnswers[this.generatedAnswers.length - 1];
             return html`
@@ -42,7 +56,6 @@ class AtomicGeneratedAnswerThread extends LitElement {
     `;
     }
     renderThread(generatedAnswers) {
-        const showTimelineDot = this.generatedAnswers.length > 1;
         return html`
       ${repeat(generatedAnswers, (answer)=>answer.answerId, (answer, index)=>{
             const isLastAnswer = index === generatedAnswers.length - 1;
@@ -52,7 +65,6 @@ class AtomicGeneratedAnswerThread extends LitElement {
               .hideLine=${isLastAnswer}
               .disableCollapse=${isLastAnswer}
               .isExpanded=${isLastAnswer}
-              .showTimelineDot=${showTimelineDot}
             >
               <atomic-generated-answer-content
                 .generatedAnswer=${answer}
@@ -78,12 +90,13 @@ class AtomicGeneratedAnswerThread extends LitElement {
         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
@@ -93,23 +106,27 @@ class AtomicGeneratedAnswerThread extends LitElement {
       after:h-[8px] after:w-px after:bg-neutral after:content-['']
     `;
         return 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>
     `;

package/dist/esm/components/common/atomic-generated-answer-thread-item/atomic-generated-answer-thread-item.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
@@ -37,11 +37,14 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
         const titleButtonClasses = classMap({
             ...titleBaseClasses,
             ...titleWeightClasses,
-            'bg-transparent': true,
+            'bg-transparent': !this.isDotHovered,
+            'bg-neutral': this.isDotHovered,
+            'text-primary': this.isDotHovered,
             'border-0': true,
             'appearance-none': true,
             'transition-colors': true,
-            'hover:bg-neutral-light': true,
+            'hover:bg-neutral': true,
+            'hover:text-primary': true,
             'rounded-md': true,
             'cursor-pointer': true,
             'focus-visible:outline-none': true,
@@ -61,87 +64,87 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
             'bg-neutral-dark': this.isExpanded,
             'bg-neutral-dim': !this.isExpanded,
             'cursor-pointer': isTimelineDotInteractive,
-            'group-hover:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive
+            'hover:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive,
+            'group-has-[button:hover]/title:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive
         });
         const timelineDotToggleClasses = classMap({
             flex: true,
-            'w-[10px]': true,
-            'shrink-0': true,
             'justify-center': true,
-            'items-center': true
+            'items-center': true,
+            'text-base': true,
+            'h-[1lh] my-1.5': true
         });
         const timelineLineToggleClasses = classMap({
             flex: true,
-            'w-[10px]': true,
-            'shrink-0': true,
+            grow: true,
+            'w-full': true,
             'justify-center': true,
             'items-center': true,
             group: isTimelineLineInteractive,
             'cursor-pointer': isTimelineLineInteractive,
             'py-2': true,
-            '-my-2': true
-        });
-        const timelineBodyRowClasses = classMap({
-            flex: true,
-            'min-w-0': true,
-            'gap-3': true,
+            '-my-2': true,
             'min-h-3': !this.isExpanded
         });
         const timelineConnectorClasses = "relative h-full w-px bg-neutral transition-colors duration-150 group-hover:bg-neutral-dark before:absolute before:left-0 before:top-[-8px] before:h-[8px] before:w-px before:bg-neutral before:transition-colors before:duration-150 group-hover:before:bg-neutral-dark before:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-[8px] after:w-px after:bg-neutral after:transition-colors after:duration-150 group-hover:after:bg-neutral-dark after:content-['']";
         return html`
-      <div class="grid min-w-0">
-        <div class="flex min-w-0 items-center gap-3">
+      <div 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=${timelineDotToggleClasses}>
             ${when(this.showTimelineDot, ()=>html`
                 <span
                   class=${timelineDotClasses}
                   @click=${isTimelineDotInteractive ? this.toggle : null}
+                  @mouseenter=${isTimelineDotInteractive ? this.handleDotMouseEnter : null}
+                  @mouseleave=${isTimelineDotInteractive ? this.handleDotMouseLeave : null}
                 ></span>
               `)}
           </div>
-          <div class="flex min-w-0 flex-col">
-            ${when(!this.disableCollapse, ()=>html`<button
-                  type="button"
-                  aria-expanded=${this.isExpanded}
-                  aria-controls=${this.contentId}
-                  class=${titleButtonClasses}
-                  @click=${this.toggle}
-                >
-                  <span part="thread-item-title" style=${clampedTitleStyles}
-                    >${this.title}</span
-                  >
-                </button>`, ()=>html`<span
-                  class=${titleTextClasses}
-                  part="thread-item-title"
-                  style=${clampedTitleStyles}
-                  >${this.title}</span
-                >`)}
-          </div>
-        </div>
-        <div class=${timelineBodyRowClasses}>
           <div
             class=${timelineLineToggleClasses}
             @click=${isTimelineLineInteractive ? this.toggle : null}
           >
             ${when(this.hideLine, ()=>html``, ()=>html`<span class=${timelineConnectorClasses}> </span>`)}
           </div>
-          <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
-            <div
-              class="mb-2"
-              ?hidden=${!this.isExpanded}
-              aria-hidden=${this.isExpanded ? 'false' : 'true'}
-            >
-              <slot></slot>
-            </div>
+        </div>
+        <div class="flex min-w-0 flex-col">
+          ${when(!this.disableCollapse, ()=>html`<button
+                type="button"
+                aria-expanded=${this.isExpanded}
+                aria-controls=${this.contentId}
+                class=${titleButtonClasses}
+                @click=${this.toggle}
+              >
+                <span part="thread-item-title" style=${clampedTitleStyles}
+                  >${this.title}</span
+                >
+              </button>`, ()=>html`<span
+                class=${titleTextClasses}
+                part="thread-item-title"
+                style=${clampedTitleStyles}
+                >${this.title}</span
+              >`)}
+        </div>
+        <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
+          <div
+            class="mb-2"
+            ?hidden=${!this.isExpanded}
+            aria-hidden=${this.isExpanded ? 'false' : 'true'}
+          >
+            <slot></slot>
           </div>
         </div>
       </div>
     `;
     }
     constructor(...args){
-        super(...args), this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`, this.title = '', this.disableCollapse = false, this.hideLine = false, this.isExpanded = false, this.showTimelineDot = true, this.toggle = ()=>{
+        super(...args), this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`, this.title = '', this.disableCollapse = false, this.hideLine = false, this.isExpanded = false, this.showTimelineDot = true, this.isDotHovered = false, this.toggle = ()=>{
             if (this.disableCollapse) return;
             this.isExpanded = !this.isExpanded;
+        }, this.handleDotMouseEnter = ()=>{
+            this.isDotHovered = true;
+        }, this.handleDotMouseLeave = ()=>{
+            this.isDotHovered = false;
         };
     }
 }
@@ -174,6 +177,9 @@ _ts_decorate([
         attribute: 'show-timeline-dot'
     })
 ], AtomicGeneratedAnswerThreadItem.prototype, "showTimelineDot", void 0);
+_ts_decorate([
+    state()
+], AtomicGeneratedAnswerThreadItem.prototype, "isDotHovered", void 0);
 AtomicGeneratedAnswerThreadItem = _ts_decorate([
     customElement('atomic-generated-answer-thread-item'),
     withTailwindStyles

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

@@ -206,7 +206,7 @@ class AtomicModal extends InitializeBindingsMixin(LitElement) {
         };
     }
 }
-AtomicModal.styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@keyframes scaleUp{0%{opacity:0;transform:scale(.7)translateY(150vh)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(150vh)}}article.animate-open{animation:var(--animate-scale-up-modal,scaleUp .5s cubic-bezier(.165,.84,.44,1) forwards)}article.animate-close{animation:var(--animate-slide-down-modal,slideDown .5s linear forwards)}.grid-template-modal{grid-template:". . ."1fr".modal."". . ."3fr/1fr min(30rem,100%) 1fr}`;
+AtomicModal.styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@keyframes scaleUp{0%{opacity:0;transform:scale(.7)translateY(150vh)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(150vh)}}article.animate-open{animation:var(--animate-scale-up-modal,scaleUp .5s cubic-bezier(.165,.84,.44,1) forwards)}article.animate-close{animation:var(--animate-slide-down-modal,slideDown .5s linear forwards)}.grid-template-modal{grid-template:". . ."1fr".modal."". . ."3fr/1fr min(30rem,100%) 1fr}`;
 _ts_decorate([
     state(),
     _ts_metadata("design:type", "u" < typeof AnyBindings ? Object : AnyBindings)

package/dist/esm/components/common/atomic-rating/atomic-rating.tw.css.js

@@ -1,4 +1,4 @@
 import { css } from "lit";
-const styles = css`/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer components{:is(:is(atomic-product-rating,atomic-result-rating) .text-rating-icon-active,:is(atomic-product-rating,atomic-result-rating) .text-rating-icon-inactive) svg path{stroke:var(--atomic-rating-icon-outline-color,none)}}`;
-const atomic_rating_tw_css = styles;
+const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer components{:is(:is(atomic-product-rating,atomic-result-rating) .text-rating-icon-active,:is(atomic-product-rating,atomic-result-rating) .text-rating-icon-inactive) svg path{stroke:var(--atomic-rating-icon-outline-color,none)}}`;
+var atomic_rating_tw_css = styles;
 export default atomic_rating_tw_css;