@coveo/atomic 3.34.0-pre.616c4e348b → 3.34.0-pre.61b8e221e3

package/dist/types/components.d.ts

@@ -11,16 +11,14 @@ import { AnyBindings } from "./components/common/interface/bindings";
 import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 import { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common";
-import { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
-import { i18n } from "i18next";
-import { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
+import { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 import { InsightStore } from "./components/insight/atomic-insight-interface/store";
 import { Actions, InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
 import { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 import { RecommendationEngine, InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "@coveo/headless/recommendation";
+import { i18n } from "i18next";
 import { RecsInitializationOptions } from "./components/recommendations/atomic-recs-interface/atomic-recs-interface";
 import { RecsStore } from "./components/recommendations/atomic-recs-interface/store";
-import { Bindings } from "./components/search/atomic-search-interface/atomic-search-interface";
 import { SearchStore } from "./components/search/atomic-search-interface/store";
 import { RedirectionPayload } from "./components/common/search-box/redirection-payload";
 import { AriaLabelGenerator } from "./components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results";
@@ -31,16 +29,14 @@ export { AnyBindings } from "./components/common/interface/bindings";
 export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 export { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common";
-export { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
-export { i18n } from "i18next";
-export { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
+export { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 export { InsightStore } from "./components/insight/atomic-insight-interface/store";
 export { Actions, InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
 export { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 export { RecommendationEngine, InteractiveResult as RecsInteractiveResult, LogLevel as RecsLogLevel, Result as RecsResult, ResultTemplate as RecsResultTemplate, ResultTemplateCondition as RecsResultTemplateCondition } from "@coveo/headless/recommendation";
+export { i18n } from "i18next";
 export { RecsInitializationOptions } from "./components/recommendations/atomic-recs-interface/atomic-recs-interface";
 export { RecsStore } from "./components/recommendations/atomic-recs-interface/store";
-export { Bindings } from "./components/search/atomic-search-interface/atomic-search-interface";
 export { SearchStore } from "./components/search/atomic-search-interface/store";
 export { RedirectionPayload } from "./components/common/search-box/redirection-payload";
 export { AriaLabelGenerator } from "./components/search/search-box-suggestions/atomic-search-box-instant-results/atomic-search-box-instant-results";
@@ -715,61 +711,6 @@ export namespace Components {
         "clickCallback": () => void;
         "tooltip": string;
     }
-    interface AtomicInsightInterface {
-        /**
-          * The value to set the [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute to on inline script and style elements generated by this interface and its child components. If your application is served with a Content Security Policy (CSP) that doesn't include the `script-src: 'unsafe-inline'` or `style-src: 'unsafe-inline'` directives, you should ensure that your application server generates a new nonce on every page load and uses the generated value to set this prop and serve the corresponding CSP response headers (i.e., script-src 'nonce-<YOUR_GENERATED_NONCE>' and style-src 'nonce-<YOUR_GENERATED_NONCE>'). Otherwise you may see console errors such as  - Refused to execute inline script because it violates the following Content Security Policy directive: [...]  - Refused to apply inline style because it violates the following Content Security Policy directive: [...]. When using a nonce, the first import of Atomic should be to import & call the `setNonce` function with the generated nonce value.
-          * @example : ```html <script nonce="<YOUR_GENERATED_NONCE>"> import {setNonce} from '@coveo/atomic'; setNonce('<YOUR_GENERATED_NONCE>'); </script> ```
-         */
-        "CspNonce"?: string;
-        /**
-          * Whether analytics should be enabled.
-         */
-        "analytics": boolean;
-        /**
-          * The service insight interface headless engine.
-         */
-        "engine"?: InsightEngine;
-        /**
-          * Executes the first search and logs the interface load event to analytics, after initializing connection to the headless search engine.
-         */
-        "executeFirstSearch": () => Promise<void>;
-        /**
-          * A list of non-default fields to include in the query results.  Specify the property as an array using a JSON string representation: ```html <atomic-insight-interface fields-to-include='["fieldA", "fieldB"]'></atomic-insight-interface> ```
-         */
-        "fieldsToInclude": string[] | string;
-        /**
-          * The service insight interface i18next instance.
-         */
-        "i18n": i18n;
-        /**
-          * The icon assets path. By default, this will be a relative URL pointing to `./assets`.  Example: "/mypublicpath/icons"
-         */
-        "iconAssetsPath": string;
-        /**
-          * Initializes the connection with the headless insight engine using options for `accessToken` (required), `organizationId` (required), `environment` (defaults to `prod`), and `renewAccessToken`.
-         */
-        "initialize": (options: InsightInitializationOptions) => Promise<void>;
-        /**
-          * Initializes the connection with an already preconfigured headless insight engine.
-         */
-        "initializeWithInsightEngine": (engine: InsightEngine) => Promise<void>;
-        /**
-          * The service insight interface language.
-         */
-        "language": string;
-        /**
-          * The language assets path. By default, this will be a relative URL pointing to `./lang`.  Example: "/mypublicpath/languages"
-         */
-        "languageAssetsPath": string;
-        /**
-          * The severity level of the messages to log in the console.
-         */
-        "logLevel"?: InsightLogLevel;
-        /**
-          * The number of results per page. By default, this is set to `5`.
-         */
-        "resultsPerPage": number;
-    }
     interface AtomicInsightLayout {
         /**
           * Whether the interface should be shown in widget format.
@@ -1821,16 +1762,6 @@ export namespace Components {
          */
         "collapseFacetsAfter": number;
     }
-    /**
-     * 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.
-     */
-    interface AtomicRelevanceInspector {
-        /**
-          * The Atomic interface bindings, namely the headless search engine and i18n instances.
-         */
-        "bindings": Bindings;
-        "open": boolean;
-    }
     /**
      * The `atomic-result` component is used internally by the `atomic-result-list` component.
      */
@@ -2162,6 +2093,100 @@ export namespace Components {
          */
         "maxValueInIndex": number;
     }
+    /**
+     * This section allows the information seeker to perform an action on an item without having to view its details.
+     * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface AtomicResultSectionActions {
+    }
+    /**
+     * This section provides badges that highlight special features of the item.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface AtomicResultSectionBadges {
+    }
+    /**
+     * This section displays additional descriptive information about the item.
+     * Behavior:
+     * * Has a maximum height of two lines.
+     * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+     * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     * * Has a font weight.
+     */
+    interface AtomicResultSectionBottomMetadata {
+    }
+    /**
+     * This section displays the folded results, available when using the <atomic-result-children> component.
+     * Behavior:
+     * * Shows children at the bottom of the result, indented and wrapped in a border.
+     */
+    interface AtomicResultSectionChildren {
+    }
+    /**
+     * This section displays the field that's important for its search criteria.
+     * For example, in Commerce, a product's cost is often more important than the title itself.
+     * Behavior:
+     * * Has a very large font size.
+     * * Is the second closest element beneath the title section.
+     */
+    interface AtomicResultSectionEmphasized {
+    }
+    /**
+     * This section contains an informative summary of the item's content.
+     * Behavior:
+     * * Has a fixed height of one to three lines, depending on the layout and density.
+     * * Ellipses overflowing text.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface AtomicResultSectionExcerpt {
+    }
+    /**
+     * This section identifies the item by its name, and its main use is to make the result list scannable.
+     * This is usually the page title.
+     * Behavior:
+     * * Has a fixed height of two lines on grid layouts.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface AtomicResultSectionTitle {
+    }
+    /**
+     * This section surfaces some fields that are directly related to the title of the item.
+     * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+     * rather than to the product's description.
+     * Behavior:
+     * * Has a very small font size.
+     * * Is the closest element beneath the title section.
+     */
+    interface AtomicResultSectionTitleMetadata {
+    }
+    /**
+     * This section provides visual information about the item.
+     * For example, in Commerce, an image is a great shorthand for a product category.
+     * An icon can quickly show the item type, or an avatar can help identify to whom it is related.
+     * Behavior:
+     * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.
+     * ** When the image size is set to `icon`, this section stays very small.
+     * ** You should ensure that elements inside of it take the available space.
+     * * Always has a 1:1 aspect ratio.
+     */
+    interface AtomicResultSectionVisual {
+        /**
+          * How large or small the visual section of results using this template should be.
+         */
+        "imageSize"?: ItemDisplayImageSize;
+    }
     /**
      * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.
      */
@@ -2317,23 +2342,6 @@ export namespace Components {
          */
         "maxWithoutQuery"?: number;
     }
-    /**
-     * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
-     */
-    interface AtomicSearchBoxRecentQueries {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon"?: string;
-        /**
-          * The maximum number of suggestions that will be displayed if the user has typed something into the input field.
-         */
-        "maxWithQuery": number;
-        /**
-          * The maximum number of suggestions that will be displayed initially when the input field is empty.
-         */
-        "maxWithoutQuery"?: number;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -2750,10 +2758,6 @@ export interface AtomicQuickviewModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicQuickviewModalElement;
 }
-export interface AtomicRelevanceInspectorCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAtomicRelevanceInspectorElement;
-}
 export interface AtomicSearchBoxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicSearchBoxElement;
@@ -3036,12 +3040,6 @@ declare global {
         prototype: HTMLAtomicInsightHistoryToggleElement;
         new (): HTMLAtomicInsightHistoryToggleElement;
     };
-    interface HTMLAtomicInsightInterfaceElement extends Components.AtomicInsightInterface, HTMLStencilElement {
-    }
-    var HTMLAtomicInsightInterfaceElement: {
-        prototype: HTMLAtomicInsightInterfaceElement;
-        new (): HTMLAtomicInsightInterfaceElement;
-    };
     interface HTMLAtomicInsightLayoutElement extends Components.AtomicInsightLayout, HTMLStencilElement {
     }
     var HTMLAtomicInsightLayoutElement: {
@@ -3565,26 +3563,6 @@ declare global {
         prototype: HTMLAtomicRefineToggleElement;
         new (): HTMLAtomicRefineToggleElement;
     };
-    interface HTMLAtomicRelevanceInspectorElementEventMap {
-        "atomic/relevanceInspector/close": any;
-    }
-    /**
-     * 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.
-     */
-    interface HTMLAtomicRelevanceInspectorElement extends Components.AtomicRelevanceInspector, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAtomicRelevanceInspectorElementEventMap>(type: K, listener: (this: HTMLAtomicRelevanceInspectorElement, ev: AtomicRelevanceInspectorCustomEvent<HTMLAtomicRelevanceInspectorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAtomicRelevanceInspectorElementEventMap>(type: K, listener: (this: HTMLAtomicRelevanceInspectorElement, ev: AtomicRelevanceInspectorCustomEvent<HTMLAtomicRelevanceInspectorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLAtomicRelevanceInspectorElement: {
-        prototype: HTMLAtomicRelevanceInspectorElement;
-        new (): HTMLAtomicRelevanceInspectorElement;
-    };
     /**
      * The `atomic-result` component is used internally by the `atomic-result-list` component.
      */
@@ -3782,6 +3760,132 @@ declare global {
         prototype: HTMLAtomicResultRatingElement;
         new (): HTMLAtomicResultRatingElement;
     };
+    /**
+     * This section allows the information seeker to perform an action on an item without having to view its details.
+     * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface HTMLAtomicResultSectionActionsElement extends Components.AtomicResultSectionActions, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionActionsElement: {
+        prototype: HTMLAtomicResultSectionActionsElement;
+        new (): HTMLAtomicResultSectionActionsElement;
+    };
+    /**
+     * This section provides badges that highlight special features of the item.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface HTMLAtomicResultSectionBadgesElement extends Components.AtomicResultSectionBadges, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionBadgesElement: {
+        prototype: HTMLAtomicResultSectionBadgesElement;
+        new (): HTMLAtomicResultSectionBadgesElement;
+    };
+    /**
+     * This section displays additional descriptive information about the item.
+     * Behavior:
+     * * Has a maximum height of two lines.
+     * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+     * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     * * Has a font weight.
+     */
+    interface HTMLAtomicResultSectionBottomMetadataElement extends Components.AtomicResultSectionBottomMetadata, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionBottomMetadataElement: {
+        prototype: HTMLAtomicResultSectionBottomMetadataElement;
+        new (): HTMLAtomicResultSectionBottomMetadataElement;
+    };
+    /**
+     * This section displays the folded results, available when using the <atomic-result-children> component.
+     * Behavior:
+     * * Shows children at the bottom of the result, indented and wrapped in a border.
+     */
+    interface HTMLAtomicResultSectionChildrenElement extends Components.AtomicResultSectionChildren, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionChildrenElement: {
+        prototype: HTMLAtomicResultSectionChildrenElement;
+        new (): HTMLAtomicResultSectionChildrenElement;
+    };
+    /**
+     * This section displays the field that's important for its search criteria.
+     * For example, in Commerce, a product's cost is often more important than the title itself.
+     * Behavior:
+     * * Has a very large font size.
+     * * Is the second closest element beneath the title section.
+     */
+    interface HTMLAtomicResultSectionEmphasizedElement extends Components.AtomicResultSectionEmphasized, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionEmphasizedElement: {
+        prototype: HTMLAtomicResultSectionEmphasizedElement;
+        new (): HTMLAtomicResultSectionEmphasizedElement;
+    };
+    /**
+     * This section contains an informative summary of the item's content.
+     * Behavior:
+     * * Has a fixed height of one to three lines, depending on the layout and density.
+     * * Ellipses overflowing text.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface HTMLAtomicResultSectionExcerptElement extends Components.AtomicResultSectionExcerpt, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionExcerptElement: {
+        prototype: HTMLAtomicResultSectionExcerptElement;
+        new (): HTMLAtomicResultSectionExcerptElement;
+    };
+    /**
+     * This section identifies the item by its name, and its main use is to make the result list scannable.
+     * This is usually the page title.
+     * Behavior:
+     * * Has a fixed height of two lines on grid layouts.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface HTMLAtomicResultSectionTitleElement extends Components.AtomicResultSectionTitle, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionTitleElement: {
+        prototype: HTMLAtomicResultSectionTitleElement;
+        new (): HTMLAtomicResultSectionTitleElement;
+    };
+    /**
+     * This section surfaces some fields that are directly related to the title of the item.
+     * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+     * rather than to the product's description.
+     * Behavior:
+     * * Has a very small font size.
+     * * Is the closest element beneath the title section.
+     */
+    interface HTMLAtomicResultSectionTitleMetadataElement extends Components.AtomicResultSectionTitleMetadata, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionTitleMetadataElement: {
+        prototype: HTMLAtomicResultSectionTitleMetadataElement;
+        new (): HTMLAtomicResultSectionTitleMetadataElement;
+    };
+    /**
+     * This section provides visual information about the item.
+     * For example, in Commerce, an image is a great shorthand for a product category.
+     * An icon can quickly show the item type, or an avatar can help identify to whom it is related.
+     * Behavior:
+     * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.
+     * ** When the image size is set to `icon`, this section stays very small.
+     * ** You should ensure that elements inside of it take the available space.
+     * * Always has a 1:1 aspect ratio.
+     */
+    interface HTMLAtomicResultSectionVisualElement extends Components.AtomicResultSectionVisual, HTMLStencilElement {
+    }
+    var HTMLAtomicResultSectionVisualElement: {
+        prototype: HTMLAtomicResultSectionVisualElement;
+        new (): HTMLAtomicResultSectionVisualElement;
+    };
     /**
      * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.
      */
@@ -3860,15 +3964,6 @@ declare global {
         prototype: HTMLAtomicSearchBoxQuerySuggestionsElement;
         new (): HTMLAtomicSearchBoxQuerySuggestionsElement;
     };
-    /**
-     * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
-     */
-    interface HTMLAtomicSearchBoxRecentQueriesElement extends Components.AtomicSearchBoxRecentQueries, HTMLStencilElement {
-    }
-    var HTMLAtomicSearchBoxRecentQueriesElement: {
-        prototype: HTMLAtomicSearchBoxRecentQueriesElement;
-        new (): HTMLAtomicSearchBoxRecentQueriesElement;
-    };
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -4171,7 +4266,6 @@ declare global {
         "atomic-insight-full-search-button": HTMLAtomicInsightFullSearchButtonElement;
         "atomic-insight-generated-answer": HTMLAtomicInsightGeneratedAnswerElement;
         "atomic-insight-history-toggle": HTMLAtomicInsightHistoryToggleElement;
-        "atomic-insight-interface": HTMLAtomicInsightInterfaceElement;
         "atomic-insight-layout": HTMLAtomicInsightLayoutElement;
         "atomic-insight-no-results": HTMLAtomicInsightNoResultsElement;
         "atomic-insight-numeric-facet": HTMLAtomicInsightNumericFacetElement;
@@ -4229,7 +4323,6 @@ declare global {
         "atomic-recs-result-template": HTMLAtomicRecsResultTemplateElement;
         "atomic-refine-modal": HTMLAtomicRefineModalElement;
         "atomic-refine-toggle": HTMLAtomicRefineToggleElement;
-        "atomic-relevance-inspector": HTMLAtomicRelevanceInspectorElement;
         "atomic-result": HTMLAtomicResultElement;
         "atomic-result-badge": HTMLAtomicResultBadgeElement;
         "atomic-result-children": HTMLAtomicResultChildrenElement;
@@ -4247,6 +4340,15 @@ declare global {
         "atomic-result-placeholder": HTMLAtomicResultPlaceholderElement;
         "atomic-result-printable-uri": HTMLAtomicResultPrintableUriElement;
         "atomic-result-rating": HTMLAtomicResultRatingElement;
+        "atomic-result-section-actions": HTMLAtomicResultSectionActionsElement;
+        "atomic-result-section-badges": HTMLAtomicResultSectionBadgesElement;
+        "atomic-result-section-bottom-metadata": HTMLAtomicResultSectionBottomMetadataElement;
+        "atomic-result-section-children": HTMLAtomicResultSectionChildrenElement;
+        "atomic-result-section-emphasized": HTMLAtomicResultSectionEmphasizedElement;
+        "atomic-result-section-excerpt": HTMLAtomicResultSectionExcerptElement;
+        "atomic-result-section-title": HTMLAtomicResultSectionTitleElement;
+        "atomic-result-section-title-metadata": HTMLAtomicResultSectionTitleMetadataElement;
+        "atomic-result-section-visual": HTMLAtomicResultSectionVisualElement;
         "atomic-result-table-placeholder": HTMLAtomicResultTablePlaceholderElement;
         "atomic-result-template": HTMLAtomicResultTemplateElement;
         "atomic-result-text": HTMLAtomicResultTextElement;
@@ -4254,7 +4356,6 @@ declare global {
         "atomic-search-box": HTMLAtomicSearchBoxElement;
         "atomic-search-box-instant-results": HTMLAtomicSearchBoxInstantResultsElement;
         "atomic-search-box-query-suggestions": HTMLAtomicSearchBoxQuerySuggestionsElement;
-        "atomic-search-box-recent-queries": HTMLAtomicSearchBoxRecentQueriesElement;
         "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement;
         "atomic-segmented-facet-scrollable": HTMLAtomicSegmentedFacetScrollableElement;
         "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
@@ -4936,49 +5037,6 @@ declare namespace LocalJSX {
         "clickCallback"?: () => void;
         "tooltip"?: string;
     }
-    interface AtomicInsightInterface {
-        /**
-          * The value to set the [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute to on inline script and style elements generated by this interface and its child components. If your application is served with a Content Security Policy (CSP) that doesn't include the `script-src: 'unsafe-inline'` or `style-src: 'unsafe-inline'` directives, you should ensure that your application server generates a new nonce on every page load and uses the generated value to set this prop and serve the corresponding CSP response headers (i.e., script-src 'nonce-<YOUR_GENERATED_NONCE>' and style-src 'nonce-<YOUR_GENERATED_NONCE>'). Otherwise you may see console errors such as  - Refused to execute inline script because it violates the following Content Security Policy directive: [...]  - Refused to apply inline style because it violates the following Content Security Policy directive: [...]. When using a nonce, the first import of Atomic should be to import & call the `setNonce` function with the generated nonce value.
-          * @example : ```html <script nonce="<YOUR_GENERATED_NONCE>"> import {setNonce} from '@coveo/atomic'; setNonce('<YOUR_GENERATED_NONCE>'); </script> ```
-         */
-        "CspNonce"?: string;
-        /**
-          * Whether analytics should be enabled.
-         */
-        "analytics"?: boolean;
-        /**
-          * The service insight interface headless engine.
-         */
-        "engine"?: InsightEngine;
-        /**
-          * A list of non-default fields to include in the query results.  Specify the property as an array using a JSON string representation: ```html <atomic-insight-interface fields-to-include='["fieldA", "fieldB"]'></atomic-insight-interface> ```
-         */
-        "fieldsToInclude"?: string[] | string;
-        /**
-          * The service insight interface i18next instance.
-         */
-        "i18n"?: i18n;
-        /**
-          * The icon assets path. By default, this will be a relative URL pointing to `./assets`.  Example: "/mypublicpath/icons"
-         */
-        "iconAssetsPath"?: string;
-        /**
-          * The service insight interface language.
-         */
-        "language"?: string;
-        /**
-          * The language assets path. By default, this will be a relative URL pointing to `./lang`.  Example: "/mypublicpath/languages"
-         */
-        "languageAssetsPath"?: string;
-        /**
-          * The severity level of the messages to log in the console.
-         */
-        "logLevel"?: InsightLogLevel;
-        /**
-          * The number of results per page. By default, this is set to `5`.
-         */
-        "resultsPerPage"?: number;
-    }
     interface AtomicInsightLayout {
         /**
           * Whether the interface should be shown in widget format.
@@ -5954,17 +6012,6 @@ declare namespace LocalJSX {
          */
         "collapseFacetsAfter"?: number;
     }
-    /**
-     * 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.
-     */
-    interface AtomicRelevanceInspector {
-        /**
-          * The Atomic interface bindings, namely the headless search engine and i18n instances.
-         */
-        "bindings": Bindings;
-        "onAtomic/relevanceInspector/close"?: (event: AtomicRelevanceInspectorCustomEvent<any>) => void;
-        "open"?: boolean;
-    }
     /**
      * The `atomic-result` component is used internally by the `atomic-result-list` component.
      */
@@ -6274,6 +6321,100 @@ declare namespace LocalJSX {
          */
         "maxValueInIndex"?: number;
     }
+    /**
+     * This section allows the information seeker to perform an action on an item without having to view its details.
+     * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface AtomicResultSectionActions {
+    }
+    /**
+     * This section provides badges that highlight special features of the item.
+     * Behavior:
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+     * * Is a wrapping flexbox with a gap.
+     * * May appear over, next to, or beneath the visual section.
+     */
+    interface AtomicResultSectionBadges {
+    }
+    /**
+     * This section displays additional descriptive information about the item.
+     * Behavior:
+     * * Has a maximum height of two lines.
+     * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+     * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     * * Has a font weight.
+     */
+    interface AtomicResultSectionBottomMetadata {
+    }
+    /**
+     * This section displays the folded results, available when using the <atomic-result-children> component.
+     * Behavior:
+     * * Shows children at the bottom of the result, indented and wrapped in a border.
+     */
+    interface AtomicResultSectionChildren {
+    }
+    /**
+     * This section displays the field that's important for its search criteria.
+     * For example, in Commerce, a product's cost is often more important than the title itself.
+     * Behavior:
+     * * Has a very large font size.
+     * * Is the second closest element beneath the title section.
+     */
+    interface AtomicResultSectionEmphasized {
+    }
+    /**
+     * This section contains an informative summary of the item's content.
+     * Behavior:
+     * * Has a fixed height of one to three lines, depending on the layout and density.
+     * * Ellipses overflowing text.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface AtomicResultSectionExcerpt {
+    }
+    /**
+     * This section identifies the item by its name, and its main use is to make the result list scannable.
+     * This is usually the page title.
+     * Behavior:
+     * * Has a fixed height of two lines on grid layouts.
+     * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+     * * Has a defined CSS `color` property for text.
+     */
+    interface AtomicResultSectionTitle {
+    }
+    /**
+     * This section surfaces some fields that are directly related to the title of the item.
+     * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+     * rather than to the product's description.
+     * Behavior:
+     * * Has a very small font size.
+     * * Is the closest element beneath the title section.
+     */
+    interface AtomicResultSectionTitleMetadata {
+    }
+    /**
+     * This section provides visual information about the item.
+     * For example, in Commerce, an image is a great shorthand for a product category.
+     * An icon can quickly show the item type, or an avatar can help identify to whom it is related.
+     * Behavior:
+     * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.
+     * ** When the image size is set to `icon`, this section stays very small.
+     * ** You should ensure that elements inside of it take the available space.
+     * * Always has a 1:1 aspect ratio.
+     */
+    interface AtomicResultSectionVisual {
+        /**
+          * How large or small the visual section of results using this template should be.
+         */
+        "imageSize"?: ItemDisplayImageSize;
+    }
     /**
      * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.
      */
@@ -6424,23 +6565,6 @@ declare namespace LocalJSX {
          */
         "maxWithoutQuery"?: number;
     }
-    /**
-     * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
-     */
-    interface AtomicSearchBoxRecentQueries {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon"?: string;
-        /**
-          * The maximum number of suggestions that will be displayed if the user has typed something into the input field.
-         */
-        "maxWithQuery"?: number;
-        /**
-          * The maximum number of suggestions that will be displayed initially when the input field is empty.
-         */
-        "maxWithoutQuery"?: number;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -6854,7 +6978,6 @@ declare namespace LocalJSX {
         "atomic-insight-full-search-button": AtomicInsightFullSearchButton;
         "atomic-insight-generated-answer": AtomicInsightGeneratedAnswer;
         "atomic-insight-history-toggle": AtomicInsightHistoryToggle;
-        "atomic-insight-interface": AtomicInsightInterface;
         "atomic-insight-layout": AtomicInsightLayout;
         "atomic-insight-no-results": AtomicInsightNoResults;
         "atomic-insight-numeric-facet": AtomicInsightNumericFacet;
@@ -6912,7 +7035,6 @@ declare namespace LocalJSX {
         "atomic-recs-result-template": AtomicRecsResultTemplate;
         "atomic-refine-modal": AtomicRefineModal;
         "atomic-refine-toggle": AtomicRefineToggle;
-        "atomic-relevance-inspector": AtomicRelevanceInspector;
         "atomic-result": AtomicResult;
         "atomic-result-badge": AtomicResultBadge;
         "atomic-result-children": AtomicResultChildren;
@@ -6930,6 +7052,15 @@ declare namespace LocalJSX {
         "atomic-result-placeholder": AtomicResultPlaceholder;
         "atomic-result-printable-uri": AtomicResultPrintableUri;
         "atomic-result-rating": AtomicResultRating;
+        "atomic-result-section-actions": AtomicResultSectionActions;
+        "atomic-result-section-badges": AtomicResultSectionBadges;
+        "atomic-result-section-bottom-metadata": AtomicResultSectionBottomMetadata;
+        "atomic-result-section-children": AtomicResultSectionChildren;
+        "atomic-result-section-emphasized": AtomicResultSectionEmphasized;
+        "atomic-result-section-excerpt": AtomicResultSectionExcerpt;
+        "atomic-result-section-title": AtomicResultSectionTitle;
+        "atomic-result-section-title-metadata": AtomicResultSectionTitleMetadata;
+        "atomic-result-section-visual": AtomicResultSectionVisual;
         "atomic-result-table-placeholder": AtomicResultTablePlaceholder;
         "atomic-result-template": AtomicResultTemplate;
         "atomic-result-text": AtomicResultText;
@@ -6937,7 +7068,6 @@ declare namespace LocalJSX {
         "atomic-search-box": AtomicSearchBox;
         "atomic-search-box-instant-results": AtomicSearchBoxInstantResults;
         "atomic-search-box-query-suggestions": AtomicSearchBoxQuerySuggestions;
-        "atomic-search-box-recent-queries": AtomicSearchBoxRecentQueries;
         "atomic-segmented-facet": AtomicSegmentedFacet;
         "atomic-segmented-facet-scrollable": AtomicSegmentedFacetScrollable;
         "atomic-smart-snippet": AtomicSmartSnippet;
@@ -7071,7 +7201,6 @@ declare module "@stencil/core" {
             "atomic-insight-full-search-button": LocalJSX.AtomicInsightFullSearchButton & JSXBase.HTMLAttributes<HTMLAtomicInsightFullSearchButtonElement>;
             "atomic-insight-generated-answer": LocalJSX.AtomicInsightGeneratedAnswer & JSXBase.HTMLAttributes<HTMLAtomicInsightGeneratedAnswerElement>;
             "atomic-insight-history-toggle": LocalJSX.AtomicInsightHistoryToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightHistoryToggleElement>;
-            "atomic-insight-interface": LocalJSX.AtomicInsightInterface & JSXBase.HTMLAttributes<HTMLAtomicInsightInterfaceElement>;
             "atomic-insight-layout": LocalJSX.AtomicInsightLayout & JSXBase.HTMLAttributes<HTMLAtomicInsightLayoutElement>;
             "atomic-insight-no-results": LocalJSX.AtomicInsightNoResults & JSXBase.HTMLAttributes<HTMLAtomicInsightNoResultsElement>;
             "atomic-insight-numeric-facet": LocalJSX.AtomicInsightNumericFacet & JSXBase.HTMLAttributes<HTMLAtomicInsightNumericFacetElement>;
@@ -7220,10 +7349,6 @@ declare module "@stencil/core" {
              * When this component is added to the `atomic-search-interface`, an `atomic-refine-modal` component is automatically created.
              */
             "atomic-refine-toggle": LocalJSX.AtomicRefineToggle & JSXBase.HTMLAttributes<HTMLAtomicRefineToggleElement>;
-            /**
-             * 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.
-             */
-            "atomic-relevance-inspector": LocalJSX.AtomicRelevanceInspector & JSXBase.HTMLAttributes<HTMLAtomicRelevanceInspectorElement>;
             /**
              * The `atomic-result` component is used internally by the `atomic-result-list` component.
              */
@@ -7336,6 +7461,87 @@ declare module "@stencil/core" {
              * The `atomic-result-rating` element renders a star rating.
              */
             "atomic-result-rating": LocalJSX.AtomicResultRating & JSXBase.HTMLAttributes<HTMLAtomicResultRatingElement>;
+            /**
+             * This section allows the information seeker to perform an action on an item without having to view its details.
+             * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
+             * Behavior:
+             * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+             * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+             * * Is a wrapping flexbox with a gap.
+             * * May appear over, next to, or beneath the visual section.
+             */
+            "atomic-result-section-actions": LocalJSX.AtomicResultSectionActions & JSXBase.HTMLAttributes<HTMLAtomicResultSectionActionsElement>;
+            /**
+             * This section provides badges that highlight special features of the item.
+             * Behavior:
+             * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+             * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+             * * Is a wrapping flexbox with a gap.
+             * * May appear over, next to, or beneath the visual section.
+             */
+            "atomic-result-section-badges": LocalJSX.AtomicResultSectionBadges & JSXBase.HTMLAttributes<HTMLAtomicResultSectionBadgesElement>;
+            /**
+             * This section displays additional descriptive information about the item.
+             * Behavior:
+             * * Has a maximum height of two lines.
+             * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+             * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
+             * * Has a defined CSS `color` property for text.
+             * * Has a font weight.
+             */
+            "atomic-result-section-bottom-metadata": LocalJSX.AtomicResultSectionBottomMetadata & JSXBase.HTMLAttributes<HTMLAtomicResultSectionBottomMetadataElement>;
+            /**
+             * This section displays the folded results, available when using the <atomic-result-children> component.
+             * Behavior:
+             * * Shows children at the bottom of the result, indented and wrapped in a border.
+             */
+            "atomic-result-section-children": LocalJSX.AtomicResultSectionChildren & JSXBase.HTMLAttributes<HTMLAtomicResultSectionChildrenElement>;
+            /**
+             * This section displays the field that's important for its search criteria.
+             * For example, in Commerce, a product's cost is often more important than the title itself.
+             * Behavior:
+             * * Has a very large font size.
+             * * Is the second closest element beneath the title section.
+             */
+            "atomic-result-section-emphasized": LocalJSX.AtomicResultSectionEmphasized & JSXBase.HTMLAttributes<HTMLAtomicResultSectionEmphasizedElement>;
+            /**
+             * This section contains an informative summary of the item's content.
+             * Behavior:
+             * * Has a fixed height of one to three lines, depending on the layout and density.
+             * * Ellipses overflowing text.
+             * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+             * * Has a defined CSS `color` property for text.
+             */
+            "atomic-result-section-excerpt": LocalJSX.AtomicResultSectionExcerpt & JSXBase.HTMLAttributes<HTMLAtomicResultSectionExcerptElement>;
+            /**
+             * This section identifies the item by its name, and its main use is to make the result list scannable.
+             * This is usually the page title.
+             * Behavior:
+             * * Has a fixed height of two lines on grid layouts.
+             * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+             * * Has a defined CSS `color` property for text.
+             */
+            "atomic-result-section-title": LocalJSX.AtomicResultSectionTitle & JSXBase.HTMLAttributes<HTMLAtomicResultSectionTitleElement>;
+            /**
+             * This section surfaces some fields that are directly related to the title of the item.
+             * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+             * rather than to the product's description.
+             * Behavior:
+             * * Has a very small font size.
+             * * Is the closest element beneath the title section.
+             */
+            "atomic-result-section-title-metadata": LocalJSX.AtomicResultSectionTitleMetadata & JSXBase.HTMLAttributes<HTMLAtomicResultSectionTitleMetadataElement>;
+            /**
+             * This section provides visual information about the item.
+             * For example, in Commerce, an image is a great shorthand for a product category.
+             * An icon can quickly show the item type, or an avatar can help identify to whom it is related.
+             * Behavior:
+             * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.
+             * ** When the image size is set to `icon`, this section stays very small.
+             * ** You should ensure that elements inside of it take the available space.
+             * * Always has a 1:1 aspect ratio.
+             */
+            "atomic-result-section-visual": LocalJSX.AtomicResultSectionVisual & JSXBase.HTMLAttributes<HTMLAtomicResultSectionVisualElement>;
             /**
              * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.
              */
@@ -7368,10 +7574,6 @@ declare module "@stencil/core" {
              * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
              */
             "atomic-search-box-query-suggestions": LocalJSX.AtomicSearchBoxQuerySuggestions & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxQuerySuggestionsElement>;
-            /**
-             * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
-             */
-            "atomic-search-box-recent-queries": LocalJSX.AtomicSearchBoxRecentQueries & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxRecentQueriesElement>;
             /**
              * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
              */