@nanoporetech-digital/components 8.7.2 → 8.8.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-22T10:39:43",
+  "timestamp": "2025-09-22T15:57:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3358,7 +3358,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/QrfEi4pt/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/sxrVAURy/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -14874,6 +14874,7 @@
         "nano-global-nav",
         "nano-icon-button",
         "nano-input",
+        "nano-input-otp",
         "nano-menu-drawer",
         "nano-option",
         "nano-select",
@@ -14915,6 +14916,9 @@
         "nano-input": [
           "nano-icon"
         ],
+        "nano-input-otp": [
+          "nano-icon"
+        ],
         "nano-menu-drawer": [
           "nano-icon"
         ],
@@ -17851,6 +17855,599 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/input-otp/input-otp.tsx",
+      "encapsulation": "scoped",
+      "tag": "nano-input-otp",
+      "readme": "# nano-input-otp\n\n\n",
+      "docs": "A component for entering one-time passwords (OTP) with multiple input fields.",
+      "docsTags": [
+        {
+          "name": "version",
+          "text": "8.7.2"
+        },
+        {
+          "name": "status",
+          "text": "new"
+        },
+        {
+          "name": "slot",
+          "text": "- The default slot for the input description."
+        },
+        {
+          "name": "slot",
+          "text": "validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "allowInvalid",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "allow-invalid",
+          "reflectToAttr": true,
+          "docs": "If `true`, allows the input to be completely filled with invalid values.\nBy default, if any input box contains an invalid value, the entire input group\nis marked as invalid.\nDefault is `false`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "If `true`, the user cannot interact with the input.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "inputmode",
+          "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "complexType": {
+            "original": "| 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search'",
+            "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "inputmode",
+          "reflectToAttr": false,
+          "docs": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\nFor numbers (type=\"number\"): \"numeric\"\nFor text (type=\"text\"): \"text\"",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "decimal",
+              "type": "string"
+            },
+            {
+              "value": "email",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            },
+            {
+              "value": "numeric",
+              "type": "string"
+            },
+            {
+              "value": "search",
+              "type": "string"
+            },
+            {
+              "value": "tel",
+              "type": "string"
+            },
+            {
+              "value": "text",
+              "type": "string"
+            },
+            {
+              "value": "url",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "length",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "length",
+          "reflectToAttr": false,
+          "docs": "The number of input boxes to display.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "6"
+            }
+          ],
+          "default": "6",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "pattern",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "pattern",
+          "reflectToAttr": false,
+          "docs": "A regex pattern string for allowed characters. Defaults based on type.\n\nFor numbers (`type=\"number\"`): `\"[\\p{N}]\"`\nFor text (`type=\"text\"`): `\"[\\p{L}\\p{N}]\"`",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "readonly",
+          "reflectToAttr": true,
+          "docs": "If `true`, the user cannot modify the value.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showValidity",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-validity",
+          "reflectToAttr": true,
+          "docs": "If `true`, shows a validity icon when all input boxes are filled.\nA check icon is shown if all values are valid, and an X icon is shown if any value is invalid.\nThis does not affect the `invalid` or `valid` states of the input group.\nDefault is `false`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"number\" | \"text\"",
+          "complexType": {
+            "original": "'text' | 'number'",
+            "resolved": "\"number\" | \"text\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "The type of input allowed in the input boxes.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'number'"
+            }
+          ],
+          "default": "'number'",
+          "values": [
+            {
+              "value": "number",
+              "type": "string"
+            },
+            {
+              "value": "text",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "number | string",
+          "complexType": {
+            "original": "string | number | null",
+            "resolved": "number | string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "The value of the input group.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(index?: number) => Promise<void>",
+            "parameters": [
+              {
+                "name": "index",
+                "type": "number",
+                "docs": "- The index of the input box to focus (0-based).\nIf provided and the input box has a value, the input box at that index will be focused.\nOtherwise, the first empty input box or the last input if all are filled will be focused."
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "setFocus(index?: number) => Promise<void>",
+          "parameters": [
+            {
+              "name": "index",
+              "type": "number",
+              "docs": "- The index of the input box to focus (0-based).\nIf provided and the input box has a value, the input box at that index will be focused.\nOtherwise, the first empty input box or the last input if all are filled will be focused."
+            }
+          ],
+          "docs": "Sets focus to an input box.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "index - The index of the input box to focus (0-based).\nIf provided and the input box has a value, the input box at that index will be focused.\nOtherwise, the first empty input box or the last input if all are filled will be focused."
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "nanoBlur",
+          "detail": "FocusEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input group loses focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoChange",
+          "detail": "InputOtpChangeEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputOtpChangeEventDetail",
+            "resolved": "InputOtpChangeEventDetail",
+            "references": {
+              "InputOtpChangeEventDetail": {
+                "location": "import",
+                "path": "./input-otp-interface.js",
+                "id": "src/components/input-otp/input-otp-interface.ts::InputOtpChangeEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "The `nanoChange` event is fired when the user modifies the input's value.\nUnlike the `nanoInput` event, the `nanoChange` event is only fired when changes\nare committed, not as the user types.\n\nThe `nanoChange` event fires when the `<nano-input-otp>` component loses\nfocus after its value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoComplete",
+          "detail": "InputOtpCompleteEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputOtpCompleteEventDetail",
+            "resolved": "InputOtpCompleteEventDetail",
+            "references": {
+              "InputOtpCompleteEventDetail": {
+                "location": "import",
+                "path": "./input-otp-interface.js",
+                "id": "src/components/input-otp/input-otp-interface.ts::InputOtpCompleteEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when all input boxes have been filled with valid values.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoFocus",
+          "detail": "FocusEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input group has focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoInput",
+          "detail": "InputOtpInputEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputOtpInputEventDetail",
+            "resolved": "InputOtpInputEventDetail",
+            "references": {
+              "InputOtpInputEventDetail": {
+                "location": "import",
+                "path": "./input-otp-interface.js",
+                "id": "src/components/input-otp/input-otp-interface.ts::InputOtpInputEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "The `nanoInput` event is fired each time the user modifies the input's value.\nUnlike the `nanoChange` event, the `nanoInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--background",
+          "annotation": "prop",
+          "docs": "Background color of the input boxes"
+        },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "Border color of the input boxes"
+        },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "Border radius of the input boxes"
+        },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "Border width of the input boxes"
+        },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "Text color of the input"
+        },
+        {
+          "name": "--gap",
+          "annotation": "prop",
+          "docs": "Gap between input boxes"
+        },
+        {
+          "name": "--height",
+          "annotation": "prop",
+          "docs": "Height of input boxes"
+        },
+        {
+          "name": "--highlight-color-invalid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the input when invalid"
+        },
+        {
+          "name": "--highlight-color-valid",
+          "annotation": "prop",
+          "docs": "The color of the highlight on the input when valid"
+        },
+        {
+          "name": "--margin-bottom",
+          "annotation": "prop",
+          "docs": "Bottom margin of the input group"
+        },
+        {
+          "name": "--margin-end",
+          "annotation": "prop",
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group"
+        },
+        {
+          "name": "--margin-start",
+          "annotation": "prop",
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group"
+        },
+        {
+          "name": "--margin-top",
+          "annotation": "prop",
+          "docs": "Top margin of the input group"
+        },
+        {
+          "name": "--min-width",
+          "annotation": "prop",
+          "docs": "Minimum width of input boxes"
+        },
+        {
+          "name": "--padding-bottom",
+          "annotation": "prop",
+          "docs": "Bottom padding of the input group"
+        },
+        {
+          "name": "--padding-end",
+          "annotation": "prop",
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group"
+        },
+        {
+          "name": "--padding-start",
+          "annotation": "prop",
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group"
+        },
+        {
+          "name": "--padding-top",
+          "annotation": "prop",
+          "docs": "Top padding of the input group"
+        },
+        {
+          "name": "--separator-border-radius",
+          "annotation": "prop",
+          "docs": "Border radius of the separator between boxes"
+        },
+        {
+          "name": "--separator-color",
+          "annotation": "prop",
+          "docs": "Color of the separator between boxes"
+        },
+        {
+          "name": "--separator-height",
+          "annotation": "prop",
+          "docs": "Height of the separator between boxes"
+        },
+        {
+          "name": "--separator-width",
+          "annotation": "prop",
+          "docs": "Width of the separator between boxes"
+        },
+        {
+          "name": "--width",
+          "annotation": "prop",
+          "docs": "Width of input boxes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The default slot for the input description."
+        },
+        {
+          "name": "validity-icon",
+          "docs": "A slot for a custom validity icon. If not provided, a default icon will be used."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "nano-icon"
+      ],
+      "dependencyGraph": {
+        "nano-input-otp": [
+          "nano-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/intersection-observe/intersection-observe.tsx",
       "encapsulation": "shadow",
@@ -27937,6 +28534,21 @@
       "docstring": "",
       "path": "src/components/global-nav/global-nav-interface.d.ts"
     },
+    "src/components/input-otp/input-otp-interface.ts::InputOtpInputEventDetail": {
+      "declaration": "export interface InputOtpInputEventDetail {\n  value?: string | null;\n  valid?: boolean;\n  event?: Event;\n}",
+      "docstring": "Values are converted to strings when emitted which is\nwhy we do not have a `number` type here even though the\n`value` prop accepts a `number` type.",
+      "path": "src/components/input-otp/input-otp-interface.ts"
+    },
+    "src/components/input-otp/input-otp-interface.ts::InputOtpChangeEventDetail": {
+      "declaration": "export interface InputOtpChangeEventDetail {\n  value?: string | null;\n  valid?: boolean;\n  event?: Event;\n}",
+      "docstring": "",
+      "path": "src/components/input-otp/input-otp-interface.ts"
+    },
+    "src/components/input-otp/input-otp-interface.ts::InputOtpCompleteEventDetail": {
+      "declaration": "export interface InputOtpCompleteEventDetail {\n  value?: string | null;\n  valid?: boolean;\n  event?: Event;\n}",
+      "docstring": "",
+      "path": "src/components/input-otp/input-otp-interface.ts"
+    },
     "src/components/range/range-interface.d.ts::RangeValue": {
       "declaration": "export type RangeValue = number | { lower: number; upper: number };",
       "docstring": "",