@coveo/atomic 3.47.1 → 3.48.0

package/dist/atomic/components/components/ipx/atomic-ipx-embedded/atomic-ipx-embedded.js

@@ -6,7 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { renderIpxBody } from "../atomic-ipx-body/ipx-body.js";
+import { ipxBodyStyles } from "../atomic-ipx-body/ipx-body-styles.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils.js";
 import { once, randomID } from "../../../utils/utils.js";
@@ -18,6 +22,14 @@ import { once, randomID } from "../../../utils/utils.js";
  * @slot footer - Content to display in the footer section.
  *
  * @part backdrop - The backdrop container element.
+ * @part container - The content container element.
+ * @part header-wrapper - The wrapper around the header section.
+ * @part header - The header content container.
+ * @part header-ruler - The horizontal rule separating header and body.
+ * @part body-wrapper - The wrapper around the body section (scrollable).
+ * @part body - The body content container.
+ * @part footer-wrapper - The wrapper around the footer section.
+ * @part footer - The footer content container.
  */
 let AtomicIpxEmbedded = class AtomicIpxEmbedded extends LitElement {
     constructor() {
@@ -43,16 +55,22 @@ let AtomicIpxEmbedded = class AtomicIpxEmbedded extends LitElement {
         this.updateBreakpoints();
         return html `
       <div part="backdrop">
-        <atomic-ipx-body .displayFooterSlot=${this.hasFooterSlotElements}>
-          <slot name="header" slot="header"></slot>
-          <slot name="body" slot="body"></slot>
-          <slot name="footer" slot="footer"></slot>
-        </atomic-ipx-body>
+        ${renderIpxBody({
+            props: {
+                i18n: this.bindings.i18n,
+                visibility: 'embedded',
+                displayFooterSlot: this.hasFooterSlotElements,
+                header: html `<slot name="header"></slot>`,
+                body: html `<slot name="body"></slot>`,
+                footer: html `<slot name="footer"></slot>`,
+            },
+        })}
       </div>
     `;
     }
 };
 AtomicIpxEmbedded.styles = [
+    ipxBodyStyles,
     css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */:host{box-shadow:0 0 .5rem rgba(0,0,0,.5);height:inherit}[part=backdrop]{height:inherit;inset:auto 3rem 4.25rem auto;pointer-events:auto}`,
 ];
 __decorate([
@@ -67,6 +85,10 @@ __decorate([
 __decorate([
     state()
 ], AtomicIpxEmbedded.prototype, "hasFooterSlotElements", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxEmbedded.prototype, "render", null);
 AtomicIpxEmbedded = __decorate([
     customElement('atomic-ipx-embedded'),
     bindings(),

package/dist/atomic/components/components/ipx/atomic-ipx-modal/atomic-ipx-modal.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderIpxBody } from "../atomic-ipx-body/ipx-body";
+import { ipxBodyStyles } from "../atomic-ipx-body/ipx-body-styles";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { buildCustomEvent } from "../../../utils/event-utils";
+import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils";
+import { once, randomID } from "../../../utils/utils";
+/**
+ * The `atomic-ipx-modal` component is a modal component used for the In-Product Experience use case.
+ *
+ * It provides a modal dialog that can display header, body, and footer content through slots.
+ * The modal can be controlled through the `isOpen` property and emits events when animations complete.
+ *
+ * @part atomic-ipx-modal - The main modal container.
+ * @part backdrop - The backdrop behind the modal.
+ * @part container - The content container element.
+ * @part header-wrapper - The wrapper around the header section.
+ * @part header - The header content container.
+ * @part header-ruler - The horizontal rule separating header and body.
+ * @part body-wrapper - The wrapper around the body section (scrollable).
+ * @part body - The body content container.
+ * @part footer-wrapper - The wrapper around the footer section.
+ * @part footer - The footer content container.
+ *
+ * @slot header - The header content of the modal.
+ * @slot body - The main body content of the modal.
+ * @slot footer - The footer content of the modal (optional).
+ *
+ * @cssprop [--atomic-ipx-width=31.25rem] - The width of the modal.
+ * @cssprop [--atomic-ipx-height=43.75rem] - The height of the modal.
+ *
+ * @event animationEnded - Emitted when the modal animation ends.
+ */
+let AtomicIpxModal = class AtomicIpxModal extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         * Reflected to allow external consumers to observe the state via CSS attribute selectors.
+         */
+        this.isOpen = false;
+        this.hasFooterSlotElements = true;
+        this.updateBreakpoints = once(() => updateBreakpoints(this));
+        this.onWindowTouchMove = (e) => {
+            if (this.isOpen) {
+                e.preventDefault();
+            }
+        };
+        this.handleAnimationEnded = () => {
+            this.dispatchEvent(buildCustomEvent('animationEnded'));
+        };
+    }
+    initialize() { }
+    connectedCallback() {
+        super.connectedCallback();
+        document.body.addEventListener('touchmove', this.onWindowTouchMove, {
+            passive: false,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('touchmove', this.onWindowTouchMove);
+    }
+    watchToggleOpen() {
+        const modalOpenedClass = 'atomic-ipx-modal-opened';
+        if (this.isOpen) {
+            document.body.classList.add(modalOpenedClass);
+            this.bindings?.interfaceElement?.classList.add(modalOpenedClass);
+            return;
+        }
+        document.body.classList.remove(modalOpenedClass);
+        this.bindings?.interfaceElement?.classList.remove(modalOpenedClass);
+    }
+    willUpdate() {
+        this.hasFooterSlotElements = !!this.querySelector('[slot="footer"]');
+    }
+    firstUpdated() {
+        const id = this.id || randomID('atomic-ipx-modal-');
+        this.id = id;
+        this.setAttribute('part', 'atomic-ipx-modal');
+        this.watchToggleOpen();
+    }
+    updateHostClasses() {
+        this.classList.toggle('open', this.isOpen);
+    }
+    render() {
+        this.updateBreakpoints();
+        this.updateHostClasses();
+        return html `
+      <div part="backdrop">
+        ${renderIpxBody({
+            props: {
+                i18n: this.bindings.i18n,
+                visibility: this.isOpen ? 'open' : 'closed',
+                displayFooterSlot: this.hasFooterSlotElements,
+                onAnimationEnd: this.handleAnimationEnded,
+                header: html `<slot name="header"></slot>`,
+                body: html `<slot name="body"></slot>`,
+                footer: html `<slot name="footer"></slot>`,
+            },
+        })}
+      </div>
+    `;
+    }
+};
+AtomicIpxModal.styles = [
+    ipxBodyStyles,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-focus-trap{display:contents;height:inherit}:host{box-shadow:0 0 .5rem rgba(0,0,0,.5);display:none;height:var(--atomic-ipx-height,43.75rem);inset:auto 3rem 4.25rem auto;max-height:calc(100vh - 4.25rem);max-width:calc(100vw - 3rem);position:fixed;width:var(--atomic-ipx-width,31.25rem);z-index:1000;[part=backdrop]{height:inherit;pointer-events:none}}:host(.open){display:block;[part=backdrop]{height:inherit;max-height:calc(100vh - 4.25rem);pointer-events:auto}}`,
+];
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "error", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicIpxModal.prototype, "source", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicIpxModal.prototype, "container", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'is-open',
+        converter: booleanConverter,
+    })
+], AtomicIpxModal.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "hasFooterSlotElements", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicIpxModal.prototype, "watchToggleOpen", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxModal.prototype, "render", null);
+AtomicIpxModal = __decorate([
+    customElement('atomic-ipx-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxModal);
+export { AtomicIpxModal };

package/dist/atomic/components/components/ipx/atomic-ipx-result-link/atomic-ipx-result-link.js

@@ -0,0 +1,141 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { isUndefined } from '@coveo/bueno';
+import { loadIPXActionsHistoryActions } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { getAttributesFromLinkSlotContent } from "../../common/item-link/attributes-slot";
+import { renderLinkWithItemAnalytics } from "../../common/item-link/item-link";
+import { createInteractiveResultContextController } from "../../search/result-template-component-utils/context/interactive-result-context-controller";
+import { createResultContextController } from "../../search/result-template-component-utils/context/result-context-controller";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { LightDomMixin } from "../../../mixins/light-dom";
+import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
+import { buildCustomEvent } from "../../../utils/event-utils";
+import { buildStringTemplateFromResult } from "../../../utils/result-utils";
+import "../../search/atomic-result-text/atomic-result-text";
+import styles from './atomic-ipx-result-link.tw.css';
+/**
+ * The `atomic-ipx-result-link` component automatically transforms a search result title into a clickable link that points to the original item.
+ *
+ * **Note:** This is an experimental internal component not intended for general use.
+ *
+ * @slot default - Lets you display alternative content inside the link
+ * @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to the link element, overriding other attributes, to be used exclusively with an "a" tag such as `<a slot="attributes" target="_blank" download></a>`.
+ */
+let AtomicIpxResultLink = class AtomicIpxResultLink extends LightDomMixin(SlotsForNoShadowDOMMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.resultContext = createResultContextController(this);
+        this.interactiveResultContext = createInteractiveResultContextController(this);
+    }
+    initialize() {
+        if (!this.result && this.resultContext.item) {
+            const item = this.resultContext.item;
+            if ('result' in item) {
+                this.result = item.result;
+            }
+            else {
+                this.result = item;
+            }
+        }
+        if (!this.interactiveResult &&
+            this.interactiveResultContext.interactiveItem) {
+            this.interactiveResult = this.interactiveResultContext.interactiveItem;
+        }
+        this.dispatchEvent(buildCustomEvent('atomic/resolveStopPropagation', (stopPropagation) => {
+            this.stopPropagation = stopPropagation;
+        }));
+        this.actionsHistoryActions = loadIPXActionsHistoryActions(this.bindings.engine);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.removeLinkEventHandlers) {
+            this.removeLinkEventHandlers();
+            this.removeLinkEventHandlers = undefined;
+        }
+    }
+    onSelect() {
+        const resultPermanentId = this.result.raw.permanentid;
+        if (resultPermanentId && this.actionsHistoryActions) {
+            const action = this.actionsHistoryActions.addPageViewEntryInActionsHistory(resultPermanentId);
+            this.bindings.engine.dispatch(action);
+        }
+        this.interactiveResult.select();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        this.linkAttributes = getAttributesFromLinkSlotContent(this, 'attributes');
+    }
+    render() {
+        return html `${when(this.result && this.interactiveResult, () => {
+            const result = this.result;
+            const interactiveResult = this.interactiveResult;
+            const href = isUndefined(this.hrefTemplate)
+                ? result.clickUri
+                : buildStringTemplateFromResult(this.hrefTemplate, result, this.bindings);
+            return renderLinkWithItemAnalytics({
+                props: {
+                    href,
+                    onSelect: () => this.onSelect(),
+                    onBeginDelayedSelect: () => interactiveResult.beginDelayedSelect(),
+                    onCancelPendingSelect: () => interactiveResult.cancelPendingSelect(),
+                    attributes: this.linkAttributes,
+                    stopPropagation: this.stopPropagation,
+                    onInitializeLink: (cleanupCallback) => {
+                        if (this.removeLinkEventHandlers) {
+                            this.removeLinkEventHandlers();
+                        }
+                        this.removeLinkEventHandlers = cleanupCallback;
+                    },
+                },
+            })(html `
+        ${this.renderDefaultSlotContent(html `<atomic-result-text
+            field="title"
+            default="no-title"
+          ></atomic-result-text>`)}
+      `);
+        })}`;
+    }
+};
+AtomicIpxResultLink.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: 'href-template' })
+], AtomicIpxResultLink.prototype, "hrefTemplate", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "linkAttributes", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "stopPropagation", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "result", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "interactiveResult", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "actionsHistoryActions", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxResultLink.prototype, "render", null);
+AtomicIpxResultLink = __decorate([
+    customElement('atomic-ipx-result-link'),
+    bindings()
+], AtomicIpxResultLink);
+export { AtomicIpxResultLink };

