@coveo/atomic 3.34.0-pre.c894ef6d76 → 3.34.0-pre.d1623a758e

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

@@ -8,6 +8,15 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildContext, buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { renderBreadcrumbButton } from "../../common/breadbox/breadcrumb-button";
+import { renderBreadcrumbClearAll } from "../../common/breadbox/breadcrumb-clear-all";
+import { renderBreadcrumbContainer } from "../../common/breadbox/breadcrumb-container";
+import { renderBreadcrumbContent } from "../../common/breadbox/breadcrumb-content";
+import { renderBreadcrumbShowLess } from "../../common/breadbox/breadcrumb-show-less";
+import { renderBreadcrumbShowMore } from "../../common/breadbox/breadcrumb-show-more";
+import { formatHumanReadable } from "../../common/facets/numeric-facet/formatter";
+import { defaultCurrencyFormatter, defaultNumberFormatter, } from "../../common/formats/format-common";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -16,14 +25,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { parseDate } from "../../../utils/date-utils";
 import { getFieldValueCaption } from "../../../utils/field-utils";
-import { renderBreadcrumbButton } from '../../common/breadbox/breadcrumb-button';
-import { renderBreadcrumbClearAll } from '../../common/breadbox/breadcrumb-clear-all';
-import { renderBreadcrumbContainer } from '../../common/breadbox/breadcrumb-container';
-import { renderBreadcrumbContent } from '../../common/breadbox/breadcrumb-content';
-import { renderBreadcrumbShowLess } from '../../common/breadbox/breadcrumb-show-less';
-import { renderBreadcrumbShowMore } from '../../common/breadbox/breadcrumb-show-more';
-import { formatHumanReadable } from '../../common/facets/numeric-facet/formatter';
-import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
 import styles from './atomic-commerce-breadbox.tw.css';
 /**
  * The `atomic-commerce-breadbox` component creates breadcrumbs that display a summary of the currently active facet values.
@@ -42,7 +43,7 @@ import styles from './atomic-commerce-breadbox.tw.css';
  */
 let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.lastRemovedBreadcrumbIndex = 0;
         this.numberOfBreadcrumbs = 0;
         this.numberOfCollapsedBreadcrumbs = 0;
@@ -96,9 +97,15 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
                 }
             }
         };
+        new ValidatePropsController(this, () => ({ pathLimit: this.pathLimit }), new Schema({
+            pathLimit: new NumberValue({
+                default: 3,
+                min: 1,
+                required: false,
+            }),
+        }));
     }
     initialize() {
-        this.validateProps();
         if (this.bindings.interfaceElement.type === 'product-listing') {
             this.searchOrListing = buildProductListing(this.bindings.engine);
         }
@@ -115,31 +122,9 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
         this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
     }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('pathLimit')) {
-            this.validateProps();
-        }
-    }
     updated() {
         this.adaptBreadcrumbs();
     }
-    validateProps() {
-        try {
-            new Schema({
-                pathLimit: new NumberValue({
-                    default: 3,
-                    min: 1,
-                    required: false,
-                }),
-            }).validate({
-                pathLimit: this.pathLimit,
-            });
-        }
-        catch (error) {
-            this.error = error;
-            return;
-        }
-    }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();
     }

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

@@ -0,0 +1,28 @@
+import { buildResultTemplatesManager, } from '@coveo/headless';
+import { TemplateProvider, } from '../template-provider/template-provider';
+export class ItemTemplateProvider extends TemplateProvider {
+    constructor(props, gridCellLinkTarget) {
+        super(props, () => buildResultTemplatesManager(props.bindings.engine));
+        this.gridCellLinkTarget = gridCellLinkTarget;
+    }
+    // TODO: Add JSX support for default template
+    makeDefaultTemplate() {
+        const content = document.createDocumentFragment();
+        const linkEl = document.createElement('atomic-result-link');
+        content.appendChild(linkEl);
+        const linkContent = document.createDocumentFragment();
+        const linkMarkup = `
+      <atomic-result-link>
+      ${this.gridCellLinkTarget ? `<a slot="attributes" target="${this.gridCellLinkTarget}"></a>` : ''}
+      </atomic-result-link>
+    `;
+        const linkTemplate = document.createElement('template');
+        linkTemplate.innerHTML = linkMarkup.trim();
+        linkContent.appendChild(linkTemplate.content);
+        return {
+            content,
+            linkContent,
+            conditions: [],
+        };
+    }
+}

package/dist/atomic/components/components/common/validate-props-controller/validate-props-controller.js

