@searchcraft/javascript-sdk 0.7.1 → 0.8.0

package/dist/types/components.d.ts

@@ -5,12 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { PopoverResultMappings, SearchResultMappings } from "./types/index";
-import { FilterItem } from "./types/searchcraft-filter-panel.types";
-import { SearchcraftConfig } from "@searchcraft/core";
-export { PopoverResultMappings, SearchResultMappings } from "./types/index";
-export { FilterItem } from "./types/searchcraft-filter-panel.types";
-export { SearchcraftConfig } from "@searchcraft/core";
+import { AdClientResponseItem, FilterItem, PopoverResultMappings, SearchClientResponseItem, SearchcraftConfig, SearchResultMappings } from "@searchcraft/core";
+import { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
+export { AdClientResponseItem, FilterItem, PopoverResultMappings, SearchClientResponseItem, SearchcraftConfig, SearchResultMappings } from "@searchcraft/core";
+export { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
 export namespace Components {
     /**
      * This web component is designed to display detailed information for a single search result.
@@ -18,18 +16,6 @@ export namespace Components {
      * It is consumed within the `searchcraft-base-search-results` component.
      */
     interface SearchcraftBaseSearchResult {
-        /**
-          * The body content.
-         */
-        "bodyContent": string | undefined;
-        /**
-          * The link for the button rendered when containerHref is not present.
-         */
-        "buttonHref": string | undefined;
-        /**
-          * The label for the button rendered when containerHref is not present.
-         */
-        "buttonLabel": string | undefined;
         /**
           * The relationship between the current document and the link for the button rendered when containerHref is not present.
          */
@@ -38,10 +24,6 @@ export namespace Components {
           * Where to open the link for the button rendered when containerHref is not present.
          */
         "buttonTarget": '_blank' | '_self' | '_top' | '_parent';
-        /**
-          * The link for the containing element.
-         */
-        "containerHref": string | undefined;
         /**
           * The relationship between the current document and the link for the containing element.
          */
@@ -58,30 +40,18 @@ export namespace Components {
           * The position in the document. Used with the "document_clicked" measure event.
          */
         "documentPosition": number;
-        /**
-          * The footer content.
-         */
-        "footerContent": string | undefined;
-        /**
-          * The image alternative text.
-         */
-        "imageAlt": string | undefined;
         /**
           * The placement of the image.
          */
         "imagePlacement": 'left' | 'right';
-        /**
-          * The image source.
-         */
-        "imageSrc": string | undefined;
-        /**
-          * The subtitle content.
-         */
-        "subtitleContent": string | undefined;
-        /**
-          * The title content.
-         */
-        "titleContent": string | undefined;
+        "item": SearchClientResponseItem | undefined;
+        "searchResultMappings": SearchResultMappings | undefined;
+    }
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface SearchcraftBaseSearchResultAd {
+        "adClientResponseItem"?: AdClientResponseItem;
     }
     /**
      * This web component is responsible for displaying the results of a search query.
@@ -112,10 +82,6 @@ export namespace Components {
      * ```
      */
     interface SearchcraftBaseSearchResults {
-        /**
-          * How often ads are injected.
-         */
-        "adInterval": number;
         /**
           * The label for the button rendered when containerHref is not present for each result.
          */
@@ -142,14 +108,6 @@ export namespace Components {
         "customStylesForResults": | string
     | Record<string, Record<string, string>>
     | undefined;
-        /**
-          * Should an ad be placed at the end of the results.
-         */
-        "placeAdAtEnd": boolean;
-        /**
-          * Should an ad be placed at the start of the results.
-         */
-        "placeAdAtStart": boolean;
         /**
           * The placement of the image for each result.
          */
@@ -165,22 +123,34 @@ export namespace Components {
      * It is consumed within the `searchcraft-input-form` component.
      */
     interface SearchcraftButton {
+        /**
+          * Whether the button is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Controls the visual representation of the button.
+         */
+        "hierarchy"?: 'primary' | 'tertiary';
         /**
           * The icon element.
          */
-        "iconElement"?: Element;
+        "icon"?: Element;
         /**
           * Should the button only display an icon.
          */
-        "iconOnly": boolean;
+        "iconOnly"?: boolean;
         /**
           * The position of the icon.
          */
-        "iconPosition": string;
+        "iconPosition"?: 'left' | 'right';
         /**
           * The label for the button.
          */
         "label": string;
+        /**
+          * The type of the button.
+         */
+        "type"?: 'submit' | 'reset' | 'button';
     }
     /**
      * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
@@ -243,7 +213,7 @@ export namespace Components {
      * ```js
      * // index.js
      * const searchInputForm = document.querySelector('searchcraft-input-form');
-     * seardchInputForm.config = {
+     * searchInputForm.config = {
      *   index: [],
      *   readKey: '',
      *   endpointUrl: '',
@@ -302,13 +272,28 @@ export namespace Components {
         "inputLabelClassName"?: string | undefined;
         "label": string;
     }
+    /**
+     * This web component is designed to facilitate pagination of search results.
+     * Once a query is submitted, calculates the number for pages.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-pagination />
+     * ```
+     */
+    interface SearchcraftPagination {
+        /**
+          * The custom styles object.
+         */
+        "customStyles"?: string;
+    }
     /**
      * Renders a button which, when clicked, turns on popover visibility.
      */
     interface SearchcraftPopoverButton {
     }
     /**
-     * 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.
+     * 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.
      * ## Usage
      * ```html
      * <!-- index.html -->
@@ -363,56 +348,128 @@ export namespace Components {
           * The document position relative to the search results (For Measure)
          */
         "documentPosition": number;
+        "item": SearchClientResponseItem | undefined;
+        "popoverResultMappings": PopoverResultMappings | undefined;
+    }
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface SearchcraftPopoverListItemAd {
+        "adClientResponseItem"?: AdClientResponseItem;
+    }
+    /**
+     * This web component is designed to display a list of results within a popover interface.
+     * It is consumed within the `searchcraft-popover-form` component.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-popover-list-view />
+     * ```
+     */
+    interface SearchcraftPopoverListView {
+        "adClientResponseItems": AdClientResponseItem[] | undefined;
         /**
-          * The link href
-         */
-        "href": string | undefined;
-        /**
-          * The image alt tag.
+          * The mappings that define how the data in the documents are mapped to the list-view-item elements.
          */
-        "imageAlt": string | undefined;
+        "popoverResultMappings": PopoverResultMappings | undefined;
         /**
-          * The source of the image. If not included, no item will be rendered.
+          * The items to render in the list view.
          */
-        "imageSrc": string | undefined;
+        "searchClientResponseItems": SearchClientResponseItem[] | undefined;
+        "searchResultsPage": number;
+        "searchResultsPerPage": number;
+    }
+    /**
+     * This web component is designed to display the number of results returned from a search query.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <script>
+     *  const resultsInfo = document.querySelector('searchcraft-results-info');
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * </script>
+     * <searchcraft-results-info />
+     * ```
+     */
+    interface SearchcraftResultsInfo {
         /**
-          * The result subtitle
+          * The custom formatter for the resulting string.
+          * @example ```ts  resultsInfo.customFormatter = (range, count, responseTime) =>    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`; ```
          */
-        "subtitleContent": string | undefined;
+        "customFormatter"?: (
+    range: [string, string],
+    count: string,
+    responseTime: string,
+  ) => void;
         /**
-          * The result title
+          * The custom styles object.
          */
-        "titleContent": string | undefined;
+        "customStyles"?: string;
     }
     /**
-     * This web component is designed to display a list of results within a popover interface.
-     * It is consumed within the `searchcraft-popover-form` component.
+     * This web component is designed to choose the number of search results displayed.
      * ## Usage
      * ```html
      * <!-- index.html -->
-     * <searchcraft-popover-list-view />
+     * <searchcraft-search-results-per-page increment="20" />
      * ```
      */
-    interface SearchcraftPopoverListView {
+    interface SearchcraftSearchResultsPerPage {
         /**
-          * The documents to render in the list view.
+          * The custom styles object.
          */
-        "documents": Record<string, unknown>[] | undefined;
+        "customStyles"?: string;
         /**
-          * The mappings that define how the data in the documents are mapped to the list-view-item elements.
+          * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
          */
-        "popoverResultMappings": PopoverResultMappings | undefined;
+        "increment": string | number;
     }
     /**
-     * This web component is designed to display the number of results returned from a search query.
-     * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
+     * This web component is designed to allow users to select between a group of options.
      * ## Usage
      * ```html
      * <!-- index.html -->
-     * <searchcraft-results-info />
+     * <searchcraft-select
+     *  inputId="searchcraft-select"
+     *  name="searchcraft-select"
+     *  options="[{ label: 'label', value: 'value' }]"
+     * />
      * ```
      */
-    interface SearchcraftResultsInfo {
+    interface SearchcraftSelect {
+        /**
+          * The caption displayed below the select input.
+         */
+        "caption"?: string;
+        /**
+          * A custom styles object.
+         */
+        "customStyles"?: string;
+        /**
+          * Whether the select input is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The ID for the select input.
+         */
+        "inputId": string;
+        /**
+          * The label of the select input.
+         */
+        "label"?: string;
+        /**
+          * The ID for the label of the select input.
+         */
+        "labelId"?: string;
+        /**
+          * The name of the select input.
+         */
+        "name": string;
+        /**
+          * The options for the select input.
+         */
+        "options": SearchcraftSelectOption[] | string;
     }
     /**
      * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
@@ -437,7 +494,24 @@ export namespace Components {
          */
         "min": number;
     }
+    /**
+     * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+     * It does not render anything visible, its only function is to manage the css styles on the page.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-theme theme="light" custom-theme="{}" />
+     * ```
+     */
     interface SearchcraftTheme {
+        /**
+          * The custom theme configuration object.
+         */
+        "customTheme": string;
+        /**
+          * The name of the theme.
+         */
+        "theme": string;
     }
     /**
      * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
@@ -470,6 +544,10 @@ export interface SearchcraftInputFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSearchcraftInputFormElement;
 }
+export interface SearchcraftSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSearchcraftSelectElement;
+}
 export interface SearchcraftSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSearchcraftSliderElement;
@@ -490,6 +568,15 @@ declare global {
         prototype: HTMLSearchcraftBaseSearchResultElement;
         new (): HTMLSearchcraftBaseSearchResultElement;
     };
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface HTMLSearchcraftBaseSearchResultAdElement extends Components.SearchcraftBaseSearchResultAd, HTMLStencilElement {
+    }
+    var HTMLSearchcraftBaseSearchResultAdElement: {
+        prototype: HTMLSearchcraftBaseSearchResultAdElement;
+        new (): HTMLSearchcraftBaseSearchResultAdElement;
+    };
     interface HTMLSearchcraftBaseSearchResultsElementEventMap {
         "noResults": void;
     }
@@ -637,7 +724,7 @@ declare global {
      * ```js
      * // index.js
      * const searchInputForm = document.querySelector('searchcraft-input-form');
-     * seardchInputForm.config = {
+     * searchInputForm.config = {
      *   index: [],
      *   readKey: '',
      *   endpointUrl: '',
@@ -675,6 +762,21 @@ declare global {
         prototype: HTMLSearchcraftInputLabelElement;
         new (): HTMLSearchcraftInputLabelElement;
     };
+    /**
+     * This web component is designed to facilitate pagination of search results.
+     * Once a query is submitted, calculates the number for pages.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-pagination />
+     * ```
+     */
+    interface HTMLSearchcraftPaginationElement extends Components.SearchcraftPagination, HTMLStencilElement {
+    }
+    var HTMLSearchcraftPaginationElement: {
+        prototype: HTMLSearchcraftPaginationElement;
+        new (): HTMLSearchcraftPaginationElement;
+    };
     /**
      * Renders a button which, when clicked, turns on popover visibility.
      */
@@ -685,7 +787,7 @@ declare global {
         new (): HTMLSearchcraftPopoverButtonElement;
     };
     /**
-     * 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.
+     * 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.
      * ## Usage
      * ```html
      * <!-- index.html -->
@@ -725,6 +827,15 @@ declare global {
         prototype: HTMLSearchcraftPopoverListItemElement;
         new (): HTMLSearchcraftPopoverListItemElement;
     };
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface HTMLSearchcraftPopoverListItemAdElement extends Components.SearchcraftPopoverListItemAd, HTMLStencilElement {
+    }
+    var HTMLSearchcraftPopoverListItemAdElement: {
+        prototype: HTMLSearchcraftPopoverListItemAdElement;
+        new (): HTMLSearchcraftPopoverListItemAdElement;
+    };
     /**
      * This web component is designed to display a list of results within a popover interface.
      * It is consumed within the `searchcraft-popover-form` component.
@@ -742,10 +853,14 @@ declare global {
     };
     /**
      * This web component is designed to display the number of results returned from a search query.
-     * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
      * ## Usage
      * ```html
      * <!-- index.html -->
+     * <script>
+     *  const resultsInfo = document.querySelector('searchcraft-results-info');
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * </script>
      * <searchcraft-results-info />
      * ```
      */
@@ -755,6 +870,49 @@ declare global {
         prototype: HTMLSearchcraftResultsInfoElement;
         new (): HTMLSearchcraftResultsInfoElement;
     };
+    /**
+     * This web component is designed to choose the number of search results displayed.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-search-results-per-page increment="20" />
+     * ```
+     */
+    interface HTMLSearchcraftSearchResultsPerPageElement extends Components.SearchcraftSearchResultsPerPage, HTMLStencilElement {
+    }
+    var HTMLSearchcraftSearchResultsPerPageElement: {
+        prototype: HTMLSearchcraftSearchResultsPerPageElement;
+        new (): HTMLSearchcraftSearchResultsPerPageElement;
+    };
+    interface HTMLSearchcraftSelectElementEventMap {
+        "selectChange": string;
+    }
+    /**
+     * This web component is designed to allow users to select between a group of options.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-select
+     *  inputId="searchcraft-select"
+     *  name="searchcraft-select"
+     *  options="[{ label: 'label', value: 'value' }]"
+     * />
+     * ```
+     */
+    interface HTMLSearchcraftSelectElement extends Components.SearchcraftSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSearchcraftSelectElementEventMap>(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent<HTMLSearchcraftSelectElementEventMap[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 HTMLSearchcraftSelectElementEventMap>(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent<HTMLSearchcraftSelectElementEventMap[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 HTMLSearchcraftSelectElement: {
+        prototype: HTMLSearchcraftSelectElement;
+        new (): HTMLSearchcraftSelectElement;
+    };
     interface HTMLSearchcraftSliderElementEventMap {
         "rangeChanged": any;
     }
@@ -777,6 +935,15 @@ declare global {
         prototype: HTMLSearchcraftSliderElement;
         new (): HTMLSearchcraftSliderElement;
     };
+    /**
+     * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+     * It does not render anything visible, its only function is to manage the css styles on the page.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-theme theme="light" custom-theme="{}" />
+     * ```
+     */
     interface HTMLSearchcraftThemeElement extends Components.SearchcraftTheme, HTMLStencilElement {
     }
     var HTMLSearchcraftThemeElement: {
@@ -806,6 +973,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "searchcraft-base-search-result": HTMLSearchcraftBaseSearchResultElement;
+        "searchcraft-base-search-result-ad": HTMLSearchcraftBaseSearchResultAdElement;
         "searchcraft-base-search-results": HTMLSearchcraftBaseSearchResultsElement;
         "searchcraft-button": HTMLSearchcraftButtonElement;
         "searchcraft-error-message": HTMLSearchcraftErrorMessageElement;
@@ -813,11 +981,15 @@ declare global {
         "searchcraft-filter-panel": HTMLSearchcraftFilterPanelElement;
         "searchcraft-input-form": HTMLSearchcraftInputFormElement;
         "searchcraft-input-label": HTMLSearchcraftInputLabelElement;
+        "searchcraft-pagination": HTMLSearchcraftPaginationElement;
         "searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
         "searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
         "searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
+        "searchcraft-popover-list-item-ad": HTMLSearchcraftPopoverListItemAdElement;
         "searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
         "searchcraft-results-info": HTMLSearchcraftResultsInfoElement;
+        "searchcraft-search-results-per-page": HTMLSearchcraftSearchResultsPerPageElement;
+        "searchcraft-select": HTMLSearchcraftSelectElement;
         "searchcraft-slider": HTMLSearchcraftSliderElement;
         "searchcraft-theme": HTMLSearchcraftThemeElement;
         "searchcraft-toggle-button": HTMLSearchcraftToggleButtonElement;
@@ -830,18 +1002,6 @@ declare namespace LocalJSX {
      * It is consumed within the `searchcraft-base-search-results` component.
      */
     interface SearchcraftBaseSearchResult {
-        /**
-          * The body content.
-         */
-        "bodyContent"?: string | undefined;
-        /**
-          * The link for the button rendered when containerHref is not present.
-         */
-        "buttonHref"?: string | undefined;
-        /**
-          * The label for the button rendered when containerHref is not present.
-         */
-        "buttonLabel"?: string | undefined;
         /**
           * The relationship between the current document and the link for the button rendered when containerHref is not present.
          */
@@ -850,10 +1010,6 @@ declare namespace LocalJSX {
           * Where to open the link for the button rendered when containerHref is not present.
          */
         "buttonTarget"?: '_blank' | '_self' | '_top' | '_parent';
-        /**
-          * The link for the containing element.
-         */
-        "containerHref"?: string | undefined;
         /**
           * The relationship between the current document and the link for the containing element.
          */
@@ -870,30 +1026,18 @@ declare namespace LocalJSX {
           * The position in the document. Used with the "document_clicked" measure event.
          */
         "documentPosition"?: number;
-        /**
-          * The footer content.
-         */
-        "footerContent"?: string | undefined;
-        /**
-          * The image alternative text.
-         */
-        "imageAlt"?: string | undefined;
         /**
           * The placement of the image.
          */
         "imagePlacement"?: 'left' | 'right';
-        /**
-          * The image source.
-         */
-        "imageSrc"?: string | undefined;
-        /**
-          * The subtitle content.
-         */
-        "subtitleContent"?: string | undefined;
-        /**
-          * The title content.
-         */
-        "titleContent"?: string | undefined;
+        "item"?: SearchClientResponseItem | undefined;
+        "searchResultMappings"?: SearchResultMappings | undefined;
+    }
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface SearchcraftBaseSearchResultAd {
+        "adClientResponseItem"?: AdClientResponseItem;
     }
     /**
      * This web component is responsible for displaying the results of a search query.
@@ -924,10 +1068,6 @@ declare namespace LocalJSX {
      * ```
      */
     interface SearchcraftBaseSearchResults {
-        /**
-          * How often ads are injected.
-         */
-        "adInterval"?: number;
         /**
           * The label for the button rendered when containerHref is not present for each result.
          */
@@ -958,14 +1098,6 @@ declare namespace LocalJSX {
           * When no results are returned.
          */
         "onNoResults"?: (event: SearchcraftBaseSearchResultsCustomEvent<void>) => void;
-        /**
-          * Should an ad be placed at the end of the results.
-         */
-        "placeAdAtEnd"?: boolean;
-        /**
-          * Should an ad be placed at the start of the results.
-         */
-        "placeAdAtStart"?: boolean;
         /**
           * The placement of the image for each result.
          */
@@ -981,10 +1113,18 @@ declare namespace LocalJSX {
      * It is consumed within the `searchcraft-input-form` component.
      */
     interface SearchcraftButton {
+        /**
+          * Whether the button is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Controls the visual representation of the button.
+         */
+        "hierarchy"?: 'primary' | 'tertiary';
         /**
           * The icon element.
          */
-        "iconElement"?: Element;
+        "icon"?: Element;
         /**
           * Should the button only display an icon.
          */
@@ -992,15 +1132,19 @@ declare namespace LocalJSX {
         /**
           * The position of the icon.
          */
-        "iconPosition"?: string;
+        "iconPosition"?: 'left' | 'right';
         /**
           * The label for the button.
          */
         "label"?: string;
         /**
-          * When the button is clicked.
+          * The event fired when the button is clicked.
          */
         "onButtonClick"?: (event: SearchcraftButtonCustomEvent<void>) => void;
+        /**
+          * The type of the button.
+         */
+        "type"?: 'submit' | 'reset' | 'button';
     }
     /**
      * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
@@ -1067,7 +1211,7 @@ declare namespace LocalJSX {
      * ```js
      * // index.js
      * const searchInputForm = document.querySelector('searchcraft-input-form');
-     * seardchInputForm.config = {
+     * searchInputForm.config = {
      *   index: [],
      *   readKey: '',
      *   endpointUrl: '',
@@ -1150,13 +1294,28 @@ declare namespace LocalJSX {
         "inputLabelClassName"?: string | undefined;
         "label"?: string;
     }
+    /**
+     * This web component is designed to facilitate pagination of search results.
+     * Once a query is submitted, calculates the number for pages.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-pagination />
+     * ```
+     */
+    interface SearchcraftPagination {
+        /**
+          * The custom styles object.
+         */
+        "customStyles"?: string;
+    }
     /**
      * Renders a button which, when clicked, turns on popover visibility.
      */
     interface SearchcraftPopoverButton {
     }
     /**
-     * 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.
+     * 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.
      * ## Usage
      * ```html
      * <!-- index.html -->
@@ -1211,56 +1370,132 @@ declare namespace LocalJSX {
           * The document position relative to the search results (For Measure)
          */
         "documentPosition"?: number;
+        "item"?: SearchClientResponseItem | undefined;
+        "popoverResultMappings"?: PopoverResultMappings | undefined;
+    }
+    /**
+     * A single list item rendered in a searchcraft-popover-list-view.
+     */
+    interface SearchcraftPopoverListItemAd {
+        "adClientResponseItem"?: AdClientResponseItem;
+    }
+    /**
+     * This web component is designed to display a list of results within a popover interface.
+     * It is consumed within the `searchcraft-popover-form` component.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-popover-list-view />
+     * ```
+     */
+    interface SearchcraftPopoverListView {
+        "adClientResponseItems"?: AdClientResponseItem[] | undefined;
         /**
-          * The link href
-         */
-        "href"?: string | undefined;
-        /**
-          * The image alt tag.
+          * The mappings that define how the data in the documents are mapped to the list-view-item elements.
          */
-        "imageAlt"?: string | undefined;
+        "popoverResultMappings"?: PopoverResultMappings | undefined;
         /**
-          * The source of the image. If not included, no item will be rendered.
+          * The items to render in the list view.
          */
-        "imageSrc"?: string | undefined;
+        "searchClientResponseItems"?: SearchClientResponseItem[] | undefined;
+        "searchResultsPage": number;
+        "searchResultsPerPage": number;
+    }
+    /**
+     * This web component is designed to display the number of results returned from a search query.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <script>
+     *  const resultsInfo = document.querySelector('searchcraft-results-info');
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * </script>
+     * <searchcraft-results-info />
+     * ```
+     */
+    interface SearchcraftResultsInfo {
         /**
-          * The result subtitle
+          * The custom formatter for the resulting string.
+          * @example ```ts  resultsInfo.customFormatter = (range, count, responseTime) =>    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`; ```
          */
-        "subtitleContent"?: string | undefined;
+        "customFormatter"?: (
+    range: [string, string],
+    count: string,
+    responseTime: string,
+  ) => void;
         /**
-          * The result title
+          * The custom styles object.
          */
-        "titleContent"?: string | undefined;
+        "customStyles"?: string;
     }
     /**
-     * This web component is designed to display a list of results within a popover interface.
-     * It is consumed within the `searchcraft-popover-form` component.
+     * This web component is designed to choose the number of search results displayed.
      * ## Usage
      * ```html
      * <!-- index.html -->
-     * <searchcraft-popover-list-view />
+     * <searchcraft-search-results-per-page increment="20" />
      * ```
      */
-    interface SearchcraftPopoverListView {
+    interface SearchcraftSearchResultsPerPage {
         /**
-          * The documents to render in the list view.
+          * The custom styles object.
          */
-        "documents"?: Record<string, unknown>[] | undefined;
+        "customStyles"?: string;
         /**
-          * The mappings that define how the data in the documents are mapped to the list-view-item elements.
+          * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
          */
-        "popoverResultMappings"?: PopoverResultMappings | undefined;
+        "increment"?: string | number;
     }
     /**
-     * This web component is designed to display the number of results returned from a search query.
-     * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
+     * This web component is designed to allow users to select between a group of options.
      * ## Usage
      * ```html
      * <!-- index.html -->
-     * <searchcraft-results-info />
+     * <searchcraft-select
+     *  inputId="searchcraft-select"
+     *  name="searchcraft-select"
+     *  options="[{ label: 'label', value: 'value' }]"
+     * />
      * ```
      */
-    interface SearchcraftResultsInfo {
+    interface SearchcraftSelect {
+        /**
+          * The caption displayed below the select input.
+         */
+        "caption"?: string;
+        /**
+          * A custom styles object.
+         */
+        "customStyles"?: string;
+        /**
+          * Whether the select input is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The ID for the select input.
+         */
+        "inputId": string;
+        /**
+          * The label of the select input.
+         */
+        "label"?: string;
+        /**
+          * The ID for the label of the select input.
+         */
+        "labelId"?: string;
+        /**
+          * The name of the select input.
+         */
+        "name": string;
+        /**
+          * The event fired when the select is changed.
+         */
+        "onSelectChange"?: (event: SearchcraftSelectCustomEvent<string>) => void;
+        /**
+          * The options for the select input.
+         */
+        "options"?: SearchcraftSelectOption[] | string;
     }
     /**
      * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
@@ -1289,7 +1524,24 @@ declare namespace LocalJSX {
          */
         "onRangeChanged"?: (event: SearchcraftSliderCustomEvent<any>) => void;
     }
+    /**
+     * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+     * It does not render anything visible, its only function is to manage the css styles on the page.
+     * ## Usage
+     * ```html
+     * <!-- index.html -->
+     * <searchcraft-theme theme="light" custom-theme="{}" />
+     * ```
+     */
     interface SearchcraftTheme {
+        /**
+          * The custom theme configuration object.
+         */
+        "customTheme"?: string;
+        /**
+          * The name of the theme.
+         */
+        "theme"?: string;
     }
     /**
      * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
@@ -1311,6 +1563,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "searchcraft-base-search-result": SearchcraftBaseSearchResult;
+        "searchcraft-base-search-result-ad": SearchcraftBaseSearchResultAd;
         "searchcraft-base-search-results": SearchcraftBaseSearchResults;
         "searchcraft-button": SearchcraftButton;
         "searchcraft-error-message": SearchcraftErrorMessage;
@@ -1318,11 +1571,15 @@ declare namespace LocalJSX {
         "searchcraft-filter-panel": SearchcraftFilterPanel;
         "searchcraft-input-form": SearchcraftInputForm;
         "searchcraft-input-label": SearchcraftInputLabel;
+        "searchcraft-pagination": SearchcraftPagination;
         "searchcraft-popover-button": SearchcraftPopoverButton;
         "searchcraft-popover-form": SearchcraftPopoverForm;
         "searchcraft-popover-list-item": SearchcraftPopoverListItem;
+        "searchcraft-popover-list-item-ad": SearchcraftPopoverListItemAd;
         "searchcraft-popover-list-view": SearchcraftPopoverListView;
         "searchcraft-results-info": SearchcraftResultsInfo;
+        "searchcraft-search-results-per-page": SearchcraftSearchResultsPerPage;
+        "searchcraft-select": SearchcraftSelect;
         "searchcraft-slider": SearchcraftSlider;
         "searchcraft-theme": SearchcraftTheme;
         "searchcraft-toggle-button": SearchcraftToggleButton;
@@ -1338,6 +1595,10 @@ declare module "@stencil/core" {
              * It is consumed within the `searchcraft-base-search-results` component.
              */
             "searchcraft-base-search-result": LocalJSX.SearchcraftBaseSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultElement>;
+            /**
+             * A single list item rendered in a searchcraft-popover-list-view.
+             */
+            "searchcraft-base-search-result-ad": LocalJSX.SearchcraftBaseSearchResultAd & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultAdElement>;
             /**
              * 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.
@@ -1419,7 +1680,7 @@ declare module "@stencil/core" {
              * ```js
              * // index.js
              * const searchInputForm = document.querySelector('searchcraft-input-form');
-             * seardchInputForm.config = {
+             * searchInputForm.config = {
              *   index: [],
              *   readKey: '',
              *   endpointUrl: '',
@@ -1439,12 +1700,22 @@ 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.
+             * ## Usage
+             * ```html
+             * <!-- index.html -->
+             * <searchcraft-pagination />
+             * ```
+             */
+            "searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
             /**
              * Renders a button which, when clicked, turns on popover visibility.
              */
             "searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
             /**
-             * 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.
+             * 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.
              * ## Usage
              * ```html
              * <!-- index.html -->
@@ -1474,6 +1745,10 @@ declare module "@stencil/core" {
              * A single list item rendered in a searchcraft-popover-list-view.
              */
             "searchcraft-popover-list-item": LocalJSX.SearchcraftPopoverListItem & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListItemElement>;
+            /**
+             * A single list item rendered in a searchcraft-popover-list-view.
+             */
+            "searchcraft-popover-list-item-ad": LocalJSX.SearchcraftPopoverListItemAd & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListItemAdElement>;
             /**
              * This web component is designed to display a list of results within a popover interface.
              * It is consumed within the `searchcraft-popover-form` component.
@@ -1486,20 +1761,55 @@ 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.
-             * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
              * ## Usage
              * ```html
              * <!-- index.html -->
+             * <script>
+             *  const resultsInfo = document.querySelector('searchcraft-results-info');
+             *  resultsInfo.customFormatter = (range, count, responseTime) =>
+             *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+             * </script>
              * <searchcraft-results-info />
              * ```
              */
             "searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
+            /**
+             * This web component is designed to choose the number of search results displayed.
+             * ## Usage
+             * ```html
+             * <!-- index.html -->
+             * <searchcraft-search-results-per-page increment="20" />
+             * ```
+             */
+            "searchcraft-search-results-per-page": LocalJSX.SearchcraftSearchResultsPerPage & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsPerPageElement>;
+            /**
+             * This web component is designed to allow users to select between a group of options.
+             * ## Usage
+             * ```html
+             * <!-- index.html -->
+             * <searchcraft-select
+             *  inputId="searchcraft-select"
+             *  name="searchcraft-select"
+             *  options="[{ label: 'label', value: 'value' }]"
+             * />
+             * ```
+             */
+            "searchcraft-select": LocalJSX.SearchcraftSelect & JSXBase.HTMLAttributes<HTMLSearchcraftSelectElement>;
             /**
              * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
              * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
              * It is consumed by the `searchcraft-filter-panel` component.
              */
             "searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
+            /**
+             * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+             * It does not render anything visible, its only function is to manage the css styles on the page.
+             * ## Usage
+             * ```html
+             * <!-- index.html -->
+             * <searchcraft-theme theme="light" custom-theme="{}" />
+             * ```
+             */
             "searchcraft-theme": LocalJSX.SearchcraftTheme & JSXBase.HTMLAttributes<HTMLSearchcraftThemeElement>;
             /**
              * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.