package/dist/atomic/components/components/ipx/atomic-ipx-result-link/atomic-ipx-result-link.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-ipx-result-link a{color:var(--atomic-on-background);&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}`;
+export default styles;

package/dist/atomic/components/components/ipx/index.js

@@ -1,5 +1,7 @@
 // Auto-generated file
 export { AtomicIpxButton } from './atomic-ipx-button/atomic-ipx-button.js';
 export { AtomicIpxEmbedded } from './atomic-ipx-embedded/atomic-ipx-embedded.js';
+export { AtomicIpxModal } from './atomic-ipx-modal/atomic-ipx-modal.js';
+export { AtomicIpxResultLink } from './atomic-ipx-result-link/atomic-ipx-result-link.js';
 export { AtomicIpxTab } from './atomic-ipx-tab/atomic-ipx-tab.js';
 export { AtomicIpxTabs } from './atomic-ipx-tabs/atomic-ipx-tabs.js';

package/dist/atomic/components/components/ipx/lazy-index.js

@@ -2,6 +2,8 @@
 export default {
     'atomic-ipx-button': async () => await import('./atomic-ipx-button/atomic-ipx-button.js'),
     'atomic-ipx-embedded': async () => await import('./atomic-ipx-embedded/atomic-ipx-embedded.js'),
+    'atomic-ipx-modal': async () => await import('./atomic-ipx-modal/atomic-ipx-modal.js'),
+    'atomic-ipx-result-link': async () => await import('./atomic-ipx-result-link/atomic-ipx-result-link.js'),
     'atomic-ipx-tab': async () => await import('./atomic-ipx-tab/atomic-ipx-tab.js'),
     'atomic-ipx-tabs': async () => await import('./atomic-ipx-tabs/atomic-ipx-tabs.js'),
 };

package/dist/atomic/components/components/search/atomic-breadbox/atomic-breadbox.js

@@ -316,7 +316,7 @@ let AtomicBreadbox = AtomicBreadbox_1 = class AtomicBreadbox extends LitElement
     }
 };
 AtomicBreadbox.styles = [
-    css``,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */[part=breadcrumb-label].excluded,[part=breadcrumb-value].excluded{color:var(--atomic-error);text-decoration:line-through}`,
 ];
 AtomicBreadbox.propsSchema = new Schema({
     pathLimit: new NumberValue({

package/dist/atomic/components/components/search/atomic-generated-answer/atomic-generated-answer.js

@@ -9,10 +9,13 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildGeneratedAnswer, buildInteractiveCitation, buildSearchStatus, buildTabManager, } from '@coveo/headless';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { GeneratedAnswerController } from "../../common/generated-answer/generated-answer-controller";
 import { renderAnswerContent } from "../../common/generated-answer/render-answer-content";
+import { renderCardHeader } from "../../common/generated-answer/render-card-header";
 import { renderCitations } from "../../common/generated-answer/render-citations";
 import { renderCustomNoAnswerMessage } from "../../common/generated-answer/render-custom-no-answer-message";
+import { renderDisclaimer } from "../../common/generated-answer/render-disclaimer";
 import { renderFeedbackAndCopyButtons } from "../../common/generated-answer/render-feedback-and-copy-buttons";
 import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
 import { arrayConverter } from "../../../converters/array-converter";
@@ -35,11 +38,15 @@ import atomicGeneratedAnswerStyles from './atomic-generated-answer.tw.css.js';
  * @slot no-answer-message - Lets you pass a custom sorry message when no answer is generated.
  *
  * @part container - The container displaying the generated answer.
- * @part header-label - The header of the generated answer container.
+ * @part header -   The header container of the generated answer card.
+ * @part header-icon - The icon in the header of the generated answer card.
+ * @part header-label - The header label of the generated answer card.
  * @part feedback-button - The "like" and "dislike" buttons.
  * @part feedback-and-copy-buttons - The container for the feedback and copy buttons.
  * @part toggle - The switch to toggle the visibility of the generated answer.
  * @part copy-button - The "Copy answer" button.
+ * @part generated-content-container - The container for the generated answer content.
+ * @part generated-content - The main content of the generated answer.
  * @part retry-container - The container for the "retry" section.
  * @part generated-text - The text of the generated answer.
  * @part citations-label - The header of the citations list.
@@ -202,7 +209,10 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
               part="container"
               aria-label=${this.bindings.i18n.t('generated-answer-title')}
             >
-              <article>${this.renderCustomNoAnswerMessageWrapper()}</article>
+              <div part="generated-content">
+                ${this.renderCardHeaderWrapper()}
+                ${when(this.isAnswerVisible, () => html `<article>${renderCustomNoAnswerMessage()}</article>`)}
+              </div>
             </aside>
           </div>
         `;
@@ -216,14 +226,22 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
           part="container"
           aria-label=${this.bindings.i18n.t('generated-answer-title')}
         >
-          <article>${this.renderContent()}</article>
+          <div part="generated-content">
+            ${this.renderCardHeaderWrapper()}
+            ${when(this.isAnswerVisible, () => html ` <div part="generated-content-container" class="px-6 pb-6">
+                  <article>${this.renderAnswerContent()}</article>
+                  ${renderDisclaimer({
+            props: {
+                i18n: this.bindings.i18n,
+                isStreaming: !!this.generatedAnswerState.isStreaming,
+            },
+        })}
+                </div>`)}
+          </div>
         </aside>
       </div>
     `;
     }
-    get hasRetryableError() {
-        return this.controller.hasRetryableError;
-    }
     get hasNoAnswerGenerated() {
         return this.controller.hasNoAnswerGenerated;
     }
@@ -358,31 +376,33 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
             },
         });
     }
