@coveo/atomic 3.61.5 → 3.62.0

package/custom-elements.json

@@ -500,25 +500,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/dayjs-locales-data.ts",
+      "path": "src/directives/hierarchical-path.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/hierarchical-path.ts",
+      "path": "src/directives/localized-string.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/localized-string.ts",
+      "path": "src/directives/multi-class-map.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/directives/multi-class-map.ts",
+      "path": "src/generated/dayjs-locales-data.ts",
       "declarations": [],
       "exports": []
     },
@@ -1712,6 +1712,22 @@
               "description": "The highlighted query inside the facet values.",
               "name": "search-highlight"
             },
+            {
+              "description": "The row displaying the currently selected value and the button that clears the facet.",
+              "name": "selected-value"
+            },
+            {
+              "description": "The pill displaying the currently selected value.",
+              "name": "selected-value-pill"
+            },
+            {
+              "description": "The button that clears the facet, displayed next to the selected value.",
+              "name": "selected-value-clear-button"
+            },
+            {
+              "description": "The icon of the button that clears the facet.",
+              "name": "selected-value-clear-button-icon"
+            },
             {
               "description": "The container surrounding the whole hierarchy of values.",
               "name": "parents"
@@ -1733,7 +1749,7 @@
               "name": "parent-button"
             },
             {
-              "description": "The clickable active parent displayed first within the last sub-parents.",
+              "description": "The currently selected value, displayed last within the parents. Not interactive.",
               "name": "active-parent"
             },
             {
@@ -1923,6 +1939,11 @@
               "name": "renderHeader",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderSelectedValue",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderValuesTree",
@@ -28106,6 +28127,22 @@
               "description": "The highlighted query inside the facet values.",
               "name": "search-highlight"
             },
+            {
+              "description": "The row displaying the currently selected value and the button that clears the facet.",
+              "name": "selected-value"
+            },
+            {
+              "description": "The pill displaying the currently selected value.",
+              "name": "selected-value-pill"
+            },
+            {
+              "description": "The button that clears the facet, displayed next to the selected value.",
+              "name": "selected-value-clear-button"
+            },
+            {
+              "description": "The icon of the button that clears the facet.",
+              "name": "selected-value-clear-button-icon"
+            },
             {
               "description": "The container surrounding the whole hierarchy of values.",
               "name": "parents"
@@ -28119,7 +28156,7 @@
               "name": "values"
             },
             {
-              "description": "The \"View all\" button displayed first within the parents.",
+              "description": "The \"All Categories\" button displayed first within the parents.",
               "name": "all-categories-button"
             },
             {
@@ -28127,7 +28164,7 @@
               "name": "parent-button"
             },
             {
-              "description": "The clickable active parent displayed first within the last sub-parents.",
+              "description": "The currently selected value, displayed last within the parents. Not interactive.",
               "name": "active-parent"
             },
             {
@@ -28529,6 +28566,11 @@
               "name": "renderSearchInput",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderSelectedValue",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderValuesTree",
@@ -48874,6 +48916,12 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/common/facets/category-facet/active-value.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/common/facets/category-facet/all-categories-button.ts",
@@ -48906,19 +48954,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/parent-value-link.ts",
+      "path": "src/components/common/facets/category-facet/search-results-container.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/search-results-container.ts",
+      "path": "src/components/common/facets/category-facet/search-value.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/common/facets/category-facet/search-value.ts",
+      "path": "src/components/common/facets/category-facet/selected-value.ts",
       "declarations": [],
       "exports": []
     },

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

@@ -59,13 +59,14 @@ const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard
 const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
 const accessibility_utils_cjs_namespaceObject = require("../../../utils/accessibility-utils.cjs");
 const field_utils_cjs_namespaceObject = require("../../../utils/field-utils.cjs");
+const active_value_cjs_namespaceObject = require("../../common/facets/category-facet/active-value.cjs");
 const all_categories_button_cjs_namespaceObject = require("../../common/facets/category-facet/all-categories-button.cjs");
 const children_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/children-as-tree-container.cjs");
 const parent_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/parent-as-tree-container.cjs");
 const parent_button_cjs_namespaceObject = require("../../common/facets/category-facet/parent-button.cjs");
-const parent_value_link_cjs_namespaceObject = require("../../common/facets/category-facet/parent-value-link.cjs");
 const search_results_container_cjs_namespaceObject = require("../../common/facets/category-facet/search-results-container.cjs");
 const search_value_cjs_namespaceObject = require("../../common/facets/category-facet/search-value.cjs");