@@ -0,0 +1,50 @@
+import { deepEqual } from "../../../utils/compare-utils";
+/**
+ * A reactive controller that validates the props of a Lit component against a
+ * provided Bueno schema.
+ *
+ * It validates the props when the host is connected to the DOM and whenever
+ * the host updates, revalidating only if the props have changed since the last
+ * validation.
+ *
+ * If validation fails, the controller sets the `error` property on the host.
+ */
+export class ValidatePropsController {
+    /**
+     * Creates a `ValidatePropsController`.
+     *
+     * @param host The host element.
+     * @param getProps A function that returns the current props to validate.
+     * @param schema The Bueno schema to validate the props against.
+     */
+    constructor(host, getProps, schema) {
+        this.host = host;
+        this.getProps = getProps;
+        this.schema = schema;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.currentProps = this.getProps();
+        this._validateProps();
+    }
+    hostUpdate() {
+        this.currentProps = this.getProps();
+        if (deepEqual(this.currentProps, this.previousProps)) {
+            return;
+        }
+        // @ts-expect-error: we need to clear the error.
+        this.host.error = undefined;
+        this._validateProps();
+    }
+    _validateProps() {
+        try {
+            this.schema.validate(this.currentProps);
+        }
+        catch (error) {
+            this.host.error = error;
+        }
+        finally {
+            this.previousProps = this.currentProps;
+        }
+    }
+}

package/dist/atomic/components/components/search/atomic-relevance-inspector/atomic-relevance-inspector.js

@@ -0,0 +1,100 @@
+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 { getOrganizationEndpoint } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderButton } from "../../common/button";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import "../../common/atomic-modal/atomic-modal";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+/**
+ * The `atomic-relevance-inspector` component is used internally to offer insight on search page relevance, as well as information to help troubleshoot issues during development.
+ *
+ * @internal
+ */
+let AtomicRelevanceInspector = class AtomicRelevanceInspector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.initialize = () => {
+            this.bindings.interfaceElement.addEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+        };
+        this.handleRelevanceInspectorDoubleClick = (e) => {
+            if (e.altKey) {
+                this.open = !this.open;
+            }
+        };
+    }
+    disconnectedCallback() {
+        this.bindings.interfaceElement.removeEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+    }
+    render() {
+        return html `
+      <atomic-modal
+        .isOpen=${this.open}
+        @close=${() => this.handleCloseRelevanceInspector()}
+        exportparts="footer"
+      >
+        <p slot="header">Open the relevance inspector</p>
+        <p slot="body">
+          The Relevance Inspector will open in the Coveo Administration Console.
+        </p>
+        <div slot="footer" class="flex w-full items-center justify-end">
+          ${renderButton({
+            props: {
+                style: 'outline-primary',
+                class: 'mr-2 p-2',
+                onClick: () => this.handleCloseRelevanceInspector(),
+                text: 'Ignore',
+            },
+        })(nothing)}
+          ${renderButton({
+            props: {
+                style: 'primary',
+                class: 'p-2',
+                onClick: () => {
+                    window.open(this.adminHref, '_blank');
+                    this.handleCloseRelevanceInspector();
+                },
+                text: 'Open',
+            },
+        })(nothing)}
+        </div>
+      </atomic-modal>
+    `;
+    }
+    handleCloseRelevanceInspector() {
+        this.open = false;
+    }
+    get adminHref() {
+        const { organizationId, environment } = this.bindings.engine.state.configuration;
+        const admin = getOrganizationEndpoint(organizationId, environment, 'admin');
+        const { searchResponseId } = this.bindings.engine.state.search;
+        return `${admin}/admin/#/${organizationId}/search/relevanceInspector/${searchResponseId}`;
+    }
+};
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "open", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicRelevanceInspector.prototype, "render", null);
+AtomicRelevanceInspector = __decorate([
+    customElement('atomic-relevance-inspector'),
+    bindings(),
+    withTailwindStyles
+], AtomicRelevanceInspector);
+export { AtomicRelevanceInspector };

package/dist/atomic/components/{atomic-search-box-instant-results.js → components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.js}

@@ -1,37 +1,34 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { buildInteractiveInstantResult, buildInstantResults } from '@coveo/headless';
-import { e as encodeForDomAttribute } from './string-utils.js';
-import { I as ItemTemplateProvider } from './item-template-provider.js';
-import { g as getClassNameForButtonStyle } from './stencil-button-style.js';
-import { d as dispatchSearchBoxSuggestionsEvent } from './suggestions-events.js';
-import { d as defineCustomElement$2 } from './atomic-result2.js';
-
-const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
-    return {
-        ariaLabel: i18n.t('instant-results-suggestion-label', {
-            title: itemTitle,
-            interpolation: { escapeValue: false },
-        }),
-        key: `instant-result-${encodeForDomAttribute(itemUniqueId)}`,
-        part: 'instant-results-item',
-    };
+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;
 };
