@nanoporetech-digital/components 8.0.0-alpha.7 → 8.0.0-alpha.9

package/dist/types/components/date-input/date-input.d.ts

@@ -5,8 +5,7 @@ import type { Dropdown } from '../dropdown/dropdown';
 import type { DateInputChangeEventDetail, DuetLocalizedText, LocalDateOpts } from './date-input-interface';
 import type { DateDisabledPredicate } from '../date-picker/date-picker-interface';
 /**
- * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
- * It has specific options for localisation, date formatting and validation.
+ * Enables date selection and input in a form.
  *
  * @version 1.0.0
  * @status deprecated

package/dist/types/components/date-picker/date-picker-interface.d.ts

@@ -5,21 +5,21 @@ export type PickerChangeEvent = {
 
 export type DateDisabledPredicate = (date: Date) => boolean;
 
-type oneToNine = 1|2|3|4|5|6|7|8|9
-type zeroToNine = 0|1|2|3|4|5|6|7|8|9
+type oneToNine = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type zeroToNine = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 /**
  * Years
  */
-type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`
+type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`;
 /**
  * Months
  */
-type MM = `0${oneToNine}` | `1${0|1|2}`
+type MM = `0${oneToNine}` | `1${0 | 1 | 2}`;
 /**
  * Days
  */
-type DD = `${0}${oneToNine}` | `${1|2}${zeroToNine}` | `3${0|1}`
+type DD = `${0}${oneToNine}` | `${1 | 2}${zeroToNine}` | `3${0 | 1}`;
 /**
  * YYYYMMDD
  */
-export type RawDateString = `${YYYY}-${MM}-${DD}`;
+export type RawDateString = `${YYYY}-${MM}-${DD}`;

package/dist/types/components/feature-box/feature-box.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Highlights a key message on a landing page.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ *
+ * @slot img - The image of the card. Appears first.
+ * @slot content - The main content of the card. Suitable for headings, paragraphs, and other text elements.
+ */
+export declare class NanoFeatureBox {
+    /** The position of the image of the feature-box (`start` being left on a l2r page) */
+    imgPosition?: 'start' | 'end';
+}

package/dist/types/components/global-nav/global-nav.d.ts

