@searchcraft/javascript-sdk 0.10.0 → 0.10.1

package/dist/types/components.d.ts

@@ -5,9 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AdClientResponseItem, FilterItem, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchcraftAdSource, SearchcraftCore, SearchResultTemplate, SearchResultTemplateData } from "@searchcraft/core";
+import { AdClientResponseItem, FilterItem, PopoverButtonTemplate, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchcraftAdSource, SearchcraftCore, SearchResultTemplate, SearchResultTemplateData } from "@searchcraft/core";
 import { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
-export { AdClientResponseItem, FilterItem, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchcraftAdSource, SearchcraftCore, SearchResultTemplate, SearchResultTemplateData } from "@searchcraft/core";
+export { AdClientResponseItem, FilterItem, PopoverButtonTemplate, PopoverResultMappings, ResultsInfoTemplate, SearchClientResponseItem, SearchcraftAdSource, SearchcraftCore, SearchResultTemplate, SearchResultTemplateData } from "@searchcraft/core";
 export { SearchcraftSelectOption } from "./components/searchcraft-select/searchcraft-select";
 export namespace Components {
     /**
@@ -85,10 +85,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
@@ -118,10 +118,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
@@ -172,10 +172,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
@@ -192,36 +192,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
@@ -291,10 +320,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
@@ -314,17 +343,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;
     }
@@ -348,10 +378,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
@@ -395,10 +425,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
@@ -482,10 +512,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
@@ -617,10 +647,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
@@ -655,10 +685,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
@@ -699,10 +729,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
@@ -723,24 +753,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>
      * ```
@@ -751,12 +797,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
@@ -805,10 +860,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
@@ -828,12 +883,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 {
     }
@@ -852,10 +909,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
@@ -899,10 +956,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
@@ -972,10 +1029,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
@@ -1024,6 +1081,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;
@@ -1121,10 +1179,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
@@ -1154,10 +1212,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
@@ -1220,10 +1278,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
@@ -1240,36 +1298,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
@@ -1339,10 +1426,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
@@ -1362,17 +1449,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;
     }
@@ -1396,10 +1484,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
@@ -1443,10 +1531,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
@@ -1538,10 +1626,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
@@ -1583,6 +1671,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;
@@ -1636,10 +1725,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
@@ -1664,10 +1753,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
@@ -1690,10 +1779,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
@@ -1709,35 +1798,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
@@ -1771,10 +1880,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
@@ -1794,12 +1903,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>;
             /**
@@ -1808,10 +1919,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
@@ -1850,10 +1961,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
@@ -1886,10 +1997,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