@coveo/atomic 3.61.4 → 3.62.0

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

@@ -174,6 +174,7 @@ class AtomicGeneratedAnswer extends external_lit_namespaceObject.LitElement {
                 'generated-answer-content-background': this.areFollowUpsEnabled,
                 'agent-scrollable': this.areFollowUpsEnabled
             })}
+                    tabindex=${this.areFollowUpsEnabled ? '0' : external_lit_namespaceObject.nothing}
                   >
                     <article>${this.renderAnswerContent()}</article>
                   </div>
@@ -198,6 +199,9 @@ class AtomicGeneratedAnswer extends external_lit_namespaceObject.LitElement {
       </div>
     `;
     }
+    get shouldAnnounceAnswerStatus() {
+        return !this.areFollowUpsEnabled;
+    }
     get hasNoAnswerGenerated() {
         return this.controller.hasNoAnswerGenerated;
     }
@@ -222,11 +226,13 @@ class AtomicGeneratedAnswer extends external_lit_namespaceObject.LitElement {
     async copyToClipboard(answer) {
         await this.controller.copyToClipboard(answer, ()=>{
             this.copied = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('generated-answer-copied');
             setTimeout(()=>{
                 this.copied = false;
             }, 2000);
         }, ()=>{
             this.copyError = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('failed-to-copy-generated-answer');
             setTimeout(()=>{
                 this.copyError = false;
             }, 2000);
@@ -421,7 +427,7 @@ class AtomicGeneratedAnswer extends external_lit_namespaceObject.LitElement {
     constructor(){
         super(), this.DEFAULT_COLLAPSED_HEIGHT = 16, this.MAX_COLLAPSED_HEIGHT = 32, this.MIN_COLLAPSED_HEIGHT = 9, this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS = [
             'filetype'
-        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'generated-answer-error', true), this.onGeneratedAnswerStateUpdate = ()=>{
+        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'generated-answer-copy', true), this.onGeneratedAnswerStateUpdate = ()=>{
             if (this.generatedAnswerState.isVisible !== this.controller.data.isVisible) {
                 this.controller.data = {
                     ...this.controller.data,
@@ -429,6 +435,7 @@ class AtomicGeneratedAnswer extends external_lit_namespaceObject.LitElement {
                 };
                 this.controller.writeStoredData(this.controller.data);
             }
+            if (!this.shouldAnnounceAnswerStatus) return;
             const status = this.controller.getGeneratedAnswerStatus();
             if (this.controller.isStatusAssertive()) {
                 this.ariaMessage.message = '';

package/dist/cjs/global/environment.cjs

@@ -32,7 +32,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.4",
+        version: "3.62.0",
         headlessVersion
     };
 }

package/dist/cjs/versions.cjs

@@ -32,7 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
     headlessVersion: ()=>package_json_namespaceObject.version
 });
 const package_json_namespaceObject = require("@coveo/headless/package.json");
-const atomicVersion = "3.61.4";
+const atomicVersion = "3.62.0";
 exports.atomicVersion = __webpack_exports__.atomicVersion;
 exports.headlessVersion = __webpack_exports__.headlessVersion;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/esm/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.js

@@ -18,13 +18,14 @@ import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { AriaLiveRegionController, FocusTargetController } from "../../../utils/accessibility-utils.js";
 import { getFieldValueCaption } from "../../../utils/field-utils.js";
+import { renderCategoryFacetActiveValue } from "../../common/facets/category-facet/active-value.js";
 import { renderCategoryFacetAllCategoryButton } from "../../common/facets/category-facet/all-categories-button.js";
 import { renderCategoryFacetChildrenAsTreeContainer } from "../../common/facets/category-facet/children-as-tree-container.js";
 import { renderCategoryFacetParentAsTreeContainer } from "../../common/facets/category-facet/parent-as-tree-container.js";
 import { renderCategoryFacetParentButton } from "../../common/facets/category-facet/parent-button.js";
-import { renderCategoryFacetParentValueLink } from "../../common/facets/category-facet/parent-value-link.js";
 import { renderCategoryFacetSearchResultsContainer } from "../../common/facets/category-facet/search-results-container.js";
 import { renderCategoryFacetSearchValue } from "../../common/facets/category-facet/search-value.js";
+import { renderCategoryFacetSelectedValue } from "../../common/facets/category-facet/selected-value.js";
 import { renderCategoryFacetTreeValueContainer } from "../../common/facets/category-facet/value-as-tree-container.js";
 import { renderCategoryFacetValueLink } from "../../common/facets/category-facet/value-link.js";
 import facet_common_tw_css from "../../common/facets/facet-common.tw.css.js";
@@ -93,6 +94,21 @@ class AtomicCommerceCategoryFacet extends LitElement {
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return nothing;
+        return renderCategoryFacetSelectedValue({
+            props: {
+                displayValue: getFieldValueCaption(this.facetState.field, activeValue.value, this.bindings.i18n),
+                label: this.displayName,
+                i18n: this.bindings.i18n,
+                onClearFilters: ()=>{
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                }
+            }
+        });
+    }
     renderValuesTree(parents, isRoot) {
         if (!this.hasParents) return this.renderChildren();
         if (isRoot) return renderCategoryFacetTreeValueContainer()(html`
@@ -137,16 +153,12 @@ class AtomicCommerceCategoryFacet extends LitElement {
         const activeParent = parents[0];
         const activeParentDisplayValue = getFieldValueCaption(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return html`
-      ${renderCategoryFacetParentValueLink({
+      ${renderCategoryFacetActiveValue({
             props: {
                 displayValue: activeParentDisplayValue,
                 numberOfResults: activeParent.numberOfResults,
                 i18n: this.bindings.i18n,
                 isLeafValue: activeParent.isLeafValue,
-                onClick: ()=>{
-                    this.focusTargets.activeValueFocus.focusAfterSearch();
-                    this.facet.deselectAll();
-                },
                 searchQuery: this.facetState.facetSearch.query,
                 setRef: (el)=>{
                     this.focusTargets.activeValueFocus.setTarget(el);
@@ -171,7 +183,6 @@ class AtomicCommerceCategoryFacet extends LitElement {
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -246,6 +257,7 @@ class AtomicCommerceCategoryFacet extends LitElement {
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${when(shouldDisplaySearchResults(facetSearch), ()=>html`
               ${when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {

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

@@ -4,7 +4,9 @@ import { customElement, property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import atomic_generated_answer_tw_css from "../../search/atomic-generated-answer/atomic-generated-answer.tw.css.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { AriaLiveRegionController } from "../../../utils/accessibility-utils.js";
 import "../atomic-agent-stream-of-thought/atomic-agent-stream-of-thought.js";
+import { getAnswerAnnouncement, isSettledAnswer } from "../generated-answer/answer-announcement.js";
 import { renderGeneratedContentContainer } from "../generated-answer/generated-content-container.js";
 import { renderFeedbackAndCopyButtons } from "../generated-answer/render-feedback-and-copy-buttons.js";
 import { renderSourceCitations } from "../generated-answer/source-citations.js";
@@ -58,6 +60,24 @@ class AtomicGeneratedAnswerContent extends LitElement {
       </div>
     `;
     }
+    updated() {
+        this.announceAnswerStatus();
+    }
+    announceAnswerStatus() {
+        if (!this.i18n || !this.generatedAnswer) return;
+        const { message, assertive } = getAnswerAnnouncement(this.generatedAnswer, this.i18n);
+        if (!this.hasObservedAnswer) {
+            this.hasObservedAnswer = true;
+            if (isSettledAnswer(this.generatedAnswer)) {
+                this.lastAnnouncedMessage = message;
+                return;
+            }
+        }
+        if (message === this.lastAnnouncedMessage) return;
+        this.lastAnnouncedMessage = message;
+        if (assertive) this.ariaErrorMessage.message = message;
+        else this.ariaMessage.message = message;
+    }
     renderFeedbackAndCopyButtons(answerId) {
         return html`
       <div class="mt-4" part="feedback-and-copy-buttons">
@@ -88,9 +108,11 @@ class AtomicGeneratedAnswerContent extends LitElement {
         try {
             await navigator.clipboard.writeText(answer);
             this.copyState = 'success';
+            this.ariaCopyMessage.message = this.i18n.t('generated-answer-copied');
             this.onCopyToClipboard(answerId);
         } catch (error) {
             this.copyState = 'error';
+            this.ariaCopyMessage.message = this.i18n.t('failed-to-copy-generated-answer');
             console.error(`Failed to copy to clipboard: ${error}`);
         }
         this.scheduleCopyReset();
@@ -127,7 +149,7 @@ class AtomicGeneratedAnswerContent extends LitElement {
     `;
     }
     constructor(...args){
-        super(...args), this.answerId = '', this.renderCitations = ()=>html``, this.onClickLike = ()=>{}, this.onClickDislike = ()=>{}, this.onCopyToClipboard = ()=>{}, this.copyState = 'idle';
+        super(...args), this.answerId = '', this.renderCitations = ()=>html``, this.onClickLike = ()=>{}, this.onClickDislike = ()=>{}, this.onCopyToClipboard = ()=>{}, this.copyState = 'idle', this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new AriaLiveRegionController(this, 'generated-answer-copy', true), this.hasObservedAnswer = false;
     }
 }
 AtomicGeneratedAnswerContent.styles = [

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

@@ -106,7 +106,7 @@ class AtomicGeneratedAnswerThread extends LitElement {
     `;
         return html`
       <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="row-span-2 flex flex-col items-center" aria-hidden="true">
           <div class="flex justify-center items-center text-base h-[1lh] my-1.5">
             <span class=${timelineDotClasses}></span>
           </div>

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

@@ -89,7 +89,7 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
         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="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="row-span-2 flex flex-col items-center" aria-hidden="true">
           <div class=${timelineDotToggleClasses}>
             ${when(this.showTimelineDot, ()=>html`
                 <span
@@ -123,8 +123,9 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
                 >${this.title}</span
               >`)}
         </div>
-        <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
+        <div class="min-w-0 pl-2 py-1.5">
           <div
+            id=${this.contentId}
             class="mb-2"
             ?hidden=${!this.isExpanded}
             aria-hidden=${this.isExpanded ? 'false' : 'true'}

package/dist/esm/components/common/facets/category-facet/active-value.js

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
+import { ref } from "lit/directives/ref.js";
+import { renderFacetValueLabelHighlight } from "../facet-value-label-highlight/facet-value-label-highlight.js";
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return html`${keyed(displayValue, html`<li class="contents">
+        <span
+          part="active-parent ${isLeafValue ? 'leaf-value' : 'node-value'}"
+          class="text-primary flex w-full items-center truncate px-2 py-2.5 text-left"
+          aria-current="true"
+          tabindex="-1"
+          ${ref(setRef)}
+        >
+          ${renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected: true
+            }
+        })}
+          <span part="value-count" class="value-count">
+            ${i18n.t('between-parentheses', {
+            text: count
+        })}
+          </span>
+        </span>
+        ${children}
+      </li>`)}`;
+    };
+export { renderCategoryFacetActiveValue };

package/dist/esm/components/common/facets/category-facet/selected-value.js

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import images_close from "../../../../images/close.js";
+import "../../atomic-icon/atomic-icon.js";
+import { renderButton } from "../../button.js";
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>html`<div part="selected-value" class="mt-3 flex items-center justify-between gap-2">
+    <span
+      part="selected-value-pill"
+      title=${displayValue}
+      class="bg-neutral-light truncate rounded-md px-2 py-1 text-sm"
+      >${displayValue}</span
+    >
+    ${renderButton({
+        props: {
+            part: 'selected-value-clear-button',
+            style: 'text-primary',
+            class: 'flex shrink-0 items-center p-1 text-sm',
+            ariaLabel: i18n.t('clear-filters-for-facet', {
+                count: 1,
+                label: i18n.t(label)
+            }),
+            onClick: onClearFilters
+        }
+    })(html`<atomic-icon
+          part="selected-value-clear-button-icon"
+          class="mr-1 h-2 w-2"
+          .icon=${images_close}
+        ></atomic-icon>
+        <span>${i18n.t('clear')}</span>`)}
+  </div>`;
+export { renderCategoryFacetSelectedValue };

package/dist/esm/components/common/facets/category-facet/value-link.js

@@ -1,12 +1,11 @@
 import { html } from "lit";
 import { renderFacetValueLabelHighlight } from "../facet-value-label-highlight/facet-value-label-highlight.js";
 import { renderFacetValueLink } from "../facet-value-link/facet-value-link.js";
-const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isParent, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
-        const partNames = [];
-        if (isParent) partNames.push('active-parent');
-        else partNames.push(`value-link${isSelected ? ' value-link-selected' : ''}`);
-        if (isLeafValue) partNames.push('leaf-value');
-        else partNames.push('node-value');
+const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const partNames = [
+            `value-link${isSelected ? ' value-link-selected' : ''}`,
+            isLeafValue ? 'leaf-value' : 'node-value'
+        ];
         return html`${renderFacetValueLink({
             props: {
                 displayValue,

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

@@ -0,0 +1,32 @@
+import { markdownToPlainText } from "./generated-content/markdown-utils.js";
+const SILENT = {
+    message: '',
+    assertive: false
+};
+const getAnswerAnnouncement = (answer, i18n)=>{
+    if (!answer) return SILENT;
+    if (answer.error) {
+        const errorMessageKey = answer.error.isSseTurnLimitReachedError?.() ? 'generated-answer-error-turn-limit-reached' : 'generated-answer-error-generic';
+        return {
+            message: i18n.t(errorMessageKey),
+            assertive: true
+        };
+    }
+    if (answer.cannotAnswer) return {
+        message: i18n.t('generated-answer-cannot-generate-answer'),
+        assertive: true
+    };
+    if (answer.isStreaming || answer.isLoading) return {
+        message: i18n.t('generating-answer'),
+        assertive: false
+    };
+    if (answer.answer?.trim()) return {
+        message: i18n.t('answer-generated', {
+            answer: markdownToPlainText(answer.answer)
+        }),
+        assertive: false
+    };
+    return SILENT;
+};
+const isSettledAnswer = (answer)=>Boolean(answer && !answer.isStreaming && !answer.isLoading && !answer.error && !answer.cannotAnswer && answer.answer?.trim());
+export { getAnswerAnnouncement, isSettledAnswer };

package/dist/esm/components/common/generated-answer/copy-button.js

@@ -12,6 +12,7 @@ const renderCopyButton = ({ props })=>{
     return renderButton({
         props: {
             title: props.title,
+            ariaLabel: props.title,
             part: 'copy-button',
             style: 'text-transparent',
             class: classes.join(' '),
@@ -19,7 +20,7 @@ const renderCopyButton = ({ props })=>{
         }
     })(html`
     <div class="icon-container text-neutral-dark">
-      <atomic-icon class="w-5" .icon=${copy}></atomic-icon>
+      <atomic-icon class="w-5" .icon=${copy} aria-hidden="true"></atomic-icon>
     </div>
   `);
 };

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

@@ -26,6 +26,7 @@ const renderFeedbackButton = ({ props })=>{
     return html`<button
     type="button"
     title=${props.title}
+    aria-label=${props.title}
     part="feedback-button"
     class=${classNames}
     aria-pressed=${props.active ? 'true' : 'false'}
@@ -34,7 +35,7 @@ const renderFeedbackButton = ({ props })=>{
         })}
     @click=${props.onClick}
   >
-    <atomic-icon class=${iconClassNames} .icon=${thumbs}></atomic-icon>
+    <atomic-icon class=${iconClassNames} .icon=${thumbs} aria-hidden="true"></atomic-icon>
   </button>`;
 };
 export { renderFeedbackButton };

package/dist/esm/components/common/generated-answer/generated-content/markdown-utils.js

@@ -36,8 +36,7 @@ const customRenderer = {
         return `<em part="answer-emphasis">${text}</em>`;
     },
     heading (text, level) {
-        const plainText = toInlinePlainText(text);
-        return `<div part="answer-heading-${level}" aria-label="${plainText}">${text}</div>`;
+        return `<div part="answer-heading-${level}" role="heading" aria-level="${level}">${text}</div>`;
     },
     html (text) {
         return escapeHtml(text);

package/dist/esm/components/common/generated-answer/generated-content-container.js

@@ -1,8 +1,13 @@
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { renderGeneratedMarkdownContent } from "./generated-content/generated-markdown-content.js";
 import { renderGeneratedTextContent } from "./generated-content/generated-text-content.js";
 const renderGeneratedContentContainer = ({ props })=>(children)=>html`
-    <div part="generated-container">
+    <div
+      part="generated-container"
+      id=${ifDefined(props.id)}
+      aria-busy=${props.isStreaming ? 'true' : 'false'}
+    >
       ${'text/markdown' === props.answerContentFormat ? renderGeneratedMarkdownContent({
             props: {
                 answer: props.answer,

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

@@ -6,6 +6,7 @@ import { renderShowButton } from "./show-button.js";
 import { renderSourceCitations } from "./source-citations.js";
 import { renderGeneratingAnswerLabel } from "./render-generating-answer-label.js";
 import "../atomic-icon/atomic-icon.js";
+const GENERATED_CONTENT_ID = 'generated-answer-content';
 const renderAnswerContent = ({ props })=>{
     const { i18n, generatedAnswer, collapsible, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onRetry, onClickShowButton } = props;
     const { answer, isStreaming, citations, answerContentFormat, expanded, error } = generatedAnswer;
@@ -23,7 +24,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             answer,
             answerContentFormat,
-            isStreaming: !!isStreaming
+            isStreaming: !!isStreaming,
+            id: collapsible ? GENERATED_CONTENT_ID : void 0
         }
     })(html`
               ${renderSourceCitations({
@@ -51,7 +53,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             i18n,
             onClick: onClickShowButton,
-            isCollapsed: !expanded
+            isCollapsed: !expanded,
+            controlsId: GENERATED_CONTENT_ID
         }
     }) : nothing}
               </div>

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

@@ -10,6 +10,7 @@ const renderShowButton = ({ props })=>html`${renderButton({
             part: 'answer-show-button',
             class: 'hidden items-center hover:bg-transparent',
             ariaExpanded: props.isCollapsed ? 'false' : 'true',
+            ariaControls: props.controlsId,
             onClick: props.onClick
         }
     })(html`

package/dist/esm/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.js

@@ -135,11 +135,13 @@ class AtomicInsightGeneratedAnswer extends LitElement {
     async copyToClipboard(answer) {
         await this.controller.copyToClipboard(answer, ()=>{
             this.copied = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('generated-answer-copied');
             setTimeout(()=>{
                 this.copied = false;
             }, 2000);
         }, ()=>{
             this.copyError = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('failed-to-copy-generated-answer');
             setTimeout(()=>{
                 this.copyError = false;
             }, 2000);
@@ -276,7 +278,7 @@ class AtomicInsightGeneratedAnswer extends LitElement {
     constructor(){
         super(), this.DEFAULT_COLLAPSED_HEIGHT = 16, this.MAX_COLLAPSED_HEIGHT = 32, this.MIN_COLLAPSED_HEIGHT = 9, this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS = [
             'filetype'
-        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.onGeneratedAnswerStateUpdate = ()=>{
+        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new AriaLiveRegionController(this, 'generated-answer-copy', true), this.onGeneratedAnswerStateUpdate = ()=>{
             if (this.generatedAnswerState.isVisible !== this.controller.data.isVisible) {
                 this.controller.data = {
                     ...this.controller.data,

package/dist/esm/components/search/atomic-category-facet/atomic-category-facet.js

@@ -4,13 +4,14 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 import { when } from "lit/directives/when.js";
+import { renderCategoryFacetActiveValue } from "../../common/facets/category-facet/active-value.js";
 import { renderCategoryFacetAllCategoryButton } from "../../common/facets/category-facet/all-categories-button.js";
 import { renderCategoryFacetChildrenAsTreeContainer } from "../../common/facets/category-facet/children-as-tree-container.js";
 import { renderCategoryFacetParentAsTreeContainer } from "../../common/facets/category-facet/parent-as-tree-container.js";
 import { renderCategoryFacetParentButton } from "../../common/facets/category-facet/parent-button.js";
-import { renderCategoryFacetParentValueLink } from "../../common/facets/category-facet/parent-value-link.js";
 import { renderCategoryFacetSearchResultsContainer } from "../../common/facets/category-facet/search-results-container.js";
 import { renderCategoryFacetSearchValue } from "../../common/facets/category-facet/search-value.js";
+import { renderCategoryFacetSelectedValue } from "../../common/facets/category-facet/selected-value.js";
 import { renderCategoryFacetTreeValueContainer } from "../../common/facets/category-facet/value-as-tree-container.js";
 import { renderCategoryFacetValueLink } from "../../common/facets/category-facet/value-link.js";
 import { parseDependsOn } from "../../common/facets/depends-on.js";
@@ -168,6 +169,21 @@ class AtomicCategoryFacet extends LitElement {
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry.at(-1);
+        if (!activeValue) return nothing;
+        return renderCategoryFacetSelectedValue({
+            props: {
+                displayValue: getFieldValueCaption(this.field, activeValue.value, this.bindings.i18n),
+                label: this.label,
+                i18n: this.bindings.i18n,
+                onClearFilters: ()=>{
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                }
+            }
+        });
+    }
     renderValuesTree(valuesAsTrees, isRoot) {
         if (!this.hasParents) return this.renderChildren();
         if (isRoot) return renderCategoryFacetTreeValueContainer()(html`
@@ -212,16 +228,12 @@ class AtomicCategoryFacet extends LitElement {
         const activeParent = valuesAsTrees[0];
         const activeParentDisplayValue = getFieldValueCaption(this.field, activeParent.value, this.bindings.i18n);
         return html`
-      ${renderCategoryFacetParentValueLink({
+      ${renderCategoryFacetActiveValue({
             props: {
                 displayValue: activeParentDisplayValue,
                 numberOfResults: activeParent.numberOfResults,
                 i18n: this.bindings.i18n,
                 isLeafValue: activeParent.isLeafValue,
-                onClick: ()=>{
-                    this.focusTargets.activeValueFocus.focusAfterSearch();
-                    this.facet.deselectAll();
-                },
                 searchQuery: this.facetState.facetSearch.query,
                 setRef: (el)=>{
                     this.focusTargets.activeValueFocus.setTarget(el);
@@ -244,7 +256,6 @@ class AtomicCategoryFacet extends LitElement {
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -326,7 +337,7 @@ class AtomicCategoryFacet extends LitElement {
         return renderFacetContainer()(html`
       ${this.renderHeader()}
       ${when(!this.isCollapsed, ()=>html`
-          ${this.renderSearchInput()}
+          ${this.renderSearchInput()} ${this.renderSelectedValue()}
           ${when(shouldDisplaySearchResults(facetSearch), ()=>html`
               ${when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {

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

@@ -132,6 +132,7 @@ class AtomicGeneratedAnswer extends LitElement {
                 'generated-answer-content-background': this.areFollowUpsEnabled,
                 'agent-scrollable': this.areFollowUpsEnabled
             })}
+                    tabindex=${this.areFollowUpsEnabled ? '0' : nothing}
                   >
                     <article>${this.renderAnswerContent()}</article>
                   </div>
@@ -156,6 +157,9 @@ class AtomicGeneratedAnswer extends LitElement {
       </div>
     `;
     }
+    get shouldAnnounceAnswerStatus() {
+        return !this.areFollowUpsEnabled;
+    }
     get hasNoAnswerGenerated() {
         return this.controller.hasNoAnswerGenerated;
     }
@@ -180,11 +184,13 @@ class AtomicGeneratedAnswer extends LitElement {
     async copyToClipboard(answer) {
         await this.controller.copyToClipboard(answer, ()=>{
             this.copied = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('generated-answer-copied');
             setTimeout(()=>{
                 this.copied = false;
             }, 2000);
         }, ()=>{
             this.copyError = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('failed-to-copy-generated-answer');
             setTimeout(()=>{
                 this.copyError = false;
             }, 2000);
@@ -379,7 +385,7 @@ class AtomicGeneratedAnswer extends LitElement {
     constructor(){
         super(), this.DEFAULT_COLLAPSED_HEIGHT = 16, this.MAX_COLLAPSED_HEIGHT = 32, this.MIN_COLLAPSED_HEIGHT = 9, this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS = [
             'filetype'
-        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.onGeneratedAnswerStateUpdate = ()=>{
+        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new AriaLiveRegionController(this, 'generated-answer-copy', true), this.onGeneratedAnswerStateUpdate = ()=>{
             if (this.generatedAnswerState.isVisible !== this.controller.data.isVisible) {
                 this.controller.data = {
                     ...this.controller.data,
@@ -387,6 +393,7 @@ class AtomicGeneratedAnswer extends LitElement {
                 };
                 this.controller.writeStoredData(this.controller.data);
             }
+            if (!this.shouldAnnounceAnswerStatus) return;
             const status = this.controller.getGeneratedAnswerStatus();
             if (this.controller.isStatusAssertive()) {
                 this.ariaMessage.message = '';

package/dist/esm/global/environment.js

@@ -3,7 +3,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.4",
+        version: "3.62.0",
         headlessVersion
     };
 }

package/dist/esm/versions.js

@@ -1,3 +1,3 @@
-const atomicVersion = "3.61.4";
+const atomicVersion = "3.62.0";
 export { version as headlessVersion } from "@coveo/headless/package.json";
 export { atomicVersion };

package/dist/types/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.d.ts

@@ -25,12 +25,17 @@ import type { InitializableComponent } from '../../../decorators/types';
  * @part search-result-path - The facet search result path.
  * @part search-highlight - The highlighted query inside the facet values.
  *
+ * @part selected-value - The row displaying the currently selected value and the button that clears the facet.
+ * @part selected-value-pill - The pill displaying the currently selected value.
+ * @part selected-value-clear-button - The button that clears the facet, displayed next to the selected value.
+ * @part selected-value-clear-button-icon - The icon of the button that clears the facet.
+ *
  * @part parents - The container surrounding the whole hierarchy of values.
  * @part sub-parents - The container surrounding a sub-hierarchy of values.
  * @part values - The container surrounding either the children of the active value or the values at the base.
  * @part all-categories-button - The "All categories" button displayed first within the parents.
  * @part parent-button - The clickable parent button displayed first within sub-parents.
- * @part active-parent - The clickable active parent displayed first within the last sub-parents.
+ * @part active-parent - The currently selected value, displayed last within the parents. Not interactive.
  * @part value-link - The clickable value displayed first within values.
  * @part back-arrow - The back arrow displayed before the clickable parents.
  * @part value-label - The facet value label within a value button.
@@ -77,6 +82,7 @@ export declare class AtomicCommerceCategoryFacet extends LitElement implements I
     shouldUpdate(changedProperties: Map<string | number | symbol, unknown>): boolean;
     private get hasParents();
     private renderHeader;
+    private renderSelectedValue;
     private renderValuesTree;
     private renderChild;
     private renderChildren;