@nanoporetech-digital/components 8.7.2 → 8.9.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-22T10:39:43",
+  "timestamp": "2025-09-22T17:01:12",
   "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/HitvqeWT/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"
         ],
@@ -17506,18 +17510,678 @@
           "docsTags": []
         },
         {
-          "name": "showError",
+          "name": "showError",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(message: string) => Promise<void>",
+            "parameters": [
+              {
+                "name": "message",
+                "type": "string",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "showError(message: string) => Promise<void>",
+          "parameters": [
+            {
+              "name": "message",
+              "type": "string",
+              "docs": ""
+            }
+          ],
+          "docs": "Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "nanoBlur",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input loses focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoChange",
+          "detail": "InputChangeEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputChangeEventDetail",
+            "resolved": "InputChangeEventDetail",
+            "references": {
+              "InputChangeEventDetail": {
+                "location": "import",
+                "path": "./input-interface",
+                "id": "src/components/input/input-interface.d.ts::InputChangeEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value has changed.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoFocus",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input has focus.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoInput",
+          "detail": "InputEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "InputEvent",
+            "resolved": "InputEvent",
+            "references": {
+              "InputEvent": {
+                "location": "global",
+                "id": "global::InputEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a keyboard input occurred.",
+          "docsTags": []
+        },
+        {
+          "event": "nanoValidate",
+          "detail": "ControlValidityEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "ControlValidityEventDetail",
+            "resolved": "ControlValidityEventDetail",
+            "references": {
+              "ControlValidityEventDetail": {
+                "location": "import",
+                "path": "../../types/shared",
+                "id": "src/types/shared.ts::ControlValidityEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Called when validation is performed (which depends on `validateOn`).",
+          "docsTags": [
+            {
+              "name": "returns",
+              "text": "event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`."
+            }
+          ]
+        }
+      ],
+      "listeners": [
+        {
+          "event": "reset",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "mousedown",
+          "target": "body",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [
+        {
+          "name": "--clear-btn-color",
+          "annotation": "prop",
+          "docs": "Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%)."
+        },
+        {
+          "name": "--clear-btn-color--hover",
+          "annotation": "prop",
+          "docs": "Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%)."
+        },
+        {
+          "name": "--clear-btn-color--invalid",
+          "annotation": "prop",
+          "docs": "Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%)."
+        },
+        {
+          "name": "--color-invalid",
+          "annotation": "prop",
+          "docs": "Color of invalid messaging. Defaults to var(--nano-color-danger-1100)."
+        },
+        {
+          "name": "--color-valid",
+          "annotation": "prop",
+          "docs": "Color of valid messaging. Defaults to var(--nano-color-success-1000)."
+        },
+        {
+          "name": "--help-msg-color",
+          "annotation": "prop",
+          "docs": "Color of help message. Defaults to var(--nano-color-base-1000)."
+        },
+        {
+          "name": "--input-bg-color",
+          "annotation": "prop",
+          "docs": "Background color of input. Defaults to var(--nano-color-base-0)."
+        },
+        {
+          "name": "--input-border-color",
+          "annotation": "prop",
+          "docs": "Border color of input. Defaults to var(--nano-color-neutral-300)."
+        },
+        {
+          "name": "--input-border-radius",
+          "annotation": "prop",
+          "docs": "Border radius of input. Defaults to 0px."
+        },
+        {
+          "name": "--input-border-style",
+          "annotation": "prop",
+          "docs": "Border style of input. Defaults to solid var(--input-border-color)."
+        },
+        {
+          "name": "--input-border-style--focus",
+          "annotation": "prop",
+          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700)."
+        },
+        {
+          "name": "--input-border-width",
+          "annotation": "prop",
+          "docs": "Border width of input. Defaults to 1px."
+        },
+        {
+          "name": "--input-font-size",
+          "annotation": "prop",
+          "docs": "Font size of input. Defaults to var(--nano-font-size-sm)."
+        },
+        {
+          "name": "--input-invalid-border-hint-width",
+          "annotation": "prop",
+          "docs": "Border-start width used as an invalid hint. Defaults to 2px."
+        },
+        {
+          "name": "--input-text-color",
+          "annotation": "prop",
+          "docs": "Text color of input. Defaults to var(--nano-color-base-1000)."
+        },
+        {
+          "name": "--invalid-msg-color",
+          "annotation": "prop",
+          "docs": "Color of invalid message. Defaults to var(--color-invalid)."
+        },
+        {
+          "name": "--label-color",
+          "annotation": "prop",
+          "docs": "Color of label. Defaults to var(--nano-color-base-1000)."
+        },
+        {
+          "name": "--label-font-size",
+          "annotation": "prop",
+          "docs": "Font size of label. Defaults to var(--nano-font-size-xs)."
+        },
+        {
+          "name": "--more-font-size",
+          "annotation": "prop",
+          "docs": "Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs)."
+        },
+        {
+          "name": "--padding-bottom",
+          "annotation": "prop",
+          "docs": "Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm)."
+        },
+        {
+          "name": "--padding-end",
+          "annotation": "prop",
+          "docs": "Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm)."
+        },
+        {
+          "name": "--padding-start",
+          "annotation": "prop",
+          "docs": "Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm)."
+        },
+        {
+          "name": "--padding-top",
+          "annotation": "prop",
+          "docs": "Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm)."
+        },
+        {
+          "name": "--placeholder-color",
+          "annotation": "prop",
+          "docs": "Color of placeholder. Defaults to var(--nano-color-neutral-1000)."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
+        },
+        {
+          "name": "end",
+          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "helper",
+          "docs": "helper text to accompany the form field underneath."
+        },
+        {
+          "name": "helper-end",
+          "docs": "helper text to accompany the form field on the side."
+        },
+        {
+          "name": "label",
+          "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
+        },
+        {
+          "name": "start",
+          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
+        },
+        {
+          "name": "value-end",
+          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
+        },
+        {
+          "name": "value-start",
+          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
+        }
+      ],
+      "parts": [
+        {
+          "name": "date__dropdown",
+          "docs": ""
+        },
+        {
+          "name": "date__picker",
+          "docs": ""
+        }
+      ],
+      "dependents": [
+        "nano-date-input",
+        "nano-global-nav"
+      ],
+      "dependencies": [
+        "nano-dropdown",
+        "nano-icon-button",
+        "nano-date-picker",
+        "nano-icon"
+      ],
+      "dependencyGraph": {
+        "nano-input": [
+          "nano-dropdown",
+          "nano-icon-button",
+          "nano-date-picker",
+          "nano-icon"
+        ],
+        "nano-icon-button": [
+          "nano-icon",
+          "nano-tooltip"
+        ],
+        "nano-date-picker": [
+          "nano-icon"
+        ],
+        "nano-date-input": [
+          "nano-input"
+        ],
+        "nano-global-nav": [
+          "nano-input"
+        ]
+      }
+    },
+    {
+      "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": "(message: string) => Promise<void>",
+            "signature": "(index?: number) => Promise<void>",
             "parameters": [
               {
-                "name": "message",
-                "type": "string",
-                "docs": ""
+                "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": {
@@ -17528,326 +18192,259 @@
             },
             "return": "Promise<void>"
           },
-          "signature": "showError(message: string) => Promise<void>",
+          "signature": "setFocus(index?: number) => Promise<void>",
           "parameters": [
             {
-              "name": "message",
-              "type": "string",
-              "docs": ""
+              "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": "Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.",
-          "docsTags": []
+          "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": "void",
+          "detail": "FocusEvent",
           "bubbles": true,
           "complexType": {
-            "original": "void",
-            "resolved": "void",
-            "references": {}
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
+            "references": {
+              "FocusEvent": {
+                "location": "global",
+                "id": "global::FocusEvent"
+              }
+            }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the input loses focus.",
+          "docs": "Emitted when the input group loses focus.",
           "docsTags": []
         },
         {
           "event": "nanoChange",
-          "detail": "InputChangeEventDetail",
+          "detail": "InputOtpChangeEventDetail",
           "bubbles": true,
           "complexType": {
-            "original": "InputChangeEventDetail",
-            "resolved": "InputChangeEventDetail",
+            "original": "InputOtpChangeEventDetail",
+            "resolved": "InputOtpChangeEventDetail",
             "references": {
-              "InputChangeEventDetail": {
+              "InputOtpChangeEventDetail": {
                 "location": "import",
-                "path": "./input-interface",
-                "id": "src/components/input/input-interface.d.ts::InputChangeEventDetail"
+                "path": "./input-otp-interface.js",
+                "id": "src/components/input-otp/input-otp-interface.ts::InputOtpChangeEventDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "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": "nanoFocus",
-          "detail": "void",
+          "event": "nanoComplete",
+          "detail": "InputOtpCompleteEventDetail",
           "bubbles": true,
           "complexType": {
-            "original": "void",
-            "resolved": "void",
-            "references": {}
+            "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 the input has focus.",
+          "docs": "Emitted when all input boxes have been filled with valid values.",
           "docsTags": []
         },
         {
-          "event": "nanoInput",
-          "detail": "InputEvent",
+          "event": "nanoFocus",
+          "detail": "FocusEvent",
           "bubbles": true,
           "complexType": {
-            "original": "InputEvent",
-            "resolved": "InputEvent",
+            "original": "FocusEvent",
+            "resolved": "FocusEvent",
             "references": {
-              "InputEvent": {
+              "FocusEvent": {
                 "location": "global",
-                "id": "global::InputEvent"
+                "id": "global::FocusEvent"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when the input group has focus.",
           "docsTags": []
         },
         {
-          "event": "nanoValidate",
-          "detail": "ControlValidityEventDetail",
+          "event": "nanoInput",
+          "detail": "InputOtpInputEventDetail",
           "bubbles": true,
           "complexType": {
-            "original": "ControlValidityEventDetail",
-            "resolved": "ControlValidityEventDetail",
+            "original": "InputOtpInputEventDetail",
+            "resolved": "InputOtpInputEventDetail",
             "references": {
-              "ControlValidityEventDetail": {
+              "InputOtpInputEventDetail": {
                 "location": "import",
-                "path": "../../types/shared",
-                "id": "src/types/shared.ts::ControlValidityEventDetail"
+                "path": "./input-otp-interface.js",
+                "id": "src/components/input-otp/input-otp-interface.ts::InputOtpInputEventDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Called when validation is performed (which depends on `validateOn`).",
-          "docsTags": [
-            {
-              "name": "returns",
-              "text": "event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`."
-            }
-          ]
-        }
-      ],
-      "listeners": [
-        {
-          "event": "reset",
-          "target": "body",
-          "capture": false,
-          "passive": false
-        },
-        {
-          "event": "mousedown",
-          "target": "body",
-          "capture": false,
-          "passive": true
-        },
-        {
-          "event": "keydown",
-          "capture": false,
-          "passive": false
+          "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": "--clear-btn-color",
-          "annotation": "prop",
-          "docs": "Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%)."
-        },
-        {
-          "name": "--clear-btn-color--hover",
+          "name": "--background",
           "annotation": "prop",
-          "docs": "Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%)."
+          "docs": "Background color of the input boxes"
         },
         {
-          "name": "--clear-btn-color--invalid",
+          "name": "--border-color",
           "annotation": "prop",
-          "docs": "Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%)."
+          "docs": "Border color of the input boxes"
         },
         {
-          "name": "--color-invalid",
+          "name": "--border-radius",
           "annotation": "prop",
-          "docs": "Color of invalid messaging. Defaults to var(--nano-color-danger-1100)."
+          "docs": "Border radius of the input boxes"
         },
         {
-          "name": "--color-valid",
+          "name": "--border-width",
           "annotation": "prop",
-          "docs": "Color of valid messaging. Defaults to var(--nano-color-success-1000)."
+          "docs": "Border width of the input boxes"
         },
         {
-          "name": "--help-msg-color",
+          "name": "--color",
           "annotation": "prop",
-          "docs": "Color of help message. Defaults to var(--nano-color-base-1000)."
+          "docs": "Text color of the input"
         },
         {
-          "name": "--input-bg-color",
+          "name": "--gap",
           "annotation": "prop",
-          "docs": "Background color of input. Defaults to var(--nano-color-base-0)."
+          "docs": "Gap between input boxes"
         },
         {
-          "name": "--input-border-color",
+          "name": "--height",
           "annotation": "prop",
-          "docs": "Border color of input. Defaults to var(--nano-color-neutral-300)."
+          "docs": "Height of input boxes"
         },
         {
-          "name": "--input-border-radius",
+          "name": "--highlight-color-invalid",
           "annotation": "prop",
-          "docs": "Border radius of input. Defaults to 0px."
+          "docs": "The color of the highlight on the input when invalid"
         },
         {
-          "name": "--input-border-style",
+          "name": "--highlight-color-valid",
           "annotation": "prop",
-          "docs": "Border style of input. Defaults to solid var(--input-border-color)."
+          "docs": "The color of the highlight on the input when valid"
         },
         {
-          "name": "--input-border-style--focus",
+          "name": "--margin-bottom",
           "annotation": "prop",
-          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700)."
+          "docs": "Bottom margin of the input group"
         },
         {
-          "name": "--input-border-width",
+          "name": "--margin-end",
           "annotation": "prop",
-          "docs": "Border width of input. Defaults to 1px."
+          "docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group"
         },
         {
-          "name": "--input-font-size",
+          "name": "--margin-start",
           "annotation": "prop",
-          "docs": "Font size of input. Defaults to var(--nano-font-size-sm)."
+          "docs": "Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group"
         },
         {
-          "name": "--input-invalid-border-hint-width",
+          "name": "--margin-top",
           "annotation": "prop",
-          "docs": "Border-start width used as an invalid hint. Defaults to 2px."
+          "docs": "Top margin of the input group"
         },
         {
-          "name": "--input-text-color",
+          "name": "--min-width",
           "annotation": "prop",
-          "docs": "Text color of input. Defaults to var(--nano-color-base-1000)."
+          "docs": "Minimum width of input boxes"
         },
         {
-          "name": "--invalid-msg-color",
+          "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Color of invalid message. Defaults to var(--color-invalid)."
+          "docs": "Bottom padding of the input group"
         },
         {
-          "name": "--label-color",
+          "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Color of label. Defaults to var(--nano-color-base-1000)."
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group"
         },
         {
-          "name": "--label-font-size",
+          "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Font size of label. Defaults to var(--nano-font-size-xs)."
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group"
         },
         {
-          "name": "--more-font-size",
+          "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs)."
+          "docs": "Top padding of the input group"
         },
         {
-          "name": "--padding-bottom",
+          "name": "--separator-border-radius",
           "annotation": "prop",
-          "docs": "Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm)."
+          "docs": "Border radius of the separator between boxes"
         },
         {
-          "name": "--padding-end",
+          "name": "--separator-color",
           "annotation": "prop",
-          "docs": "Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm)."
+          "docs": "Color of the separator between boxes"
         },
         {
-          "name": "--padding-start",
+          "name": "--separator-height",
           "annotation": "prop",
-          "docs": "Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm)."
+          "docs": "Height of the separator between boxes"
         },
         {
-          "name": "--padding-top",
+          "name": "--separator-width",
           "annotation": "prop",
-          "docs": "Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm)."
+          "docs": "Width of the separator between boxes"
         },
         {
-          "name": "--placeholder-color",
+          "name": "--width",
           "annotation": "prop",
-          "docs": "Color of placeholder. Defaults to var(--nano-color-neutral-1000)."
+          "docs": "Width of input boxes"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
-        },
-        {
-          "name": "end",
-          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
-        },
-        {
-          "name": "helper",
-          "docs": "helper text to accompany the form field underneath."
-        },
-        {
-          "name": "helper-end",
-          "docs": "helper text to accompany the form field on the side."
-        },
-        {
-          "name": "label",
-          "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
-        },
-        {
-          "name": "start",
-          "docs": "suitable for inline action buttons or icons that may add extra contextual information"
-        },
-        {
-          "name": "value-end",
-          "docs": "similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
-        },
-        {
-          "name": "value-start",
-          "docs": "similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist"
-        }
-      ],
-      "parts": [
-        {
-          "name": "date__dropdown",
-          "docs": ""
+          "docs": "The default slot for the input description."
         },
         {
-          "name": "date__picker",
-          "docs": ""
+          "name": "validity-icon",
+          "docs": "A slot for a custom validity icon. If not provided, a default icon will be used."
         }
       ],
-      "dependents": [
-        "nano-date-input",
-        "nano-global-nav"
-      ],
+      "parts": [],
+      "dependents": [],
       "dependencies": [
-        "nano-dropdown",
-        "nano-icon-button",
-        "nano-date-picker",
         "nano-icon"
       ],
       "dependencyGraph": {
-        "nano-input": [
-          "nano-dropdown",
-          "nano-icon-button",
-          "nano-date-picker",
-          "nano-icon"
-        ],
-        "nano-icon-button": [
-          "nano-icon",
-          "nano-tooltip"
-        ],
-        "nano-date-picker": [
+        "nano-input-otp": [
           "nano-icon"
-        ],
-        "nano-date-input": [
-          "nano-input"
-        ],
-        "nano-global-nav": [
-          "nano-input"
         ]
       }
     },
@@ -27165,6 +27762,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": true,
+          "docs": "If true, the tag will have a different background color.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "size",
           "type": "\"large\" | \"regular\"",
@@ -27937,6 +28563,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": "",