@coveo/atomic 3.47.0 → 3.48.0

package/dist/atomic/components/components/common/generated-answer/render-answer-content.js

@@ -4,65 +4,35 @@ import { renderGeneratedContentContainer } from "./generated-content-container";
 import { renderRetryPrompt } from "./retry-prompt";
 import { renderShowButton } from "./show-button";
 import { renderSourceCitations } from "./source-citations";
-import { renderHeading } from "../heading";
-import { renderSwitch } from "../switch";
-import { renderDisclaimer } from './render-disclaimer';
 import { renderGeneratingAnswerLabel } from './render-generating-answer-label';
 import "../atomic-icon/atomic-icon";
 /**
- * Renders the main content of the generated answer including header, toggle, answer text, and citations.
+ * Renders the answer content of a given generated answer including question, answer text, and citations.
  */
 export const renderAnswerContent = ({ props }) => {
-    const { i18n, generatedAnswerState, isAnswerVisible, hasRetryableError, toggleTooltip, withToggle, collapsible, question, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onToggle, onRetry, onClickShowButton, } = props;
-    const { isStreaming, answer, citations, answerContentFormat, expanded } = generatedAnswerState ?? {};
+    const { i18n, generatedAnswer, collapsible, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onRetry, onClickShowButton, } = props;
+    const { answer, question, isStreaming, citations, answerContentFormat, expanded, error, } = generatedAnswer;
     const isExpanded = collapsible ? expanded : true;
-    const currentQuestion = question.trim();
+    const trimmedQuestion = question.trim();
+    const hasRetryableError = error?.isRetryable === true;
     return html `
-    <div part="generated-content">
-      <div part="header" class="flex items-center ${isAnswerVisible ? 'border-b-1 border-gray-200' : ''} px-6 py-3">
-        <atomic-icon
-          part="header-icon"
-          class="text-primary h-4 w-4 fill-current"
-          .icon=${'assets://sparkles.svg'}>
-        </atomic-icon>
-        ${renderHeading({
-        props: {
-            level: 0,
-            part: 'header-label',
-            class: 'text-primary inline-block rounded-md px-2.5 py-2 font-medium',
-        },
-    })(html `${i18n.t('generated-answer-title')}`)}
-        <div class="ml-auto flex h-9 items-center">
-          ${renderSwitch({
-        props: {
-            part: 'toggle',
-            checked: isAnswerVisible,
-            onToggle,
-            ariaLabel: i18n.t('generated-answer-title'),
-            title: toggleTooltip,
-            withToggle,
-            tabIndex: 0,
-        },
-    })}
-        </div>
-      </div>
-      ${when(isAnswerVisible, () => html `
-          <div part="generated-content-container" class="px-6 pb-6">
-            <div class="mt-6 flex gap-3">
-              <p
-                class="question-text min-w-0 flex-1 text-base font-semibold leading-6">
-                ${currentQuestion}
-              </p>
-              ${when(!hasRetryableError && isExpanded, () => html `
-                  <div
-                    part="feedback-and-copy-buttons"
-                    class="flex h-9 shrink-0 items-center justify-end gap-2"
-                  >
-                    ${renderFeedbackAndCopyButtonsSlot()}
-                  </div>
-                `)}
+    <div>
+      <div class="mt-6 flex gap-3">
+        <p
+          class="question-text min-w-0 flex-1 text-base font-semibold leading-6"
+        >
+          ${trimmedQuestion}
+        </p>
+        ${when(!hasRetryableError && isExpanded, () => html `
+            <div
+              part="feedback-and-copy-buttons"
+              class="flex h-9 shrink-0 items-center justify-end gap-2"
+            >
+              ${renderFeedbackAndCopyButtonsSlot()}
             </div>
-            ${hasRetryableError
+          `)}
+      </div>
+      ${hasRetryableError
         ? renderRetryPrompt({
             props: {
                 onClick: onRetry,
@@ -71,7 +41,7 @@ export const renderAnswerContent = ({ props }) => {
             },
         })
         : nothing}
-            ${!hasRetryableError
+      ${!hasRetryableError
         ? renderGeneratedContentContainer({
             props: {
                 answer,
@@ -79,19 +49,21 @@ export const renderAnswerContent = ({ props }) => {
                 isStreaming: !!isStreaming,
             },
         })(html `
-                  ${renderSourceCitations({
+            ${renderSourceCitations({
             props: {
                 label: i18n.t('citations'),
                 isVisible: !!citations?.length,
             },
         })(renderCitationsSlot())}
-                `)
+          `)
         : nothing}
-            ${!hasRetryableError
+      ${!hasRetryableError
         ? html `
-                  <div part="generated-answer-footer" class="mt-6">
-                    ${renderGeneratingAnswerLabel({ props: { i18n, isStreaming: !!isStreaming, collapsible } })}
-                    ${collapsible && !isStreaming
+            <div part="generated-answer-footer" class="mt-6">
+              ${renderGeneratingAnswerLabel({
+            props: { i18n, isStreaming: !!isStreaming, collapsible },
+        })}
+              ${collapsible && !isStreaming
             ? renderShowButton({
                 props: {
                     i18n,
@@ -100,14 +72,9 @@ export const renderAnswerContent = ({ props }) => {
                 },
             })
             : nothing}
-                    <div class="flex justify-end">
-                      ${renderDisclaimer({ props: { i18n, isStreaming: !!isStreaming } })}
-                    </div>
-                  </div>
-                `
+            </div>
+          `
         : nothing}
-          </div>
-        `, () => nothing)}
     </div>
   `;
 };

package/dist/atomic/components/components/common/generated-answer/render-card-header.js

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import "../atomic-icon/atomic-icon";
+import { renderHeading } from "../heading";
+import { renderSwitch } from "../switch";
+/**
+ * Renders the card header for the generated answer.
+ */
+export const renderCardHeader = ({ props, }) => {
+    const { i18n, isAnswerVisible, toggleTooltip, withToggle, onToggle } = props;
+    return html ` <div
+    part="header"
+    class="flex items-center ${isAnswerVisible ? 'border-b-1 border-gray-200' : ''} px-6 py-3"
+  >
+    <atomic-icon
+      part="header-icon"
+      class="text-primary h-4 w-4 fill-current"
+      .icon=${'assets://sparkles.svg'}
+    >
+    </atomic-icon>
+    ${renderHeading({
+        props: {
+            level: 0,
+            part: 'header-label',
+            class: 'text-primary inline-block rounded-md px-2.5 py-2 font-medium',
+        },
+    })(html `${i18n.t('generated-answer-title')}`)}
+    <div class="ml-auto flex h-9 items-center">
+      ${renderSwitch({
+        props: {
+            part: 'toggle',
+            checked: isAnswerVisible,
+            onToggle,
+            ariaLabel: i18n.t('generated-answer-title'),
+            title: toggleTooltip,
+            withToggle,
+            tabIndex: 0,
+        },
+    })}
+    </div>
+  </div>`;
+};

package/dist/atomic/components/components/common/generated-answer/render-custom-no-answer-message.js

@@ -1,24 +1,11 @@
 import { html } from 'lit';
-import { renderHeading } from "../heading";
 /**
  * Renders the custom "no answer" message container.
  */
-export const renderCustomNoAnswerMessage = ({ props }) => {
-    const { i18n } = props;
+export const renderCustomNoAnswerMessage = () => {
     return html `
-    <div part="generated-content">
-      <div class="flex items-center">
-        ${renderHeading({
-        props: {
-            level: 0,
-            part: 'header-label',
-            class: 'text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium',
-        },
-    })(html `${i18n.t('generated-answer-title')}`)}
-      </div>
-      <div part="generated-container" class="mt-6 break-words">
+      <div part="generated-container" class="mt-6 break-words px-6 pb-6">
         <slot name="no-answer-message"></slot>
       </div>
-    </div>
   `;
 };

package/dist/atomic/components/components/common/generated-answer/render-disclaimer.js

@@ -6,7 +6,7 @@ import { when } from 'lit/directives/when.js';
 export const renderDisclaimer = ({ props, }) => {
     const { i18n, isStreaming } = props;
     return html `${when(!isStreaming, () => html `
-      <div class="text-neutral-dark text-xs/[1rem]">
+      <div class="flex justify-end text-neutral-dark text-xs/[1rem]">
         <slot name="disclaimer">${i18n.t('generated-answer-disclaimer')}</slot>
       </div>
     `)}`;

package/dist/atomic/components/components/common/generated-answer/show-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { renderButton } from "../button";

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

@@ -6,6 +6,7 @@ export { AtomicFacetDateInput } from './atomic-facet-date-input/atomic-facet-dat
 export { AtomicFacetNumberInput } from './atomic-facet-number-input/atomic-facet-number-input.js';
 export { AtomicFacetPlaceholder } from './atomic-facet-placeholder/atomic-facet-placeholder.js';
 export { AtomicFocusTrap } from './atomic-focus-trap/atomic-focus-trap.js';
+export { AtomicGeneratedAnswerFeedbackModal } from './atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js';
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
 export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';
 export { AtomicModal } from './atomic-modal/atomic-modal.js';

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

@@ -1,5 +1,7 @@
 import { buildResultTemplatesManager, } from '@coveo/headless';
 import { TemplateProvider, } from '../template-provider/template-provider';
+// TODO: add this import once this class isn't used in Stencil components anymore
+// import '@/src/components/search/atomic-result-link/atomic-result-link';
 export class ResultTemplateProvider extends TemplateProvider {
     constructor(props, gridCellLinkTarget) {
         super(props, () => buildResultTemplatesManager(props.bindings.engine));

package/dist/atomic/components/components/common/item-list/table-layout.js

@@ -1,3 +1,4 @@
+import "../../search/atomic-text/atomic-text";
 import { html } from 'lit';
 import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';

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

@@ -7,6 +7,7 @@ export default {
     'atomic-facet-number-input': async () => await import('./atomic-facet-number-input/atomic-facet-number-input.js'),
     'atomic-facet-placeholder': async () => await import('./atomic-facet-placeholder/atomic-facet-placeholder.js'),
     'atomic-focus-trap': async () => await import('./atomic-focus-trap/atomic-focus-trap.js'),
+    'atomic-generated-answer-feedback-modal': async () => await import('./atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js'),
     'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
     'atomic-layout-section': async () => await import('./atomic-layout-section/atomic-layout-section.js'),
     'atomic-modal': async () => await import('./atomic-modal/atomic-modal.js'),

package/dist/atomic/components/components/common/no-items/magnifying-glass.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const MagnifyingGlassIcon = "<svg viewBox=\"0 0 312 312\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<g filter=\"url(#filter0_b)\">\n<rect x=\"156.118\" width=\"220.784\" height=\"220.784\" rx=\"14.7189\" transform=\"rotate(45 156.118 0)\" fill=\"#F6F7F9\"/>\n</g>\n<rect x=\"60.1178\" y=\"126\" width=\"34\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"102.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"177.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"151\" width=\"162\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"176\" width=\"177\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<g filter=\"url(#filter1_f)\">\n<path d=\"M183.857 226.206C179.378 223.774 178.389 217.774 181.85 214.033C184.309 211.374 188.273 210.753 191.427 212.532L247.561 244.198C251.767 246.571 252.551 252.302 249.136 255.717C246.849 258.004 243.331 258.513 240.49 256.97L183.857 226.206Z\" fill=\"#E5E8E8\"/>\n</g>\n<rect x=\"195.143\" y=\"205.948\" width=\"15.064\" height=\"78.2384\" rx=\"7.53201\" transform=\"rotate(-45 195.143 205.948)\" fill=\"#333357\"/>\n<g filter=\"url(#filter2_d)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M161.415 226.595C200.792 226.595 232.713 194.674 232.713 155.298C232.713 115.921 200.792 84 161.415 84C122.039 84 90.1178 115.921 90.1178 155.298C90.1178 194.674 122.039 226.595 161.415 226.595ZM161.441 212.539C193.041 212.539 218.657 186.922 218.657 155.323C218.657 123.724 193.041 98.108 161.441 98.108C129.842 98.108 104.226 123.724 104.226 155.323C104.226 186.922 129.842 212.539 161.441 212.539Z\" fill=\"url(#paint0_linear)\"/>\n</g>\n<g filter=\"url(#filter3_d)\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"59.6307\" fill=\"url(#paint1_linear)\"/>\n</g>\n<g filter=\"url(#filter4_i)\">\n<circle cx=\"161.441\" cy=\"155.323\" r=\"57.2153\" fill=\"url(#paint2_linear)\"/>\n</g>\n<mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"104\" y=\"98\" width=\"115\" height=\"115\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"57.038\" fill=\"white\"/>\n</mask>\n<g mask=\"url(#mask0)\">\n<rect opacity=\"0.5\" x=\"104.118\" y=\"126\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint3_linear)\"/>\n<rect opacity=\"0.5\" x=\"184.118\" y=\"167\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint4_linear)\"/>\n<g opacity=\"0.6\" filter=\"url(#filter5_f)\">\n<path d=\"M179.303 90.5597L187.576 96.3233C187.576 96.3233 140.259 159.434 177.535 239.024C164.157 234.174 126.719 230.494 120.018 222.474C88.6871 131.944 179.303 90.5597 179.303 90.5597Z\" fill=\"url(#paint5_linear)\"/>\n</g>\n<g opacity=\"0.5\" filter=\"url(#filter6_f)\">\n<circle cx=\"197.896\" cy=\"133.778\" r=\"7.77791\" fill=\"white\"/>\n</g>\n<g opacity=\"0.7\" filter=\"url(#filter7_f)\">\n<circle cx=\"207.359\" cy=\"150.241\" r=\"3.2408\" fill=\"white\"/>\n</g>\n</g>\n</g>\n<defs>\n<filter id=\"filter0_b\" x=\"-3.67968\" y=\"-3.67973\" width=\"319.595\" height=\"319.595\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur\" result=\"shape\"/>\n</filter>\n<filter id=\"filter1_f\" x=\"171.347\" y=\"190.878\" width=\"88.139\" height=\"88.139\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"2.59264\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter2_d\" x=\"59.0061\" y=\"84\" width=\"204.818\" height=\"206.115\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"32.408\"/>\n<feGaussianBlur stdDeviation=\"15.5558\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 0.38 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter3_d\" x=\"91.4141\" y=\"85.2963\" width=\"140.002\" height=\"140.002\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"5.18528\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter4_i\" x=\"104.226\" y=\"98.108\" width=\"114.431\" height=\"124.801\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"10.3706\"/>\n<feGaussianBlur stdDeviation=\"5.83344\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.529306 0 0 0 0 0.529306 0 0 0 0 0.858333 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow\"/>\n</filter>\n<filter id=\"filter5_f\" x=\"93.7083\" y=\"75.6215\" width=\"134.473\" height=\"171.666\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.5\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter6_f\" x=\"187.525\" y=\"123.407\" width=\"20.7411\" height=\"20.7411\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter7_f\" x=\"201.525\" y=\"144.407\" width=\"11.6669\" height=\"11.6669\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<linearGradient id=\"paint0_linear\" x1=\"106.615\" y1=\"63.4032\" x2=\"289.344\" y2=\"240.521\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.505208\" stop-color=\"#3F3F71\"/>\n<stop offset=\"1\" stop-color=\"#5D237D\"/>\n</linearGradient>\n<linearGradient id=\"paint1_linear\" x1=\"200.305\" y1=\"208.447\" x2=\"121.878\" y2=\"98.259\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#333357\"/>\n<stop offset=\"1\" stop-color=\"#6B6BBD\" stop-opacity=\"0.49\"/>\n</linearGradient>\n<linearGradient id=\"paint2_linear\" x1=\"116.692\" y1=\"142.334\" x2=\"206.138\" y2=\"195.483\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.0255459\" stop-color=\"white\"/>\n<stop offset=\"1\" stop-color=\"#E5E8E8\"/>\n</linearGradient>\n<linearGradient id=\"paint3_linear\" x1=\"134.811\" y1=\"148.895\" x2=\"127.845\" y2=\"133.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\" stop-opacity=\"0.41\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint4_linear\" x1=\"214.811\" y1=\"189.895\" x2=\"207.845\" y2=\"174.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint5_linear\" x1=\"164.859\" y1=\"93.962\" x2=\"143.031\" y2=\"190.673\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"white\" stop-opacity=\"0\"/>\n<stop offset=\"0.198345\" stop-color=\"white\" stop-opacity=\"0.72\"/>\n<stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n</linearGradient>\n<clipPath id=\"clip0\">\n<rect width=\"312\" height=\"312\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n";
 export const renderMagnifyingGlass = () => {

package/dist/atomic/components/components/common/refine-modal/cloned-facet-elements.js

@@ -0,0 +1,21 @@
+import { popoverClass } from '../facets/popover/popover-type';
+import { isRefineModalFacet } from '../interface/store';
+export function getClonedFacetElements(facetElements, collapseFacetsAfter, root) {
+    const divSlot = document.createElement('div');
+    divSlot.setAttribute('slot', 'facets');
+    divSlot.style.display = 'flex';
+    divSlot.style.flexDirection = 'column';
+    divSlot.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';
+    const allFacetTags = Array.from(new Set(facetElements.map((el) => el.tagName.toLowerCase())));
+    const allFacetsInOrderInDOM = allFacetTags.length
+        ? root.querySelectorAll(allFacetTags.join(','))
+        : [];
+    allFacetsInOrderInDOM.forEach((facetElement, index) => {
+        const clone = facetElement.cloneNode(true);
+        clone.isCollapsed = index + 1 > collapseFacetsAfter;
+        clone.classList.remove(popoverClass);
+        clone.setAttribute(isRefineModalFacet, '');
+        divSlot.append(clone);
+    });
+    return divSlot;
+}

package/dist/atomic/components/components/common/search-box/submit-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const SearchSlimIcon = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"6.5\" stroke=\"currentColor\"/>\n<path d=\"M16 16L12 12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { renderButton } from '../button';

package/dist/atomic/components/components/common/search-box/text-area-clear-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const ClearSlim = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15 1.00012L1.00012 14.9999\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.999878 1L14.9999 15\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { renderButton } from '../button';

package/dist/atomic/components/components/common/smart-snippets/smart-snippet-feedback-banner.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { multiClassMap } from "../../../directives/multi-class-map";

package/dist/atomic/components/components/common/suggestions/query-suggestions.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html, nothing, render } from 'lit';
 import { encodeForDomAttribute } from '../../../utils/string-utils.js';
 export const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {

package/dist/atomic/components/components/common/suggestions/recent-queries.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { HighlightUtils } from '@coveo/headless';
 import { html, render } from 'lit';
 import { when } from 'lit/directives/when.js';

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

@@ -0,0 +1,211 @@
+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 { buildBreadcrumbManager as buildInsightBreadcrumbManager, buildQuerySummary as buildInsightQuerySummary, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderButton } from "../../common/button";
+import { getClonedFacetElements } from "../../common/refine-modal/cloned-facet-elements";
+import { renderRefineModal } from "../../common/refine-modal/modal";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindStateToController } from "../../../decorators/bind-state";
+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 { rectEquals } from "../../../utils/dom-utils";
+/**
+ * The `atomic-insight-refine-modal` component displays a modal with filters for refining search results.
+ *
+ * This component should not be used directly. It is internally used by the `atomic-insight-refine-toggle` component to display the refine modal.
+ *
+ * @part title - The title of the modal.
+ * @part close-button - The button in the header that closes the modal.
+ * @part close-icon - The icon of the close button.
+ * @part content - The wrapper around the content inside the body of the modal.
+ * @part section-title - The title for each section.
+ * @part section-filters-title - The title for the filters section.
+ * @part filter-section - The section containing facets and the "filters" title.
+ * @part filter-clear-all - The button that resets all actively selected facet values.
+ * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.
+ * @part footer-button - The button in the footer that closes the modal.
+ * @part footer-button-text - The text inside the button in the footer that closes the modal.
+ * @part footer-button-count - The count inside the button in the footer that closes the modal.
+ * @part footer-wrapper - The wrapper with a shadow or background color around the footer.
+ * @part footer - The footer of the modal.
+ * @part header-ruler - The horizontal ruler underneath the header.
+ * @part body-wrapper - The wrapper around the body.
+ * @part body - The body of the modal, between the header and the footer.
+ * @part header-wrapper - The wrapper around the header.
+ * @part header - The header of the modal, containing the title.
+ * @part container - The modal's outermost container.
+ */
+let AtomicInsightRefineModal = class AtomicInsightRefineModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         */
+        this.isOpen = false;
+        this.backdropStyleSheet = new CSSStyleSheet();
+    }
+    initialize() {
+        this.querySummary = buildInsightQuerySummary(this.bindings.engine);
+        this.breadcrumbManager = buildInsightBreadcrumbManager(this.bindings.engine);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = '';
+        this.shadowRoot?.adoptedStyleSheets.push(this.backdropStyleSheet);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animationFrameId) {
+            window.cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('interfaceDimensions')) {
+            this.updateBackdropStyles();
+        }
+    }
+    watchEnabled() {
+        if (this.isOpen) {
+            if (!this.querySelector('div[slot="facets"]')) {
+                this.appendChild(getClonedFacetElements(this.bindings.store.getFacetElements(), 0, this.bindings.interfaceElement));
+            }
+            this.onAnimationFrame();
+        }
+    }
+    onAnimationFrame() {
+        if (!this.isOpen) {
+            return;
+        }
+        if (this.dimensionChanged()) {
+            this.updateDimensions();
+        }
+        this.animationFrameId = window.requestAnimationFrame(() => this.onAnimationFrame());
+    }
+    dimensionChanged() {
+        if (!this.interfaceDimensions) {
+            return true;
+        }
+        return !rectEquals(this.interfaceDimensions, this.bindings.interfaceElement.getBoundingClientRect());
+    }
+    updateDimensions() {
+        this.interfaceDimensions =
+            this.bindings.interfaceElement.getBoundingClientRect();
+        this.updateBackdropStyles();
+    }
+    updateBackdropStyles() {
+        if (this.interfaceDimensions) {
+            this.backdropStyleSheet.replaceSync(`
+        atomic-modal::part(backdrop) {
+          top: ${this.interfaceDimensions.top}px;
+          left: ${this.interfaceDimensions.left}px;
+          width: ${this.interfaceDimensions.width}px;
+          height: ${this.interfaceDimensions.height}px;
+        }
+      `);
+        }
+        else {
+            this.backdropStyleSheet.replaceSync('');
+        }
+    }
+    renderHeader() {
+        if (!this.breadcrumbManagerState.hasBreadcrumbs) {
+            return nothing;
+        }
+        return html `
+      <div class="mb-3 flex w-full justify-between">
+        ${renderButton({
+            props: {
+                onClick: () => this.breadcrumbManager.deselectAll(),
+                style: 'text-primary',
+                text: this.bindings.i18n.t('clear-all-filters'),
+                class: 'px-2 py-1',
+            },
+        })(nothing)}
+      </div>
+    `;
+    }
+    renderBody() {
+        if (!this.bindings.store.getFacetElements().length) {
+            return nothing;
+        }
+        return html `
+      <aside
+        slot="body"
+        class="flex w-full flex-col"
+        aria-label=${this.bindings.i18n.t('refine-modal-content')}
+      >
+        ${this.renderHeader()}
+        <slot name="facets"></slot>
+      </aside>
+    `;
+    }
+    render() {
+        return html `
+      ${renderRefineModal({
+            props: {
+                i18n: this.bindings.i18n,
+                i18nFooterButtonTextKey: 'view-results',
+                host: this,
+                isOpen: this.isOpen,
+                onClose: () => {
+                    this.isOpen = false;
+                },
+                title: this.bindings.i18n.t('filters'),
+                numberOfItems: this.querySummaryState.total,
+                openButton: this.openButton,
+                scope: this.bindings.interfaceElement,
+            },
+        })(this.renderBody())}
+    `;
+    }
+};
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "error", void 0);
+__decorate([
+    bindStateToController('querySummary'),
+    state()
+], AtomicInsightRefineModal.prototype, "querySummaryState", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicInsightRefineModal.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "interfaceDimensions", void 0);
+__decorate([
+    property({ attribute: 'open-button', type: Object })
+], AtomicInsightRefineModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+        attribute: 'is-open',
+    })
+], AtomicInsightRefineModal.prototype, "isOpen", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicInsightRefineModal.prototype, "watchEnabled", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightRefineModal.prototype, "render", null);
+AtomicInsightRefineModal = __decorate([
+    customElement('atomic-insight-refine-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightRefineModal);
+export { AtomicInsightRefineModal };

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

@@ -15,6 +15,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 const FilterIcon = "<svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.87501 6.12835C8.86388 6.13837 8.8532 6.14889 8.84301 6.15987C8.62114 6.399 8.5 6.71441 8.5 7.03922L8.5 12.2222C8.5 12.3929 8.37108 12.4999 8.25 12.4999L5.74999 12.4999C5.62891 12.4999 5.49999 12.3929 5.5 12.2222V7.03921C5.5 6.7144 5.37885 6.39899 5.15698 6.15986C5.14679 6.14888 5.13612 6.13836 5.12499 6.12834L0.56512 2.02315C0.524585 1.9736 0.499999 1.9077 0.5 1.83654L0.500008 0.777776C0.500009 0.607068 0.628921 0.5 0.750007 0.5L13.25 0.500025C13.3711 0.500025 13.5 0.607095 13.5 0.777806L13.5 1.83656C13.5 1.90773 13.4754 1.97362 13.4349 2.02317L8.87501 6.12835Z\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { refineToggleGuard } from '../../common/refine-modal/guard';
+import "../atomic-insight-refine-modal/atomic-insight-refine-modal";
 /**
  * The `atomic-insight-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
  *

package/dist/atomic/components/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.js

@@ -0,0 +1,20 @@
+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, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * The `atomic-insight-result-action-bar` component displays an action bar for an Insight result and hosts action buttons such as share, open, or more options related to the result.
+ *
+ * @slot (default) - Action buttons to display in the action bar.
+ */
+let AtomicInsightResultActionBar = class AtomicInsightResultActionBar extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;atomic-insight-result-action-bar{display:flex;position:absolute;right:calc(var(--spacing, .25rem)*6);top:calc(var(--spacing, .25rem)*-4);visibility:hidden}atomic-insight-result-action-bar>:not(:last-child) button{border-bottom-right-radius:0;border-right-style:var(--tw-border-style);border-right-width:0;border-top-right-radius:0}atomic-insight-result-action-bar>:not(:last-child) button:hover{border-right-style:var(--tw-border-style);border-right-width:1px}atomic-insight-result-action-bar>:not(:first-child) button{border-bottom-left-radius:0;border-top-left-radius:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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}}}`) {
+};
+AtomicInsightResultActionBar = __decorate([
+    customElement('atomic-insight-result-action-bar')
+], AtomicInsightResultActionBar);
+export { AtomicInsightResultActionBar };