+const selected_value_cjs_namespaceObject = require("../../common/facets/category-facet/selected-value.cjs");
 const value_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/value-as-tree-container.cjs");
 const value_link_cjs_namespaceObject = require("../../common/facets/category-facet/value-link.cjs");
 const facet_common_tw_css_cjs_namespaceObject = require("../../common/facets/facet-common.tw.css.cjs");
@@ -136,6 +137,21 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry?.at(-1);
+        if (!activeValue) return external_lit_namespaceObject.nothing;
+        return (0, selected_value_cjs_namespaceObject.renderCategoryFacetSelectedValue)({
+            props: {
+                displayValue: (0, field_utils_cjs_namespaceObject.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 (0, value_as_tree_container_cjs_namespaceObject.renderCategoryFacetTreeValueContainer)()((0, external_lit_namespaceObject.html)`
@@ -180,16 +196,12 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
         const activeParent = parents[0];
         const activeParentDisplayValue = (0, field_utils_cjs_namespaceObject.getFieldValueCaption)(this.facetState?.field, activeParent.value, this.bindings.i18n);
         return (0, external_lit_namespaceObject.html)`
-      ${(0, parent_value_link_cjs_namespaceObject.renderCategoryFacetParentValueLink)({
+      ${(0, active_value_cjs_namespaceObject.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);
@@ -214,7 +226,6 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -289,6 +300,7 @@ class AtomicCommerceCategoryFacet extends external_lit_namespaceObject.LitElemen
                     onClear: ()=>this.facet.facetSearch.clear()
                 }
             })}
+          ${this.renderSelectedValue()}
           ${(0, when_js_namespaceObject.when)((0, facet_search_utils_cjs_namespaceObject.shouldDisplaySearchResults)(facetSearch), ()=>(0, external_lit_namespaceObject.html)`
               ${(0, when_js_namespaceObject.when)(facetSearch.values.length > 0, ()=>(0, facet_values_group_cjs_namespaceObject.renderFacetValuesGroup)({
                         props: {

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

@@ -0,0 +1,69 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    renderCategoryFacetActiveValue: ()=>renderCategoryFacetActiveValue
+});
+const external_lit_namespaceObject = require("lit");
+const keyed_js_namespaceObject = require("lit/directives/keyed.js");
+const ref_js_namespaceObject = require("lit/directives/ref.js");
+const facet_value_label_highlight_cjs_namespaceObject = require("../facet-value-label-highlight/facet-value-label-highlight.cjs");
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return (0, external_lit_namespaceObject.html)`${(0, keyed_js_namespaceObject.keyed)(displayValue, (0, external_lit_namespaceObject.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"
+          ${(0, ref_js_namespaceObject.ref)(setRef)}
+        >
+          ${(0, facet_value_label_highlight_cjs_namespaceObject.renderFacetValueLabelHighlight)({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected: true
+            }
+        })}
+          <span part="value-count" class="value-count">
+            ${i18n.t('between-parentheses', {
+            text: count
+        })}
+          </span>
+        </span>
+        ${children}
+      </li>`)}`;
+    };
+exports.renderCategoryFacetActiveValue = __webpack_exports__.renderCategoryFacetActiveValue;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "renderCategoryFacetActiveValue"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,78 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    renderCategoryFacetSelectedValue: ()=>renderCategoryFacetSelectedValue
+});
+const external_lit_namespaceObject = require("lit");
+const close_cjs_namespaceObject = require("../../../../images/close.cjs");
+var close_cjs_default = /*#__PURE__*/ __webpack_require__.n(close_cjs_namespaceObject);
+require("../../atomic-icon/atomic-icon.cjs");
+const external_button_cjs_namespaceObject = require("../../button.cjs");
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>(0, external_lit_namespaceObject.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
+    >
+    ${(0, external_button_cjs_namespaceObject.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
+        }
+    })((0, external_lit_namespaceObject.html)`<atomic-icon
+          part="selected-value-clear-button-icon"
+          class="mr-1 h-2 w-2"
+          .icon=${close_cjs_default()}
+        ></atomic-icon>
+        <span>${i18n.t('clear')}</span>`)}
+  </div>`;
+exports.renderCategoryFacetSelectedValue = __webpack_exports__.renderCategoryFacetSelectedValue;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "renderCategoryFacetSelectedValue"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -33,12 +33,11 @@ __webpack_require__.d(__webpack_exports__, {
 const external_lit_namespaceObject = require("lit");
 const facet_value_label_highlight_cjs_namespaceObject = require("../facet-value-label-highlight/facet-value-label-highlight.cjs");
 const facet_value_link_cjs_namespaceObject = require("../facet-value-link/facet-value-link.cjs");
-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 (0, external_lit_namespaceObject.html)`${(0, facet_value_link_cjs_namespaceObject.renderFacetValueLink)({
             props: {
                 displayValue,

package/dist/cjs/components/search/atomic-category-facet/atomic-category-facet.cjs

@@ -45,13 +45,14 @@ const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
 const map_js_namespaceObject = require("lit/directives/map.js");
 const when_js_namespaceObject = require("lit/directives/when.js");
+const active_value_cjs_namespaceObject = require("../../common/facets/category-facet/active-value.cjs");
 const all_categories_button_cjs_namespaceObject = require("../../common/facets/category-facet/all-categories-button.cjs");
 const children_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/children-as-tree-container.cjs");
 const parent_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/parent-as-tree-container.cjs");
 const parent_button_cjs_namespaceObject = require("../../common/facets/category-facet/parent-button.cjs");
-const parent_value_link_cjs_namespaceObject = require("../../common/facets/category-facet/parent-value-link.cjs");
 const search_results_container_cjs_namespaceObject = require("../../common/facets/category-facet/search-results-container.cjs");
 const search_value_cjs_namespaceObject = require("../../common/facets/category-facet/search-value.cjs");
+const selected_value_cjs_namespaceObject = require("../../common/facets/category-facet/selected-value.cjs");
 const value_as_tree_container_cjs_namespaceObject = require("../../common/facets/category-facet/value-as-tree-container.cjs");
 const value_link_cjs_namespaceObject = require("../../common/facets/category-facet/value-link.cjs");
 const depends_on_cjs_namespaceObject = require("../../common/facets/depends-on.cjs");
@@ -211,6 +212,21 @@ class AtomicCategoryFacet extends external_lit_namespaceObject.LitElement {
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry.at(-1);
+        if (!activeValue) return external_lit_namespaceObject.nothing;
+        return (0, selected_value_cjs_namespaceObject.renderCategoryFacetSelectedValue)({
+            props: {
+                displayValue: (0, field_utils_cjs_namespaceObject.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 (0, value_as_tree_container_cjs_namespaceObject.renderCategoryFacetTreeValueContainer)()((0, external_lit_namespaceObject.html)`
@@ -255,16 +271,12 @@ class AtomicCategoryFacet extends external_lit_namespaceObject.LitElement {
         const activeParent = valuesAsTrees[0];
         const activeParentDisplayValue = (0, field_utils_cjs_namespaceObject.getFieldValueCaption)(this.field, activeParent.value, this.bindings.i18n);
         return (0, external_lit_namespaceObject.html)`
-      ${(0, parent_value_link_cjs_namespaceObject.renderCategoryFacetParentValueLink)({
+      ${(0, active_value_cjs_namespaceObject.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);
@@ -287,7 +299,6 @@ class AtomicCategoryFacet extends external_lit_namespaceObject.LitElement {
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -369,7 +380,7 @@ class AtomicCategoryFacet extends external_lit_namespaceObject.LitElement {
         return (0, facet_container_cjs_namespaceObject.renderFacetContainer)()((0, external_lit_namespaceObject.html)`
       ${this.renderHeader()}
       ${(0, when_js_namespaceObject.when)(!this.isCollapsed, ()=>(0, external_lit_namespaceObject.html)`
-          ${this.renderSearchInput()}
+          ${this.renderSearchInput()} ${this.renderSelectedValue()}
           ${(0, when_js_namespaceObject.when)((0, facet_search_utils_cjs_namespaceObject.shouldDisplaySearchResults)(facetSearch), ()=>(0, external_lit_namespaceObject.html)`
               ${(0, when_js_namespaceObject.when)(facetSearch.values.length > 0, ()=>(0, facet_values_group_cjs_namespaceObject.renderFacetValuesGroup)({
                         props: {

package/dist/cjs/global/environment.cjs

@@ -32,7 +32,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.5",
+        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.5";
+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/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/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/global/environment.js

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

package/dist/esm/versions.js

@@ -1,3 +1,3 @@
-const atomicVersion = "3.61.5";
+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;

package/dist/types/components/common/facets/category-facet/active-value.d.ts

@@ -0,0 +1,19 @@
+import type { i18n } from 'i18next';
+import type { FunctionalComponentWithChildren } from '../../../../utils/functional-component-utils';
+interface CategoryFacetActiveValueProps {
+    displayValue: string;
+    numberOfResults: number;
+    i18n: i18n;
+    searchQuery: string;
+    isLeafValue: boolean;
+    setRef: (el?: Element) => void;
+}
+/**
+ * Renders the deepest selected value of a category facet.
+ *
+ * The value is not interactive: it represents the filter that is already applied, and it is
+ * removed from the facet's clear button rather than by clicking it again. `tabindex="-1"`
+ * keeps it a valid target for the focus moved here once the query resolves.
+ */
+export declare const renderCategoryFacetActiveValue: FunctionalComponentWithChildren<CategoryFacetActiveValueProps>;
+export type { CategoryFacetActiveValueProps };

package/dist/types/components/common/facets/category-facet/selected-value.d.ts

@@ -0,0 +1,22 @@
+import type { i18n } from 'i18next';
+import type { FunctionalComponent } from '../../../../utils/functional-component-utils';
+import '../../atomic-icon/atomic-icon';
+interface CategoryFacetSelectedValueProps {
+    /**
+     * The localized label of the deepest selected value.
+     */
+    displayValue: string;
+    /**
+     * The label of the facet, used to describe the clear button. It is localized by the component.
+     */
+    label: string;
+    i18n: i18n;
+    onClearFilters(): void;
+}
+/**
+ * Renders the deepest selected value of a category facet as a pill, next to a button that
+ * clears the facet. This is what removes the filter, since the selected value itself is not
+ * interactive once applied.
+ */
+export declare const renderCategoryFacetSelectedValue: FunctionalComponent<CategoryFacetSelectedValueProps>;
+export type { CategoryFacetSelectedValueProps };

package/dist/types/components/common/facets/category-facet/value-link.d.ts

@@ -5,7 +5,6 @@ export interface CategoryFacetValueLinkProps {
     numberOfResults: number;
     i18n: i18n;
     onClick: () => void;
-    isParent: boolean;
     isSelected: boolean;
     searchQuery: string;
     isLeafValue: boolean;

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

@@ -25,12 +25,17 @@ import type { InitializableComponent } from '../../../decorators/types';
  * @part search-result-path - The 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 "View all" button displayed first within the parents.
+ * @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.
@@ -176,6 +181,7 @@ export declare class AtomicCategoryFacet extends LitElement implements Initializ
     private initializeDependenciesManager;
     private renderHeader;
     private renderSearchInput;
+    private renderSelectedValue;
     private renderValuesTree;
     private renderChild;
     private renderChildren;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveo/atomic",
-  "version": "3.61.5",
+  "version": "3.62.0",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "license": "Apache-2.0",
@@ -55,9 +55,9 @@
     "./custom-elements-manifest": "./custom-elements.json"
   },
   "dependencies": {
-    "@coveo/atomic-legacy": "0.1.6",
+    "@coveo/atomic-legacy": "0.1.7",
     "@coveo/bueno": "1.1.9",
-    "@coveo/headless": "3.57.1",
+    "@coveo/headless": "3.57.2",
     "@coveo/relay-event-types": "20.7.1",
     "@lit/context": "1.1.6",
     "@open-wc/lit-helpers": "0.7.0",
@@ -119,7 +119,7 @@
   },
   "peerDependencies": {
     "@coveo/bueno": "^1.1.9",
-    "@coveo/headless": "^3.57.1",
+    "@coveo/headless": "^3.57.2",
     "typescript": ">=5.0.0"
   },
   "peerDependenciesMeta": {

package/dist/cjs/components/common/facets/category-facet/parent-value-link.cjs

@@ -1,47 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, getters, values)=>{
-        var define = (defs, kind)=>{
-            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-                enumerable: true,
-                [kind]: defs[key]
-            });
-        };
-        define(getters, "get");
-        define(values, "value");
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    renderCategoryFacetParentValueLink: ()=>renderCategoryFacetParentValueLink
-});
-const external_value_link_cjs_namespaceObject = require("./value-link.cjs");
-const renderCategoryFacetParentValueLink = ({ props })=>(0, external_value_link_cjs_namespaceObject.renderCategoryFacetValueLink)({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-exports.renderCategoryFacetParentValueLink = __webpack_exports__.renderCategoryFacetParentValueLink;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "renderCategoryFacetParentValueLink"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

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

@@ -1,9 +0,0 @@
-import { renderCategoryFacetValueLink } from "./value-link.js";
-const renderCategoryFacetParentValueLink = ({ props })=>renderCategoryFacetValueLink({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-export { renderCategoryFacetParentValueLink };

package/dist/types/components/common/facets/category-facet/parent-value-link.d.ts

@@ -1,6 +0,0 @@
-import type { FunctionalComponentWithChildren } from '../../../../utils/functional-component-utils';
-import { type CategoryFacetValueLinkProps } from './value-link';
-interface CategoryFacetParentValueLinkProps extends Omit<CategoryFacetValueLinkProps, 'isParent' | 'isSelected'> {
-}
-export declare const renderCategoryFacetParentValueLink: FunctionalComponentWithChildren<CategoryFacetParentValueLinkProps>;
-export type { CategoryFacetParentValueLinkProps };