-const getPartialInstantItemShowAllElement = (i18n) => {
-    return {
-        key: 'instant-results-show-all-button',
-        part: 'instant-results-show-all',
-        ariaLabel: i18n.t('show-all-results'),
-    };
-};
-const InstantItemShowAllButton = ({ i18n }) => {
-    return (h("div", { part: "instant-results-show-all-button", class: getClassNameForButtonStyle('text-primary') }, i18n.t('show-all-results')));
-};
-
-const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBoxInstantResults extends HTMLElement {
+import { buildInstantResults, buildInteractiveInstantResult, } from '@coveo/headless';
+import { html, LitElement, nothing, render } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { getPartialInstantItemElement, getPartialInstantItemShowAllElement, renderInstantItemShowAllButton, } from "../../common/suggestions/instant-item";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { encodeForDomAttribute } from "../../../utils/string-utils";
+import { ItemTemplateProvider } from '../../common/item-list/item-template-provider';
+/**
+ * The `atomic-search-box-instant-results` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.
+ *
+ * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).
+ *
+ * This component is not supported on mobile.
+ *
+ * @part instant-results-show-all-button - The 'See all results' button.
+ * @part instant-results-item - The individual instant result items.
+ *
+ * @slot default - The default slot where the instant results are rendered.
+ */
+let AtomicSearchBoxInstantResults = class AtomicSearchBoxInstantResults extends LitElement {
     constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+        super(...arguments);
         this.results = [];
         this.display = 'list';
         this.templateHasError = false;
@@ -47,12 +44,6 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
          * The expected size of the image displayed in the results.
          */
         this.imageSize = 'icon';
-        this.error = undefined;
-        this.templateHasError = false;
-        this.maxResultsPerQuery = 4;
-        this.density = 'normal';
-        this.imageSize = 'icon';
-        this.ariaLabelGenerator = undefined;
     }
     /**
      * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
@@ -65,12 +56,13 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
     async setRenderFunction(resultRenderingFunction) {
         this.itemRenderingFunction = resultRenderingFunction;
     }
-    componentWillLoad() {
+    connectedCallback() {
+        super.connectedCallback();
         try {
             dispatchSearchBoxSuggestionsEvent((bindings) => {
                 this.bindings = bindings;
                 return this.initialize();
-            }, this.host, ['atomic-search-box']);
+            }, this, ['atomic-search-box']);
         }
         catch (error) {
             this.error = error;
@@ -86,7 +78,6 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         hasModifier && setTarget('_blank');
         el.click();
         hasModifier && setTarget(initialTarget || '');
-        return true;
     }
     renderItems() {
         if (!this.bindings.suggestedQuery() || this.bindings.store.isMobile()) {
@@ -96,12 +87,27 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             ? this.instantResults.state.results
             : this.results;
         const elements = results.map((result) => {
-            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-results-suggestion-label', this.ariaLabelGenerator?.(this.bindings, result) || result.title, result.uniqueId);
+            const key = `instant-result-${encodeForDomAttribute(result.uniqueId)}`;
+            const template = html `${keyed(key, html `<atomic-result
+            part="outline"
+            .result=${result}
+            .interactiveResult=${buildInteractiveInstantResult(this.bindings.engine, {
+                options: { result },
+            })}
+            .display=${this.display}
+            .density=${this.density}
+            .imageSize=${this.imageSize}
+            .content=${this.itemTemplateProvider.getTemplateContent(result)}
+            .stopPropagation=${false}
+            .renderingFunction=${this.itemRenderingFunction}
+          ></atomic-result>`)}`;
+            const container = document.createElement('div');
+            render(template, container);
+            const resultElement = container.firstElementChild;
             return {
                 ...partialItem,
-                content: (h("atomic-result", { key: `instant-result-${encodeForDomAttribute(result.uniqueId)}`, part: "outline", result: result, interactiveResult: buildInteractiveInstantResult(this.bindings.engine, {
-                        options: { result },
-                    }), display: this.display, density: this.density, imageSize: this.imageSize, content: this.itemTemplateProvider.getTemplateContent(result), stopPropagation: false, renderingFunction: this.itemRenderingFunction })),
+                content: resultElement,
                 onSelect: (e) => {
                     const link = this.getLink(e.target);
                     if (!link) {
@@ -112,10 +118,13 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             };
         });
         if (elements.length) {
-            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n, 'show-all-results');
             elements.push({
                 ...partialItem,
-                content: h(InstantItemShowAllButton, { i18n: this.bindings.i18n }),
+                content: renderInstantItemShowAllButton({
+                    i18n: this.bindings.i18n,
+                    i18nKey: 'show-all-results',
+                }),
                 onSelect: () => {
                     this.bindings.clearSuggestions();
                     this.bindings.searchBoxController.updateText(this.instantResults.state.q);
@@ -133,7 +142,7 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         });
         this.itemTemplateProvider = new ItemTemplateProvider({
             includeDefaultTemplate: true,
-            templateElements: Array.from(this.host.querySelectorAll('atomic-result-template')),
+            templateElements: Array.from(this.querySelectorAll('atomic-result-template')),
             getResultTemplateRegistered: () => true,
             setResultTemplateRegistered: () => { },
             getTemplateHasError: () => this.templateHasError,
@@ -143,7 +152,7 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
             bindings: this.bindings,
         });
         return {
-            position: Array.from(this.host.parentNode.children).indexOf(this.host),
+            position: Array.from(this.parentNode.children).indexOf(this),
             panel: 'right',
             onSuggestedQueryChange: (q) => {
                 this.instantResults.updateQuery(q);
@@ -171,42 +180,32 @@ const AtomicSearchBoxInstantResults$1 = /*@__PURE__*/ proxyCustomElement(class A
         });
     }
     render() {
-        if (this.error) {
-            return (h("atomic-component-error", { key: 'c458b821ec8f13321a674f00e6e5f8dfa50d2525', element: this.host, error: this.error }));
-        }
+        return html `${nothing}`;
     }
