@nanoporetech-digital/components 8.1.1 → 8.3.0

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

@@ -1,5 +1,5 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
-/**\
+/**
  * In-page navigation allows users to quickly find different sections on a page.
  *
  * @status new

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

@@ -0,0 +1,19 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * Increments and decrements a value using an [input](/components/input).
+ *
+ * @status new
+ * @version 8.2.0
+ */
+export declare class NanoIncrement implements ComponentInterface {
+    host: HTMLElement;
+    inputElement: HTMLNanoInputElement;
+    private ignoreInputChange;
+    inputElementChanged(_newValue: HTMLNanoInputElement, oldValue: HTMLNanoInputElement): void;
+    private inputChangeHandler;
+    private handleSlotChange;
+    private handleMinus;
+    private handlePlus;
+    componentWillLoad(): Promise<void> | void;
+    render(): any;
+}

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

@@ -29,6 +29,7 @@ export declare class Input implements ComponentInterface {
     private pickerDropdown?;
     private picker?;
     private pickerCloseBtn?;
+    private shouldValidate;
     private _nativeInputWrap;
     private get nativeInputWrap();
     private set nativeInputWrap(value);
@@ -172,7 +173,9 @@ export declare class Input implements ComponentInterface {
      */
     step?: string;
     /**
-     * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+     * The initial size of the control. This value is in pixels unless the value of the type attribute
+     * is `"text"` or `"password"`, in which case it is an integer number of characters.
+     * This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
      */
     size?: number;
     /**
@@ -199,7 +202,7 @@ export declare class Input implements ComponentInterface {
      * Whether to show a character count / remaining count when using the `maxlength` attribute.
      */
     showCharCount: boolean;
-    protected shouldValidate(): void;
+    protected handleValidatePropChange(): void;
     /**
      * relevant to `type="textarea"`. Vertical resizing - enable / disable or make automatic.
      */
@@ -304,5 +307,6 @@ export declare class Input implements ComponentInterface {
     disconnectedCallback(): void;
     componentDidLoad(): void;
     componentWillLoad(): void;
+    componentDidRender(): void;
     render(): any;
 }

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

@@ -19,6 +19,7 @@ export declare class MenuDrawer {
     reset: boolean;
     isLoading: boolean;
     hide: boolean;
+    secondaryOpen: boolean;
     /**
      * Set the initial menu drawer open or closed
      */

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

@@ -0,0 +1,14 @@
+/**
+ * Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.
+ *
+ * @status new
+ * @version 8.3.0
+ * @type CSS Only
+ *
+ * @slot img - The image of the card. Appears first.
+ * @slot header - The title of the card. Appears second.
+ * @slot content - The main content of the card. Appears third.
+ * @slot footer - The footer of the card. Appears last.
+ */
+export declare class NanoOptionBox {
+}

package/dist/types/components.d.ts

@@ -1898,7 +1898,6 @@ export namespace Components {
         "srcSet"?: string;
     }
     /**
-     * \
      * In-page navigation allows users to quickly find different sections on a page.
      * @status new
      * @version 8.0.0
@@ -1910,6 +1909,13 @@ export namespace Components {
          */
         "stickyHeaders"?: boolean;
     }
+    /**
+     * Increments and decrements a value using an [input](/components/input).
+     * @status new
+     * @version 8.2.0
+     */
+    interface NanoIncrement {
+    }
     /**
      * Inputs collect text data from the user.
      * @status stable
@@ -2401,6 +2407,14 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.
+     * @status new
+     * @version 8.3.0
+     * @type CSS Only
+     */
+    interface NanoOptionBox {
+    }
     /**
      * Shows the status of an ongoing operation.
      * @version 8.0.0
@@ -4253,7 +4267,6 @@ declare global {
         new (): HTMLNanoImgElement;
     };
     /**
-     * \
      * In-page navigation allows users to quickly find different sections on a page.
      * @status new
      * @version 8.0.0
@@ -4264,6 +4277,17 @@ declare global {
         prototype: HTMLNanoInPageNavElement;
         new (): HTMLNanoInPageNavElement;
     };
+    /**
+     * Increments and decrements a value using an [input](/components/input).
+     * @status new
+     * @version 8.2.0
+     */
+    interface HTMLNanoIncrementElement extends Components.NanoIncrement, HTMLStencilElement {
+    }
+    var HTMLNanoIncrementElement: {
+        prototype: HTMLNanoIncrementElement;
+        new (): HTMLNanoIncrementElement;
+    };
     interface HTMLNanoInputElementEventMap {
         "nanoInput": InputEvent;
         "nanoChange": InputChangeEventDetail;
@@ -4420,6 +4444,18 @@ declare global {
         prototype: HTMLNanoOptionElement;
         new (): HTMLNanoOptionElement;
     };
+    /**
+     * Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.
+     * @status new
+     * @version 8.3.0
+     * @type CSS Only
+     */
+    interface HTMLNanoOptionBoxElement extends Components.NanoOptionBox, HTMLStencilElement {
+    }
+    var HTMLNanoOptionBoxElement: {
+        prototype: HTMLNanoOptionBoxElement;
+        new (): HTMLNanoOptionBoxElement;
+    };
     /**
      * Shows the status of an ongoing operation.
      * @version 8.0.0
@@ -4838,6 +4874,7 @@ declare global {
         "nano-icon-item": HTMLNanoIconItemElement;
         "nano-img": HTMLNanoImgElement;
         "nano-in-page-nav": HTMLNanoInPageNavElement;
+        "nano-increment": HTMLNanoIncrementElement;
         "nano-input": HTMLNanoInputElement;
         "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-masked-overflow": HTMLNanoMaskedOverflowElement;
@@ -4846,6 +4883,7 @@ declare global {
         "nano-more-less": HTMLNanoMoreLessElement;
         "nano-nav-item": HTMLNanoNavItemElement;
         "nano-option": HTMLNanoOptionElement;
+        "nano-option-box": HTMLNanoOptionBoxElement;
         "nano-progress-bar": HTMLNanoProgressBarElement;
         "nano-range": HTMLNanoRangeElement;
         "nano-rating": HTMLNanoRatingElement;
@@ -6791,7 +6829,6 @@ declare namespace LocalJSX {
         "srcSet"?: string;
     }
     /**
-     * \
      * In-page navigation allows users to quickly find different sections on a page.
      * @status new
      * @version 8.0.0
@@ -6803,6 +6840,13 @@ declare namespace LocalJSX {
          */
         "stickyHeaders"?: boolean;
     }
+    /**
+     * Increments and decrements a value using an [input](/components/input).
+     * @status new
+     * @version 8.2.0
+     */
+    interface NanoIncrement {
+    }
     /**
      * Inputs collect text data from the user.
      * @status stable
@@ -7305,6 +7349,14 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.
+     * @status new
+     * @version 8.3.0
+     * @type CSS Only
+     */
+    interface NanoOptionBox {
+    }
     /**
      * Shows the status of an ongoing operation.
      * @version 8.0.0
@@ -8305,6 +8357,7 @@ declare namespace LocalJSX {
         "nano-icon-item": NanoIconItem;
         "nano-img": NanoImg;
         "nano-in-page-nav": NanoInPageNav;
+        "nano-increment": NanoIncrement;
         "nano-input": NanoInput;
         "nano-intersection-observe": NanoIntersectionObserve;
         "nano-masked-overflow": NanoMaskedOverflow;
@@ -8313,6 +8366,7 @@ declare namespace LocalJSX {
         "nano-more-less": NanoMoreLess;
         "nano-nav-item": NanoNavItem;
         "nano-option": NanoOption;
+        "nano-option-box": NanoOptionBox;
         "nano-progress-bar": NanoProgressBar;
         "nano-range": NanoRange;
         "nano-rating": NanoRating;
@@ -8576,12 +8630,17 @@ declare module "@stencil/core" {
              */
             "nano-img": LocalJSX.NanoImg & JSXBase.HTMLAttributes<HTMLNanoImgElement>;
             /**
-             * \
              * In-page navigation allows users to quickly find different sections on a page.
              * @status new
              * @version 8.0.0
              */
             "nano-in-page-nav": LocalJSX.NanoInPageNav & JSXBase.HTMLAttributes<HTMLNanoInPageNavElement>;
+            /**
+             * Increments and decrements a value using an [input](/components/input).
+             * @status new
+             * @version 8.2.0
+             */
+            "nano-increment": LocalJSX.NanoIncrement & JSXBase.HTMLAttributes<HTMLNanoIncrementElement>;
             /**
              * Inputs collect text data from the user.
              * @status stable
@@ -8630,6 +8689,13 @@ declare module "@stencil/core" {
              * @status stable
              */
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
+            /**
+             * Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.
+             * @status new
+             * @version 8.3.0
+             * @type CSS Only
+             */
+            "nano-option-box": LocalJSX.NanoOptionBox & JSXBase.HTMLAttributes<HTMLNanoOptionBoxElement>;
             /**
              * Shows the status of an ongoing operation.
              * @version 8.0.0

package/dist/wdio.conf.js

@@ -109,7 +109,7 @@ export const config = {
     //
     // If you only want to run your tests until a specific amount of tests have failed use
     // bail (default is 0 - don't bail, run all tests).
-    bail: isCI ? 0 : 2,
+    bail: isCI ? 0 : 1,
     //
     // Set a base URL in order to shorten url command calls. If your `url` parameter starts
     // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
@@ -159,7 +159,7 @@ export const config = {
     framework: 'mocha',
     //
     // The number of times to retry the entire specfile when it fails as a whole
-    specFileRetries: isCI ? 1 : 0,
+    specFileRetries: isCI ? 2 : 0,
     //
     // Delay in seconds between the spec file retry attempts
     // specFileRetriesDelay: 1,

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-24T10:55:06",
+  "timestamp": "2025-07-28T14:03:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3322,7 +3322,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/W1hp42tj/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/uSGJX_GU/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -15180,6 +15180,7 @@
         "nano-drawer",
         "nano-file-upload",
         "nano-global-nav",
+        "nano-increment",
         "nano-input",
         "nano-masked-overflow",
         "nano-tab",
@@ -15212,6 +15213,9 @@
         "nano-global-nav": [
           "nano-icon-button"
         ],
+        "nano-increment": [
+          "nano-icon-button"
+        ],
         "nano-input": [
           "nano-icon-button"
         ],
@@ -15610,7 +15614,7 @@
       "encapsulation": "shadow",
       "tag": "nano-in-page-nav",
       "readme": "# nano-in-page-nav\n\n\n",
-      "docs": "\\\nIn-page navigation allows users to quickly find different sections on a page.",
+      "docs": "In-page navigation allows users to quickly find different sections on a page.",
       "docsTags": [
         {
           "name": "status",
@@ -15770,6 +15774,44 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/increment/increment.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-increment",
+      "readme": "# nano-increment\n\n\n",
+      "docs": "Increments and decrements a value using an [input](/components/input).",
+      "docsTags": [
+        {
+          "name": "status",
+          "text": "new"
+        },
+        {
+          "name": "version",
+          "text": "8.2.0"
+        }
+      ],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "nano-icon-button"
+      ],
+      "dependencyGraph": {
+        "nano-increment": [
+          "nano-icon-button"
+        ],
+        "nano-icon-button": [
+          "nano-icon",
+          "nano-tooltip"
+        ]
+      }
+    },
     {
       "filePath": "src/components/input/input.tsx",
       "encapsulation": "scoped",
@@ -16852,7 +16894,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": false,
-          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
+          "docs": "The initial size of the control. This value is in pixels unless the value of the type attribute\nis `\"text\"` or `\"password\"`, in which case it is an integer number of characters.\nThis attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
           "docsTags": [],
           "values": [
             {
@@ -19805,6 +19847,77 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/option-box/option-box.ts",
+      "encapsulation": "none",
+      "tag": "nano-option-box",
+      "readme": "# nano-option-box\n\n\n",
+      "docs": "Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context.",
+      "docsTags": [
+        {
+          "name": "status",
+          "text": "new"
+        },
+        {
+          "name": "version",
+          "text": "8.3.0"
+        },
+        {
+          "name": "type",
+          "text": "CSS Only"
+        },
+        {
+          "name": "slot",
+          "text": "img - The image of the card. Appears first."
+        },
+        {
+          "name": "slot",
+          "text": "header - The title of the card. Appears second."
+        },
+        {
+          "name": "slot",
+          "text": "content - The main content of the card. Appears third."
+        },
+        {
+          "name": "slot",
+          "text": "footer - The footer of the card. Appears last."
+        }
+      ],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--spacing",
+          "annotation": "prop",
+          "docs": "Spacing between card items. Defaults to `var(--nano-spacing-md)`;"
+        }
+      ],
+      "slots": [
+        {
+          "name": "content",
+          "docs": "The main content of the card. Appears third."
+        },
+        {
+          "name": "footer",
+          "docs": "The footer of the card. Appears last."
+        },
+        {
+          "name": "header",
+          "docs": "The title of the card. Appears second."
+        },
+        {
+          "name": "img",
+          "docs": "The image of the card. Appears first."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/progress-bar/progress-bar.tsx",
       "encapsulation": "none",

package/docs-vscode.json

@@ -2392,7 +2392,7 @@
       "name": "nano-in-page-nav",
       "description": {
         "kind": "markdown",
-        "value": "\\\nIn-page navigation allows users to quickly find different sections on a page."
+        "value": "In-page navigation allows users to quickly find different sections on a page."
       },
       "attributes": [
         {
@@ -2401,6 +2401,14 @@
         }
       ]
     },
+    {
+      "name": "nano-increment",
+      "description": {
+        "kind": "markdown",
+        "value": "Increments and decrements a value using an [input](/components/input)."
+      },
+      "attributes": []
+    },
     {
       "name": "nano-input",
       "description": {
@@ -2617,7 +2625,7 @@
         },
         {
           "name": "size",
-          "description": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
+          "description": "The initial size of the control. This value is in pixels unless the value of the type attribute\nis `\"text\"` or `\"password\"`, in which case it is an integer number of characters.\nThis attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
         },
         {
           "name": "spellcheck",
@@ -2924,6 +2932,14 @@
         }
       ]
     },
+    {
+      "name": "nano-option-box",
+      "description": {
+        "kind": "markdown",
+        "value": "Option boxes are used to present a choice with accompanying data to the user, typically in a configuration context."
+      },
+      "attributes": []
+    },
     {
       "name": "nano-progress-bar",
       "description": {