@@ -76,6 +76,11 @@ export declare class GlobalNav implements ComponentInterface {
     private _mainMenuBar;
     get mainMenuBar(): HTMLElement;
     set mainMenuBar(el: HTMLElement);
+    /**
+     * Manually triggers the main menu bar resize behaviour.
+     * This can be useful if you append new children to the global-nav
+     */
+    triggerResize(): Promise<void>;
     shouldResize: boolean;
     breakpoint: 0 | 1 | 2 | 3 | 4;
     breakpointChanged(): void;

package/dist/types/components/in-page-nav/in-page-nav.d.ts

@@ -31,6 +31,7 @@ export declare class NanoInPageNav implements ComponentInterface {
      */
     private updateNavForBreakpoint;
     private initStickiness;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Transforms the desktop navigation into a mobile one by wrapping the <ul> elements in collapsible nano-details elements.

package/dist/types/components/menu-drawer/menu-drawer.d.ts

@@ -1,23 +1,22 @@
 /**
- * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
- * Shows menu item logos only on minimised, expands to show entire menu item.
- * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
- * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+ *
+ * Display navigation items in a collapsible drawer at the side of a UI.
+ *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot foot - nav items to be placed at the bottom of the drawer
  * @slot - default slot for nav items
  */
 export declare class MenuDrawer {
     private containerDiv;
     private contentDiv;
-    private measureEle;
     private globalNav;
     private children;
-    private io;
-    private currHeight;
+    private ro;
+    private slotCtrl;
     private el;
     reset: boolean;
-    widthOk: boolean;
-    heightOk: boolean;
     isLoading: boolean;
     hide: boolean;
     /**
@@ -25,32 +24,18 @@ export declare class MenuDrawer {
      */
     open: boolean;
     /**
-     * Save open state to localStorage
-     */
-    saveState: boolean;
-    /**
-     * Screen width to hide the menu drawer and move the items into the nano-global-nav
+     * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
      */
     hideWidth: number;
-    /**
-     * Should element hide and move items into the nano-global-nav when items are cut off
-     * (this will only work when nano-menu-drawer is displayed at full screen)
-     */
-    hideHeight: boolean;
     cancelNavItemEvents(ev: CustomEvent): void;
     openChange(): void;
-    widthChange(): void;
-    hideHeightChange(): void;
     private moveItemsToGlobalNav;
     private moveItemsToDrawer;
-    private onWindowResize;
+    private onResize;
     private toggle;
-    private onToggleKeyDown;
-    private attachIO;
-    handleGlobalNavReady(e: CustomEvent & {
-        target: HTMLNanoGlobalNavElement;
-    }): void;
+    private attachRO;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/nav-item/nav-item.d.ts

@@ -13,8 +13,15 @@ import type { NavItemEventDetail } from './nav-item-interface';
  * @part trigger--button - the controlling `<button>` element
  * @part trigger--anchor - the controlling <a> element
  * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
- * @part secondary-wrapper - the div surrounding slotted secondary content
- * @part secondary-mask - the div that is added when secondary content is shown
+ * @part label - the label text of the nav item
+ * @part modal - the div that contains the secondary content panel
+ * @part modal--open - the div that contains the secondary content panel when open
+ * @part modal--close - the div that contains the secondary content panel when closed
+ * @part modal-content - the div that contains the secondary content panel content
+ * @part modal-content--open - the div that contains the secondary content panel content when open
+ * @part modal-mask - the div that covers the screen when the secondary content panel is open
+ * @part close-button - the div that contains the close button for the secondary content panel
+ * @part close-button-icon - the icon inside the close button for the secondary content panel
  *
  * @version 1.0.0
  * @status stable
@@ -40,8 +47,6 @@ export declare class NavItem implements ComponentInterface {
     checkbox: boolean;
     /** Whether secondary menus should close on blur */
     closeOnBlur: boolean;
-    /** Will show an indicator badge - only when placed in a nano-menu-draw */
-    notification: boolean;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose: EventEmitter<NavItemEventDetail>;
     /** Emitted when the nav item opens it's secondary navigation. */

package/dist/types/components/option/option.d.ts

@@ -34,7 +34,7 @@ export declare class Option implements OptionInterface {
      */
     disabled: boolean;
     /** You can add extra meta for this option. When displayed in a list, users
-     * search / filter via extra related terms. Another usecase is 'endonyms'
+     * search / filter via extra related terms.
      */
     filterMeta: string;
     /** Setting an href will render an `<a>` element */

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -3,6 +3,9 @@ import { ResizeStateChangeEventDetail } from './resize-observe-interface';
 /**
  * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
  *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot - Main slot for any content.
  * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
  * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off

package/dist/types/components/slides/slides-interface.d.ts

@@ -28,7 +28,7 @@ export interface Flickity
 export type FlickityOptions = Options & {
   fullscreen?: boolean;
   fade?: boolean;
-}
+};
 
 export type DragEvent = TouchDragEvent | PointerDragEvent;
 

package/dist/types/components.d.ts

@@ -869,8 +869,7 @@ export namespace Components {
         "type": 'select' | 'selectMulti' | 'input';
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -1306,6 +1305,19 @@ export namespace Components {
          */
         "tetherTo": HTMLElement;
     }
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface NanoFeatureBox {
+        /**
+          * The position of the image of the feature-box (`start` being left on a l2r page)
+          * @default 'start'
+         */
+        "imgPosition"?: 'start' | 'end';
+    }
     /**
      * A toolbox to expose a form's data model and validation state
      * @version 3.0.0
@@ -1595,6 +1607,10 @@ export namespace Components {
           * Send the current search term and selected index to a nested `nano-global-search-results`
          */
         "submitSearch": () => Promise<void>;
+        /**
+          * Manually triggers the main menu bar resize behaviour.  This can be useful if you append new children to the global-nav
+         */
+        "triggerResize": () => Promise<void>;
     }
     /**
      * Nanopore Global Search results component
@@ -2255,19 +2271,13 @@ export namespace Components {
         "type": 'menu' | 'listbox' | 'nav';
     }
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoMenuDrawer {
         /**
-          * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
-          * @default true
-         */
-        "hideHeight": boolean;
-        /**
-          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+          * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
           * @default 576
          */
         "hideWidth": number;
@@ -2276,11 +2286,6 @@ export namespace Components {
           * @default true
          */
         "open": boolean;
-        /**
-          * Save open state to localStorage
-          * @default true
-         */
-        "saveState": boolean;
     }
     /**
      * Show more or less from a collection of items.
@@ -2334,11 +2339,6 @@ export namespace Components {
           * @default null
          */
         "href": string;
-        /**
-          * Will show an indicator badge - only when placed in a nano-menu-draw
-          * @default false
-         */
-        "notification": boolean;
         /**
           * Whether a secondary menu should be or is currently open
           * @default false
@@ -2371,7 +2371,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms.
           * @default ''
          */
         "filterMeta": string;
@@ -2536,6 +2536,8 @@ export namespace Components {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoResizeObserve {
         /**
@@ -3844,8 +3846,7 @@ declare global {
         "nanoValidate": ControlValidityEventDetail;
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -3992,6 +3993,18 @@ declare global {
         prototype: HTMLNanoDropdownElement;
         new (): HTMLNanoDropdownElement;
     };
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface HTMLNanoFeatureBoxElement extends Components.NanoFeatureBox, HTMLStencilElement {
+    }
+    var HTMLNanoFeatureBoxElement: {
+        prototype: HTMLNanoFeatureBoxElement;
+        new (): HTMLNanoFeatureBoxElement;
+    };
     interface HTMLNanoFieldValidatorElementEventMap {
         "nanoPayloadChange": ValidatorValueStore;
         "nanoSubmit": any;
@@ -4301,10 +4314,9 @@ declare global {
         new (): HTMLNanoMenuElement;
     };
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface HTMLNanoMenuDrawerElement extends Components.NanoMenuDrawer, HTMLStencilElement {
     }
@@ -4440,6 +4452,8 @@ declare global {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface HTMLNanoResizeObserveElement extends Components.NanoResizeObserve, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoResizeObserveElementEventMap>(type: K, listener: (this: HTMLNanoResizeObserveElement, ev: NanoResizeObserveCustomEvent<HTMLNanoResizeObserveElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4768,6 +4782,7 @@ declare global {
         "nano-dialog": HTMLNanoDialogElement;
         "nano-drawer": HTMLNanoDrawerElement;
         "nano-dropdown": HTMLNanoDropdownElement;
+        "nano-feature-box": HTMLNanoFeatureBoxElement;
         "nano-field-validator": HTMLNanoFieldValidatorElement;
         "nano-file-upload": HTMLNanoFileUploadElement;
         "nano-footer": HTMLNanoFooterElement;
@@ -5658,8 +5673,7 @@ declare namespace LocalJSX {
         "type"?: 'select' | 'selectMulti' | 'input';
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -6137,6 +6151,19 @@ declare namespace LocalJSX {
          */
         "tetherTo"?: HTMLElement;
     }
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface NanoFeatureBox {
+        /**
+          * The position of the image of the feature-box (`start` being left on a l2r page)
+          * @default 'start'
+         */
+        "imgPosition"?: 'start' | 'end';
+    }
     /**
      * A toolbox to expose a form's data model and validation state
      * @version 3.0.0
@@ -7097,19 +7124,13 @@ declare namespace LocalJSX {
         "type"?: 'menu' | 'listbox' | 'nav';
     }
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoMenuDrawer {
         /**
-          * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
-          * @default true
-         */
-        "hideHeight"?: boolean;
-        /**
-          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+          * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
           * @default 576
          */
         "hideWidth"?: number;
@@ -7118,11 +7139,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "open"?: boolean;
-        /**
-          * Save open state to localStorage
-          * @default true
-         */
-        "saveState"?: boolean;
     }
     /**
      * Show more or less from a collection of items.
@@ -7176,11 +7192,6 @@ declare namespace LocalJSX {
           * @default null
          */
         "href"?: string;
-        /**
-          * Will show an indicator badge - only when placed in a nano-menu-draw
-          * @default false
-         */
-        "notification"?: boolean;
         /**
           * Emitted when the nav item closes it's secondary navigation.
          */
@@ -7225,7 +7236,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms.
           * @default ''
          */
         "filterMeta"?: string;
@@ -7410,6 +7421,8 @@ declare namespace LocalJSX {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoResizeObserve {
         /**
@@ -8209,6 +8222,7 @@ declare namespace LocalJSX {
         "nano-dialog": NanoDialog;
         "nano-drawer": NanoDrawer;
         "nano-dropdown": NanoDropdown;
+        "nano-feature-box": NanoFeatureBox;
         "nano-field-validator": NanoFieldValidator;
         "nano-file-upload": NanoFileUpload;
         "nano-footer": NanoFooter;
@@ -8373,8 +8387,7 @@ declare module "@stencil/core" {
              */
             "nano-datalist": LocalJSX.NanoDatalist & JSXBase.HTMLAttributes<HTMLNanoDatalistElement>;
             /**
-             * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-             * It has specific options for localisation, date formatting and validation.
+             * Enables date selection and input in a form.
              * @version 1.0.0
              * @status deprecated
              * @deprecated - use `nano-input` with `type="date"` instead.
@@ -8410,6 +8423,13 @@ declare module "@stencil/core" {
              * @status stable
              */
             "nano-dropdown": LocalJSX.NanoDropdown & JSXBase.HTMLAttributes<HTMLNanoDropdownElement>;
+            /**
+             * Highlights a key message on a landing page.
+             * @status new
+             * @version 8.0.0
+             * @type CSS Only
+             */
+            "nano-feature-box": LocalJSX.NanoFeatureBox & JSXBase.HTMLAttributes<HTMLNanoFeatureBoxElement>;
             /**
              * A toolbox to expose a form's data model and validation state
              * @version 3.0.0
@@ -8514,10 +8534,9 @@ declare module "@stencil/core" {
              */
             "nano-menu": LocalJSX.NanoMenu & JSXBase.HTMLAttributes<HTMLNanoMenuElement>;
             /**
-             * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-             * Shows menu item logos only on minimised, expands to show entire menu item.
-             * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-             * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+             * Display navigation items in a collapsible drawer at the side of a UI.
+             * @status stable
+             * @version 1.0.0
              */
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             /**
@@ -8557,6 +8576,8 @@ declare module "@stencil/core" {
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
             /**
              * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+             * @status stable
+             * @version 1.0.0
              */
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;
             /**

package/dist/types/stencil-public-runtime.d.ts

@@ -846,7 +846,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1552,6 +1552,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1568,6 +1575,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1586,10 +1597,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/dist/types/utils/testing/index.d.ts

@@ -0,0 +1,50 @@
+import { E2EPage } from '@stencil/core/testing';
+import * as axe from 'axe-core';
+declare global {
+    interface Window {
+        axe: typeof axe;
+    }
+}
+export interface NanoE2EPage extends E2EPage, Pick<PuppeteerPage, 'screenshot' | 'viewport'> {
+    reportA11y: (contextQuery?: string) => Promise<string>;
+}
+type NanoE2EPageOptions = {
+    html: string;
+    viewportWidth: number;
+    viewportHeight?: number;
+    dir: 'ltr' | 'rtl';
+    padding?: string;
+};
+export declare class E2EPlayGround<T> {
+    props: Partial<T>;
+    viewportHeight: number;
+    /** element template string. Add `{{ attrs }}` to place the attributes */
+    template: string;
+    cssVars: {
+        [key: string]: string;
+    };
+    viewportWidth: number;
+    page: NanoE2EPage;
+    tag: string;
+    constructor(setup: {
+        template: string;
+        tag: string;
+    } | string);
+    private get attrs();
+    private get css();
+    newPage(props?: Partial<T>, docOpts?: {
+        dir?: 'rtl' | 'ltr';
+        padding?: string;
+    }): Promise<NanoE2EPage>;
+    reportA11y(): Promise<string>;
+    component(): Promise<import("@stencil/core/testing").E2EElement>;
+    componentQuery(selectorStr: string, shadow?: boolean): Promise<any>;
+}
+export declare function getFocusedElement(page: E2EPage, shadowEleSelector?: string): Promise<any>;
+export declare function clickOnElement(page: E2EPage, elem: ElementHandle<Element>, x?: number, y?: number): Promise<void>;
+export declare function createPage(optionsOrHtml?: string | NanoE2EPageOptions): Promise<NanoE2EPage>;
+export declare const kebabize: (str: any) => any;
+export declare const screenshotSettings: (dirname: string) => MatchImageSnapshotOptions;
+export declare const waitForVisibleSnippet: (selector: any) => string;
+export declare const stringifyFormSnippet = "\n<div id=\"form-result\"></div>\n<script>\n  var form = document.querySelector('form');\n  var result = document.querySelector('#form-result');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    var data = new FormData(event.target);\n    var object = {};\n    data.forEach((value, key) => {\n        // Reflect.has in favor of: object.hasOwnProperty(key)\n        if(!Reflect.has(object, key)){\n            object[key] = value;\n            return;\n        }\n        if(!Array.isArray(object[key])){\n            object[key] = [object[key]];\n        }\n        object[key].push(value);\n    });\n    result.innerHTML = JSON.stringify(object);\n  })\n</script>";
+export {};