-    get host() { return this; }
-}, [1, "atomic-search-box-instant-results", {
-        "maxResultsPerQuery": [514, "max-results-per-query"],
-        "density": [513],
-        "imageSize": [513, "image-size"],
-        "ariaLabelGenerator": [16],
-        "error": [32],
-        "templateHasError": [32],
-        "setRenderFunction": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["atomic-search-box-instant-results", "atomic-result"];
-    components.forEach(tagName => { switch (tagName) {
-        case "atomic-search-box-instant-results":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AtomicSearchBoxInstantResults$1);
-            }
-            break;
-        case "atomic-result":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const AtomicSearchBoxInstantResults = AtomicSearchBoxInstantResults$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AtomicSearchBoxInstantResults, defineCustomElement };
-
-//# sourceMappingURL=atomic-search-box-instant-results.js.map
+};
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicSearchBoxInstantResults.prototype, "templateHasError", void 0);
+__decorate([
+    property({ attribute: 'max-results-per-query', reflect: true, type: Number })
+], AtomicSearchBoxInstantResults.prototype, "maxResultsPerQuery", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "density", void 0);
+__decorate([
+    property({ attribute: 'image-size', reflect: true })
+], AtomicSearchBoxInstantResults.prototype, "imageSize", void 0);
+__decorate([
+    property({ attribute: 'aria-label-generator' })
+], AtomicSearchBoxInstantResults.prototype, "ariaLabelGenerator", void 0);
+__decorate([
+    errorGuard()
+], AtomicSearchBoxInstantResults.prototype, "render", null);
+AtomicSearchBoxInstantResults = __decorate([
+    customElement('atomic-search-box-instant-results'),
+    withTailwindStyles
+], AtomicSearchBoxInstantResults);
+export { AtomicSearchBoxInstantResults };

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