-    renderContent() {
+    renderAnswerContent() {
+        const generatedAnswer = {
+            ...this.generatedAnswerState,
+            question: this.bindings.engine.state.query?.q ?? '',
+        };
         return renderAnswerContent({
             props: {
                 i18n: this.bindings.i18n,
-                generatedAnswerState: this.generatedAnswerState,
-                isAnswerVisible: this.isAnswerVisible,
-                hasRetryableError: this.hasRetryableError,
-                toggleTooltip: this.toggleTooltip,
-                withToggle: this.withToggle,
+                generatedAnswer: generatedAnswer,
                 collapsible: this.collapsible,
-                question: this.bindings.engine.state.query?.q ?? '',
                 renderFeedbackAndCopyButtonsSlot: () => this.renderFeedbackAndCopyButtonsWrapper(),
                 renderCitationsSlot: () => html `${this.renderCitationsList()}`,
-                onToggle: (checked) => {
-                    checked ? this.generatedAnswer?.show() : this.generatedAnswer?.hide();
-                },
                 onRetry: () => this.generatedAnswer?.retry(),
                 onClickShowButton: () => this.clickOnShowButton(),
             },
         });
     }
-    renderCustomNoAnswerMessageWrapper() {
-        return renderCustomNoAnswerMessage({
+    renderCardHeaderWrapper() {
+        return renderCardHeader({
             props: {
                 i18n: this.bindings.i18n,
+                isAnswerVisible: this.isAnswerVisible,
+                toggleTooltip: this.toggleTooltip,
+                withToggle: this.withToggle,
+                onToggle: (checked) => {
+                    checked ? this.generatedAnswer?.show() : this.generatedAnswer?.hide();
+                },
             },
         });
     }

package/dist/atomic/components/components/search/atomic-notifications/atomic-notifications.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var AtomicNotifications_1;
+import "../../common/atomic-icon/atomic-icon";
 import { NumberValue, Schema } from '@coveo/bueno';
 import { buildNotifyTrigger, } from '@coveo/headless';
 import { html, LitElement, nothing } from 'lit';

package/dist/atomic/components/components/search/atomic-quickview/atomic-quickview.js

@@ -20,6 +20,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
 const QuickviewIcon = "<svg focusable=\"false\" enable-background=\"new 0 0 20 12\" viewBox=\"0 0 20 12\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Quickview\"><title>Quickview</title><g fill=\"currentColor\"><path d=\"m10 4.3c-1 0-1.7.8-1.7 1.7 0 1 .8 1.7 1.7 1.7 1 0 1.7-.8 1.7-1.7 0-1-.7-1.7-1.7-1.7m0 4.7c-1.6 0-3-1.4-3-3s1.4-3 3-3 3 1.4 3 3-1.4 3-3 3\"/><path d=\"m19.8 6.4v-.001c.069-.117.109-.253.109-.399s-.04-.282-.109-.399v-.001c-.005-.008.005.007 0 0-2.203-3.473-5.917-5.6-9.8-5.6-3.884 0-7.655 2.091-9.8 5.602l0 0c-.069.117-.109.253-.109.398s.04.281.109.398c0 0-.001-.002 0 0 2.203 3.475 5.916 5.602 9.8 5.602 3.883 0 7.597-2.127 9.8-5.6.005-.007-.005.008 0 0zm-9.8 4.1c-3.236 0-6.28-1.635-8.189-4.339-.067-.095-.067-.228-.002-.324 1.908-2.797 4.953-4.337 8.191-4.337 3.235 0 6.278 1.634 8.187 4.337.068.096.068.231 0 .327-1.909 2.702-4.952 4.336-8.187 4.336z\"/></g></svg>";
 import "../../common/atomic-icon/atomic-icon";
+import "../atomic-quickview-modal/atomic-quickview-modal";
 /**
  * The `atomic-quickview` component renders a button which the end user can click to open a modal box containing a preview
  * about a result.

package/dist/atomic/components/components/search/atomic-refine-modal/atomic-refine-modal.js

@@ -24,6 +24,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { shouldDisplayOnCurrentTab } from "../../../utils/tab-utils";
 import { sortByDocumentPosition } from "../../../utils/utils";
 import { collapseFacetsAfter, sortFacetVisibility, triageFacetsByParents, } from '../../common/facets/facet-common';
+import "../atomic-automatic-facet-generator/atomic-automatic-facet-generator";
 /**
  * The `atomic-refine-modal` component is automatically created as a child of the `atomic-search-interface` when the `atomic-refine-toggle` is initialized.
  *
@@ -243,7 +244,7 @@ let AtomicRefineModal = class AtomicRefineModal extends LitElement {
     }
 };
 AtomicRefineModal.styles = [
-    css``,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */select:focus-visible+div,select:hover+div{color:var(--atomic-primary-light)}`,
 ];
 __decorate([
     state()

package/dist/atomic/components/components/search/atomic-refine-toggle/atomic-refine-toggle.js

@@ -14,6 +14,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { renderRefineToggleButton } from '../../common/refine-modal/button';
 import { refineToggleGuard } from '../../common/refine-modal/guard';
+import "../atomic-refine-modal/atomic-refine-modal";
 /**
  * The `atomic-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
  *

package/dist/atomic/components/components/search/atomic-result-children/atomic-result-children.js

@@ -222,7 +222,7 @@ let AtomicResultChildren = class AtomicResultChildren extends LitElement {
         })(this.collection ? this.renderCollection() : this.renderFoldedResult()))}`;
     }
 };
-AtomicResultChildren.styles = css``;
+AtomicResultChildren.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.show-hide-button{--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)}.no-result-root{color:var(--atomic-neutral-dark)}`;
 __decorate([
     property({ type: Boolean, attribute: 'inherit-templates' })
 ], AtomicResultChildren.prototype, "inheritTemplates", void 0);

package/dist/atomic/components/components/search/atomic-result-link/atomic-result-link.js

@@ -50,9 +50,6 @@ let AtomicResultLink = class AtomicResultLink extends LightDomMixin(SlotsForNoSh
             this.stopPropagation = stopPropagation;
         }));
     }
-    connectedCallback() {
-        super.connectedCallback();
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.removeLinkEventHandlers) {
@@ -60,6 +57,10 @@ let AtomicResultLink = class AtomicResultLink extends LightDomMixin(SlotsForNoSh
             this.removeLinkEventHandlers = undefined;
         }
     }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        this.linkAttributes = getAttributesFromLinkSlotContent(this, 'attributes');
+    }
     render() {
         return html `${when(this.result && this.interactiveResult, () => {
             const result = this.result;
@@ -67,7 +68,6 @@ let AtomicResultLink = class AtomicResultLink extends LightDomMixin(SlotsForNoSh
             const href = isUndefined(this.hrefTemplate)
                 ? result.clickUri
                 : buildStringTemplateFromResult(this.hrefTemplate, result, this.bindings);
-            this.linkAttributes = getAttributesFromLinkSlotContent(this, 'attributes');
             return renderLinkWithItemAnalytics({
                 props: {
                     href,