@nanoporetech-digital/components 8.0.0-alpha.1 → 8.0.0-alpha.3

package/dist/types/components/file-upload/file-upload.d.ts

@@ -8,11 +8,14 @@ interface FileValidation {
     location?: string;
 }
 /**
- * A better UI experience for `input type="file"` form controls.
+ * Enables the selection of files for upload.
  *
- *   - Drag and Drop
- *   - Validation options
- *   - Preview and manage multiple files
+ * @version 1.0.0
+ * @status stable
+ *
+ * @slot label - A label for the file input. If not provided, the `label` prop will be used.
+ * @slot helper - A helper text to display below the input.
+ * @slot - The default slot can be used to add additional content, such as instructions or a message.
  */
 export declare class FileUpload implements ComponentInterface {
     private inputEl;
@@ -40,10 +43,12 @@ export declare class FileUpload implements ComponentInterface {
     capture?: 'user' | 'environment';
     /** The maximum file size allowed per file (Megabytes) */
     maxFileSize: number;
-    /** The maximum file size allowed per file (bytes).  */
+    /** The maximum number of files that can be selected. Defaults to 1 */
     maxFiles: number;
+    private _label;
     /** String to place within a label element. */
-    label: string;
+    get label(): string;
+    set label(value: string);
     /** Placeholder only used within single file uploads. */
     placeholder: string;
     /** Visually hide the label - but make it accessible. */
@@ -54,7 +59,7 @@ export declare class FileUpload implements ComponentInterface {
     disabled: boolean;
     /** If `true`, a clear icon will appear in the input when there is a value.
      * Clicking it clears the input. Only used within single file uploads. */
-    clearInput: boolean;
+    clearable: boolean;
     /** Whether to show validation errors underneath input */
     showInlineError: boolean;
     /** When should the field perform validation */
@@ -62,10 +67,10 @@ export declare class FileUpload implements ComponentInterface {
     /** The form element to associate with this input (its form owner). Must be the id of a form. */
     form?: string | null;
     protected shouldValidate(): void;
-    _invalid: boolean;
+    _invalid: any;
     /** This will be true when the control is in an invalid state.
      * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
-    get invalid(): boolean;
+    get invalid(): any;
     /**
      * Current validation message - if any. @readonly
      */

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

@@ -49,8 +49,10 @@ export declare class GlobalNav implements ComponentInterface {
     cartCount: number;
     /** MyAccount un-read message count. */
     msgCount: number;
-    /** Manually toggle open or close the overflow menu */
-    toggleOverflowMenu(): Promise<void>;
+    /** Manually open the overflow menu */
+    openOverflowMenu(): Promise<void>;
+    /** Manually close the overflow menu */
+    closeOverflowMenu(): Promise<void>;
     /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
     myAccountUrl?: string;
     handleMyAccountUrl(): Promise<void>;

package/dist/types/components/masked-overflow/masked-overflow.d.ts

@@ -1,7 +1,9 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
- * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+ * A container for content that can horizontally or vertically scroll
+ *
+ * @version 4.0.0
+ * @status stable
  *
  * @slot - Default slot to place items.
  *

package/dist/types/components/more-less/more-less.d.ts

@@ -1,6 +1,9 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * A simple component to show more or less elements.
+ * Show more or less from a collection of items.
+ *
+ * @version 6.0.0
+ * @status stable
  *
  * @slot less - a button displayed when all fewer are shown. When clicked will show elements
  * @slot more - a button displayed when all items are shown. When clicked will hide elements

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,22 +1,15 @@
 /**
  * Shows the status of an ongoing operation.
  *
- * @version 3.0.0
- * @status stable
+ * @version 8.0.0
+ * @status new
+ * @type CSS Only
  *
- * @slot - A label to show inside the indicator.
- *
- * @part base - The component's base wrapper.
- * @part indicator - The progress bar indicator.
- * @part label - The progress bar label.
+ * @slot - Used for mandatory `<progress>` element and optional `<label>`
  */
 export declare class ProgressBar {
-    host: HTMLNanoProgressBarElement;
-    /** The progress bar's percentage, 0 to 100. */
-    value: number;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-    indeterminate: boolean;
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent: boolean;
-    render(): any;
+    /** The height of the progress-bar */
+    size: 'small' | 'medium' | 'large';
 }

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

@@ -25,7 +25,7 @@ export interface Flickity
   cursorPosition: number;
 }
 
-export interface FlickityOptions extends Options {
+export type FlickityOptions = Options & {
   fullscreen?: boolean;
   fade?: boolean;
 }

package/dist/types/components.d.ts

@@ -286,6 +286,8 @@ export namespace Components {
     /**
      * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
      * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+     * @version 6.0.0
+     * @status stable
      */
     interface NanoAnimation {
         /**
@@ -1392,10 +1394,9 @@ export namespace Components {
         "validationState": ValidationState[];
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface NanoFileUpload {
         /**
@@ -1410,7 +1411,7 @@ export namespace Components {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
           * @default false
          */
-        "clearInput": boolean;
+        "clearable": boolean;
         /**
           * If `true`, the user cannot interact with the select.
           * @default false
@@ -1436,9 +1437,9 @@ export namespace Components {
         /**
           * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
           * @readonly 
-          * @default false
+          * @default null
          */
-        "invalid": boolean;
+        "invalid": any;
         /**
           * String to place within a label element.
          */
@@ -1449,7 +1450,7 @@ export namespace Components {
          */
         "maxFileSize": number;
         /**
-          * The maximum file size allowed per file (bytes).
+          * The maximum number of files that can be selected. Defaults to 1
           * @default 1
          */
         "maxFiles": number;
@@ -1459,7 +1460,7 @@ export namespace Components {
         "name": string;
         /**
           * Placeholder only used within single file uploads.
-          * @default 'Choose a file...'
+          * @default 'Choose a file'
          */
         "placeholder": string;
         /**
@@ -1489,7 +1490,7 @@ export namespace Components {
         "showInlineError": boolean;
         /**
           * When should the field perform validation
-          * @default 'submit'
+          * @default 'submitThenDirty'
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
         /**
@@ -1525,6 +1526,10 @@ export namespace Components {
           * @default ''
          */
         "cartUrl": string;
+        /**
+          * Manually close the overflow menu
+         */
+        "closeOverflowMenu": () => Promise<void>;
         /**
           * Url to the Nanopore contact page
           * @default 'https://nanoporetech.com/contact'
@@ -1568,6 +1573,10 @@ export namespace Components {
           * @readonly
          */
         "myAccountUser": MyAccountData['user'];
+        /**
+          * Manually open the overflow menu
+         */
+        "openOverflowMenu": () => Promise<void>;
         /**
           * Algolia search index to search within
           * @default 'All'
@@ -1586,10 +1595,6 @@ export namespace Components {
           * Send the current search term and selected index to a nested `nano-global-search-results`
          */
         "submitSearch": () => Promise<void>;
-        /**
-          * Manually toggle open or close the overflow menu
-         */
-        "toggleOverflowMenu": () => Promise<void>;
     }
     /**
      * Nanopore Global Search results component
@@ -2155,8 +2160,9 @@ export namespace Components {
         "threshold"?: string;
     }
     /**
-     * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
-     * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+     * A container for content that can horizontally or vertically scroll
+     * @version 4.0.0
+     * @status stable
      */
     interface NanoMaskedOverflow {
         /**
@@ -2277,7 +2283,9 @@ export namespace Components {
         "saveState": boolean;
     }
     /**
-     * A simple component to show more or less elements.
+     * Show more or less from a collection of items.
+     * @version 6.0.0
+     * @status stable
      */
     interface NanoMoreLess {
         /**
@@ -2387,25 +2395,21 @@ export namespace Components {
     }
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface NanoProgressBar {
-        /**
-          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-          * @default false
-         */
-        "indeterminate": boolean;
         /**
           * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
           * @default false
          */
         "showPercent": boolean;
         /**
-          * The progress bar's percentage, 0 to 100.
-          * @default 0
+          * The height of the progress-bar
+          * @default 'medium'
          */
-        "value": number;
+        "size": 'small' | 'medium' | 'large';
     }
     /**
      * Ranges allow the user to select a value within a given range using a slider.
@@ -3609,6 +3613,8 @@ declare global {
     /**
      * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
      * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+     * @version 6.0.0
+     * @status stable
      */
     interface HTMLNanoAnimationElement extends Components.NanoAnimation, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoAnimationElementEventMap>(type: K, listener: (this: HTMLNanoAnimationElement, ev: NanoAnimationCustomEvent<HTMLNanoAnimationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4026,10 +4032,9 @@ declare global {
         "nanoValidate": ControlValidityEventDetail;
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface HTMLNanoFileUploadElement extends Components.NanoFileUpload, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoFileUploadElementEventMap>(type: K, listener: (this: HTMLNanoFileUploadElement, ev: NanoFileUploadCustomEvent<HTMLNanoFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4270,8 +4275,9 @@ declare global {
         new (): HTMLNanoIntersectionObserveElement;
     };
     /**
-     * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
-     * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+     * A container for content that can horizontally or vertically scroll
+     * @version 4.0.0
+     * @status stable
      */
     interface HTMLNanoMaskedOverflowElement extends Components.NanoMaskedOverflow, HTMLStencilElement {
     }
@@ -4316,7 +4322,9 @@ declare global {
         new (): HTMLNanoMenuDrawerElement;
     };
     /**
-     * A simple component to show more or less elements.
+     * Show more or less from a collection of items.
+     * @version 6.0.0
+     * @status stable
      */
     interface HTMLNanoMoreLessElement extends Components.NanoMoreLess, HTMLStencilElement {
     }
@@ -4371,8 +4379,9 @@ declare global {
     };
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface HTMLNanoProgressBarElement extends Components.NanoProgressBar, HTMLStencilElement {
     }
@@ -5066,6 +5075,8 @@ declare namespace LocalJSX {
     /**
      * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
      * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+     * @version 6.0.0
+     * @status stable
      */
     interface NanoAnimation {
         /**
@@ -6217,10 +6228,9 @@ declare namespace LocalJSX {
         "validationState"?: ValidationState[];
     }
     /**
-     * A better UI experience for `input type="file"` form controls.
-     *   - Drag and Drop
-     *   - Validation options
-     *   - Preview and manage multiple files
+     * Enables the selection of files for upload.
+     * @version 1.0.0
+     * @status stable
      */
     interface NanoFileUpload {
         /**
@@ -6235,7 +6245,7 @@ declare namespace LocalJSX {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Only used within single file uploads.
           * @default false
          */
-        "clearInput"?: boolean;
+        "clearable"?: boolean;
         /**
           * If `true`, the user cannot interact with the select.
           * @default false
@@ -6257,20 +6267,20 @@ declare namespace LocalJSX {
         /**
           * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
           * @readonly 
-          * @default false
+          * @default null
          */
-        "invalid"?: boolean;
+        "invalid"?: any;
         /**
           * String to place within a label element.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The maximum file size allowed per file (Megabytes)
           * @default 1
          */
         "maxFileSize"?: number;
         /**
-          * The maximum file size allowed per file (bytes).
+          * The maximum number of files that can be selected. Defaults to 1
           * @default 1
          */
         "maxFiles"?: number;
@@ -6297,7 +6307,7 @@ declare namespace LocalJSX {
         "onNanoValidate"?: (event: NanoFileUploadCustomEvent<ControlValidityEventDetail>) => void;
         /**
           * Placeholder only used within single file uploads.
-          * @default 'Choose a file...'
+          * @default 'Choose a file'
          */
         "placeholder"?: string;
         /**
@@ -6312,7 +6322,7 @@ declare namespace LocalJSX {
         "showInlineError"?: boolean;
         /**
           * When should the field perform validation
-          * @default 'submit'
+          * @default 'submitThenDirty'
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
         /**
@@ -7013,8 +7023,9 @@ declare namespace LocalJSX {
         "threshold"?: string;
     }
     /**
-     * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
-     * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+     * A container for content that can horizontally or vertically scroll
+     * @version 4.0.0
+     * @status stable
      */
     interface NanoMaskedOverflow {
         /**
@@ -7127,7 +7138,9 @@ declare namespace LocalJSX {
         "saveState"?: boolean;
     }
     /**
-     * A simple component to show more or less elements.
+     * Show more or less from a collection of items.
+     * @version 6.0.0
+     * @status stable
      */
     interface NanoMoreLess {
         /**
@@ -7253,25 +7266,21 @@ declare namespace LocalJSX {
     }
     /**
      * Shows the status of an ongoing operation.
-     * @version 3.0.0
-     * @status stable
+     * @version 8.0.0
+     * @status new
+     * @type CSS Only
      */
     interface NanoProgressBar {
-        /**
-          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-          * @default false
-         */
-        "indeterminate"?: boolean;
         /**
           * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
           * @default false
          */
         "showPercent"?: boolean;
         /**
-          * The progress bar's percentage, 0 to 100.
-          * @default 0
+          * The height of the progress-bar
+          * @default 'medium'
          */
-        "value"?: number;
+        "size"?: 'small' | 'medium' | 'large';
     }
     /**
      * Ranges allow the user to select a value within a given range using a slider.
@@ -8301,6 +8310,8 @@ declare module "@stencil/core" {
             /**
              * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
              * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+             * @version 6.0.0
+             * @status stable
              */
             "nano-animation": LocalJSX.NanoAnimation & JSXBase.HTMLAttributes<HTMLNanoAnimationElement>;
             /**
@@ -8429,10 +8440,9 @@ declare module "@stencil/core" {
              */
             "nano-field-validator": LocalJSX.NanoFieldValidator & JSXBase.HTMLAttributes<HTMLNanoFieldValidatorElement>;
             /**
-             * A better UI experience for `input type="file"` form controls.
-             *   - Drag and Drop
-             *   - Validation options
-             *   - Preview and manage multiple files
+             * Enables the selection of files for upload.
+             * @version 1.0.0
+             * @status stable
              */
             "nano-file-upload": LocalJSX.NanoFileUpload & JSXBase.HTMLAttributes<HTMLNanoFileUploadElement>;
             /**
@@ -8515,8 +8525,9 @@ declare module "@stencil/core" {
              */
             "nano-intersection-observe": LocalJSX.NanoIntersectionObserve & JSXBase.HTMLAttributes<HTMLNanoIntersectionObserveElement>;
             /**
-             * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
-             * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+             * A container for content that can horizontally or vertically scroll
+             * @version 4.0.0
+             * @status stable
              */
             "nano-masked-overflow": LocalJSX.NanoMaskedOverflow & JSXBase.HTMLAttributes<HTMLNanoMaskedOverflowElement>;
             /**
@@ -8533,7 +8544,9 @@ declare module "@stencil/core" {
              */
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             /**
-             * A simple component to show more or less elements.
+             * Show more or less from a collection of items.
+             * @version 6.0.0
+             * @status stable
              */
             "nano-more-less": LocalJSX.NanoMoreLess & JSXBase.HTMLAttributes<HTMLNanoMoreLessElement>;
             /**
@@ -8548,8 +8561,9 @@ declare module "@stencil/core" {
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
             /**
              * Shows the status of an ongoing operation.
-             * @version 3.0.0
-             * @status stable
+             * @version 8.0.0
+             * @status new
+             * @type CSS Only
              */
             "nano-progress-bar": LocalJSX.NanoProgressBar & JSXBase.HTMLAttributes<HTMLNanoProgressBarElement>;
             /**