@@ -8,7 +8,7 @@ import { buildSearchEngine, buildSearchStatus, buildUrlManager, EcommerceDefault
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { InterfaceController, } from "../../common/interface/interface-controller";
 import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
@@ -21,6 +21,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
+import "../atomic-relevance-inspector/atomic-relevance-inspector";
 import { getAnalyticsConfig } from './analytics-config';
 import { createSearchStore } from './store';
 // TODO - Remove once all components that use atomic-modal have been migrated.
@@ -35,7 +36,6 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
     constructor() {
         super();
         this.bindings = {};
-        this.relevanceInspectorIsOpen = false;
         this.unsubscribeUrlManager = () => { };
         this.unsubscribeSearchStatus = () => { };
         this.initialized = false;
@@ -105,11 +105,6 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         this.handleInitialization = (event) => {
             this.interfaceController.onComponentInitializing(event);
         };
-        this.handleRelevanceInspectorDoubleClick = (e) => {
-            if (e.altKey) {
-                this.relevanceInspectorIsOpen = !this.relevanceInspectorIsOpen;
-            }
-        };
         this.onHashChange = () => {
             this.urlManager.synchronize(this.fragment);
         };
@@ -122,15 +117,13 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
     connectedCallback() {
         super.connectedCallback();
         this.store.setLoadingFlag(FirstSearchExecutedFlag);
-        this.initRelevanceInspector();
         this.addEventListener('atomic/initializeComponent', this.handleInitialization);
         this.addEventListener('atomic/scrollToTop', this.scrollToTop);
-        this.addEventListener('atomic/relevanceInspector/close', this.closeRelevanceInspector);
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
         if (changedProperties.has('fieldsToInclude')) {
-            this.initFieldsToInclude();
+            this.updateFieldsToInclude();
         }
     }
     disconnectedCallback() {
@@ -144,8 +137,6 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         window.removeEventListener('hashchange', this.onHashChange);
         this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
         this.removeEventListener('atomic/scrollToTop', this.scrollToTop);
-        this.removeEventListener('atomic/relevanceInspector/close', this.closeRelevanceInspector);
-        this.removeEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
     }
     // TODO - (v4) KIT-4991: Make private.
     scrollToTop() {
@@ -156,8 +147,13 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         }
         scrollContainerElement.scrollIntoView({ behavior: 'smooth' });
     }
+    /**
+     * @deprecated provided for backward compatibility. set the 'open' property directly on the relevance inspector instead.
+     */
     closeRelevanceInspector() {
-        this.relevanceInspectorIsOpen = false;
+        if (this.relevanceInspector) {
+            this.relevanceInspector.open = false;
+        }
     }
     /**
      * Initializes the connection with the headless search engine using options for `accessToken` (required), `organizationId` (required), `environment` (defaults to `prod`), and `renewAccessToken`.
@@ -260,6 +256,11 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         const fields = EcommerceDefaultFieldsToInclude.concat(this.fieldsToInclude);
         this.store.addFieldsToInclude(fields);
     }
+    updateFieldsToInclude() {
+        this.store.state.fieldsToInclude = [];
+        this.initFieldsToInclude();
+        this.registerFieldsToInclude();
+    }
     registerFieldsToInclude() {
         this.engine?.dispatch(loadFieldActions(this.engine).registerFieldsToInclude(this.store.state.fieldsToInclude));
     }
@@ -314,11 +315,6 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         this.unsubscribeUrlManager = this.urlManager.subscribe(() => this.updateHash());
         window.addEventListener('hashchange', this.onHashChange);
     }
-    initRelevanceInspector() {
-        if (this.enableRelevanceInspector && !this.disableRelevanceInspector) {
-            this.addEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
-        }
-    }
     initSearchStatus() {
         this.searchStatus = buildSearchStatus(this.engine);
         this.unsubscribeSearchStatus = this.searchStatus.subscribe(() => {
@@ -363,10 +359,7 @@ let AtomicSearchInterface = class AtomicSearchInterface extends ChildrenUpdateCo
         return html `
       ${when(this.bindings?.engine &&
             this.enableRelevanceInspector &&
-            !this.disableRelevanceInspector, () => html `<atomic-relevance-inspector
-          ?open=${this.relevanceInspectorIsOpen}
-          .bindings=${this.bindings}
-        ></atomic-relevance-inspector>`)}
+            !this.disableRelevanceInspector, () => html `<atomic-relevance-inspector></atomic-relevance-inspector>`)}
       <slot></slot>
     `;
     }
@@ -382,8 +375,8 @@ __decorate([
     state()
 ], AtomicSearchInterface.prototype, "error", void 0);
 __decorate([
-    state()
-], AtomicSearchInterface.prototype, "relevanceInspectorIsOpen", void 0);
+    query('atomic-relevance-inspector')
+], AtomicSearchInterface.prototype, "relevanceInspector", void 0);
 __decorate([
     property({
         type: Array,

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

@@ -1,6 +1,8 @@
 // Auto-generated file
 export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
+export { AtomicRelevanceInspector } from './atomic-relevance-inspector/atomic-relevance-inspector.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchBoxInstantResults } from './atomic-search-box-instant-results/atomic-search-box-instant-results.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';
 export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

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

@@ -2,7 +2,9 @@
 export default {
     'atomic-pager': async () => await import('./atomic-pager/atomic-pager.js'),
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
+    'atomic-relevance-inspector': async () => await import('./atomic-relevance-inspector/atomic-relevance-inspector.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+    'atomic-search-box-instant-results': async () => await import('./atomic-search-box-instant-results/atomic-search-box-instant-results.js'),
     'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),
     'atomic-search-layout': async () => await import('./atomic-search-layout/atomic-search-layout.js'),
 };