@searchcraft/react-sdk 0.10.0 → 0.10.1

package/dist/server/index.d.ts

@@ -138,6 +138,9 @@ export type CustomAdTemplate = (data: {
 }, utils: {
 	html: TemplateHtml;
 }) => string;
+export type PopoverButtonTemplate = (data: boolean, utils: {
+	html: TemplateHtml;
+}) => string;
 /**
  * The SearchcraftConfig object is used to initialize Searchcraft in your application.
  */
@@ -265,7 +268,7 @@ export interface FacetChild {
 /**
  * Types of measure requests that can be sent to the /measure/event endpoint.
  */
-export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "document_clicked";
+export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "search_completed" | "document_clicked";
 /**
  * Properties attached to a measure request.
  */
@@ -480,12 +483,13 @@ declare class MeasureClient {
 	 * @param {Partial<MeasureRequestProperties>} properties - Additional properties to send with the event.
 	 * @param {Partial<MeasureRequestUser>} user - Additional user properites to send with the event.
 	 */
-	sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => void;
+	sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => Promise<void>;
 }
 declare class SearchClient {
 	private config;
 	private userId;
 	private parent;
+	private searchCompletedEventTimeout;
 	constructor(parent: SearchcraftCore, config: SearchcraftConfig, userId: string);
 	/**
 	 * Getter for the base url used by the /search endpoint.
@@ -563,6 +567,7 @@ export interface SearchcraftStateFunctions {
 	setSearchTerm: (searchTerm: string) => void;
 	setSearchMode: (mode: "fuzzy" | "exact") => void;
 	setSortType: (type: "asc" | "desc") => void;
+	setHotKeyAndHotKeyModifier: (hotkey?: string, hotkeyModifier?: "ctrl" | "meta" | "alt" | "option") => void;
 }
 /**
  * Values stored in SearchcraftStore.
@@ -570,6 +575,8 @@ export interface SearchcraftStateFunctions {
 export interface SearchcraftStateValues {
 	adClientResponseItems: AdClientResponseItem[];
 	core: SearchcraftCore | undefined;
+	hotkey: string;
+	hotkeyModifier: "ctrl" | "meta" | "alt" | "option";
 	logger: Logger | undefined;
 	facetPathsForIndexFields: Record<string, FacetPathsForIndexField>;
 	isPopoverVisible: boolean;
@@ -671,10 +678,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -704,10 +711,10 @@ export namespace Components {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -758,10 +765,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -778,36 +785,65 @@ export namespace Components {
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = (isPopoverVisible, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * A callback function responsible for rendering the button contents.
+		 */
+		"template"?: PopoverButtonTemplate;
+		/**
+		  * The type of popover button to render.
+		 */
+		"type"?: "skeuomorphic";
+	}
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface SearchcraftPopoverFooter {
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -877,10 +913,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -900,17 +936,18 @@ export namespace Components {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface SearchcraftResultsInfo {
 		/**
 		  * A callback function responsible for rendering the results info.
-		  * @example ```ts  resultsInfo.template = html`    ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms  `; ```
 		 */
 		"template"?: ResultsInfoTemplate;
 	}
@@ -934,10 +971,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -981,10 +1018,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1068,10 +1105,10 @@ export namespace Components {
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1205,10 +1242,10 @@ declare global {
 	};
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1243,10 +1280,10 @@ declare global {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1287,10 +1324,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1311,24 +1348,40 @@ declare global {
 	};
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = (isPopoverVisible, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
@@ -1339,12 +1392,21 @@ declare global {
 		prototype: HTMLSearchcraftPopoverButtonElement;
 		new (): HTMLSearchcraftPopoverButtonElement;
 	};
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface HTMLSearchcraftPopoverFooterElement extends Components.SearchcraftPopoverFooter, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverFooterElement: {
+		prototype: HTMLSearchcraftPopoverFooterElement;
+		new (): HTMLSearchcraftPopoverFooterElement;
+	};
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1393,10 +1455,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1416,12 +1478,14 @@ declare global {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
 	}
@@ -1440,10 +1504,10 @@ declare global {
 	};
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1487,10 +1551,10 @@ declare global {
 	};
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1560,10 +1624,10 @@ declare global {
 	};
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1612,6 +1676,7 @@ declare global {
 		"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
 		"searchcraft-pagination": HTMLSearchcraftPaginationElement;
 		"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
+		"searchcraft-popover-footer": HTMLSearchcraftPopoverFooterElement;
 		"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
 		"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
 		"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
@@ -1711,10 +1776,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1744,10 +1809,10 @@ declare namespace LocalJSX {
 	/**
 	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1810,10 +1875,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1830,36 +1895,65 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ````
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
+	 * <!-- index.html -->
 	 * <searchcraft-popover-button>
 	 *   Open popover
 	 * </searchcraft-popover-button>
 	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverButton = document.querySelector('searchcraft-popover-button');
+	 * popoverButton.template = (isPopoverVisible, { html }) => html`
+	 *   <span>Click me</span>
+	 * `;
+	 * ```
 	 * @react-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 * @vue-example ```jsx
-	 * <SearchcraftPopoverButton>
+	 * <SearchcraftPopoverButton
+	 *   :template={(isPopoverVisible, { html }) => html`
+	 *     <span>Click me</span>
+	 *   `}
+	 * >
 	 *   Open popover
 	 * </SearchcraftPopoverButton>
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * A callback function responsible for rendering the button contents.
+		 */
+		"template"?: PopoverButtonTemplate;
+		/**
+		  * The type of popover button to render.
+		 */
+		"type"?: "skeuomorphic";
+	}
+	/**
+	 * Renders the footer for the searchcraft-popover-form.
+	 */
+	interface SearchcraftPopoverFooter {
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1929,10 +2023,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -1952,17 +2046,18 @@ declare namespace LocalJSX {
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftResultsInfo
 	 *   :template={(info, { html }) => html`
 	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 	 *   `}
 	 * />
+	 * ```
 	 */
 	interface SearchcraftResultsInfo {
 		/**
 		  * A callback function responsible for rendering the results info.
-		  * @example ```ts  resultsInfo.template = html`    ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms  `; ```
 		 */
 		"template"?: ResultsInfoTemplate;
 	}
@@ -1986,10 +2081,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2033,10 +2128,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component is designed to choose the number of search results displayed.
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2128,10 +2223,10 @@ declare namespace LocalJSX {
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-	 * @import ```jsx
-	 * // react
+	 * @react-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-	 * // vue
+	 * ```
+	 * @vue-import ```jsx
 	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 	 * ```
 	 * @js-example ```html
@@ -2173,6 +2268,7 @@ declare namespace LocalJSX {
 		"searchcraft-input-label": SearchcraftInputLabel;
 		"searchcraft-pagination": SearchcraftPagination;
 		"searchcraft-popover-button": SearchcraftPopoverButton;
+		"searchcraft-popover-footer": SearchcraftPopoverFooter;
 		"searchcraft-popover-form": SearchcraftPopoverForm;
 		"searchcraft-popover-list-item": SearchcraftPopoverListItem;
 		"searchcraft-popover-list-view": SearchcraftPopoverListView;
@@ -2225,10 +2321,10 @@ declare module "@stencil/core" {
 			"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes<HTMLSearchcraftFacetListElement>;
 			/**
 			 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2253,10 +2349,10 @@ declare module "@stencil/core" {
 			/**
 			 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
 			 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2279,10 +2375,10 @@ declare module "@stencil/core" {
 			"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes<HTMLSearchcraftInputLabelElement>;
 			/**
 			 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2298,35 +2394,55 @@ declare module "@stencil/core" {
 			"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
 			/**
 			 * Renders a button which, when clicked, turns on popover visibility.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ````
+			 * @vue-import ```jsx
 			 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
+			 * <!-- index.html -->
 			 * <searchcraft-popover-button>
 			 *   Open popover
 			 * </searchcraft-popover-button>
 			 * ```
+			 * ```js
+			 * // index.js
+			 * const popoverButton = document.querySelector('searchcraft-popover-button');
+			 * popoverButton.template = (isPopoverVisible, { html }) => html`
+			 *   <span>Click me</span>
+			 * `;
+			 * ```
 			 * @react-example ```jsx
-			 * <SearchcraftPopoverButton>
+			 * <SearchcraftPopoverButton
+			 *   template={(isPopoverVisible, { html }) => html`
+			 *     <span>Click me</span>
+			 *   `}
+			 * >
 			 *   Open popover
 			 * </SearchcraftPopoverButton>
 			 * ```
 			 * @vue-example ```jsx
-			 * <SearchcraftPopoverButton>
+			 * <SearchcraftPopoverButton
+			 *   :template={(isPopoverVisible, { html }) => html`
+			 *     <span>Click me</span>
+			 *   `}
+			 * >
 			 *   Open popover
 			 * </SearchcraftPopoverButton>
 			 * ```
 			 */
 			"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
+			/**
+			 * Renders the footer for the searchcraft-popover-form.
+			 */
+			"searchcraft-popover-footer": LocalJSX.SearchcraftPopoverFooter & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFooterElement>;
 			/**
 			 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2360,10 +2476,10 @@ declare module "@stencil/core" {
 			"searchcraft-popover-list-view": LocalJSX.SearchcraftPopoverListView & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListViewElement>;
 			/**
 			 * This web component is designed to display the number of results returned from a search query.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2383,12 +2499,14 @@ declare module "@stencil/core" {
 			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 			 *   `}
 			 * />
+			 * ```
 			 * @vue-example ```jsx
 			 * <SearchcraftResultsInfo
 			 *   :template={(info, { html }) => html`
 			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
 			 *   `}
 			 * />
+			 * ```
 			 */
 			"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
 			/**
@@ -2397,10 +2515,10 @@ declare module "@stencil/core" {
 			"searchcraft-search-result": LocalJSX.SearchcraftSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultElement>;
 			/**
 			 * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2439,10 +2557,10 @@ declare module "@stencil/core" {
 			"searchcraft-search-results": LocalJSX.SearchcraftSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsElement>;
 			/**
 			 * This web component is designed to choose the number of search results displayed.
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html
@@ -2475,10 +2593,10 @@ declare module "@stencil/core" {
 			"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
 			/**
 			 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
-			 * @import ```jsx
-			 * // react
+			 * @react-import ```jsx
 			 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
-			 * // vue
+			 * ```
+			 * @vue-import ```jsx
 			 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
 			 * ```
 			 * @js-example ```html