@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.4

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-23T20:53:39",
+  "timestamp": "2025-06-26T15:02:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.1-dev.1750682262.1ce9541",
@@ -5357,6 +5357,7 @@
       "parts": [],
       "dependents": [
         "nano-collapsible-comparison",
+        "nano-file-upload",
         "nano-global-nav"
       ],
       "dependencies": [],
@@ -5364,6 +5365,9 @@
         "nano-collapsible-comparison": [
           "nano-cta"
         ],
+        "nano-file-upload": [
+          "nano-cta"
+        ],
         "nano-global-nav": [
           "nano-cta"
         ]
@@ -6547,7 +6551,6 @@
         "nano-masked-overflow",
         "nano-resize-observe",
         "nano-progress-bar",
-        "nano-skeleton",
         "nano-spinner",
         "nano-icon",
         "nano-tooltip"
@@ -6557,7 +6560,6 @@
           "nano-masked-overflow",
           "nano-resize-observe",
           "nano-progress-bar",
-          "nano-skeleton",
           "nano-spinner",
           "nano-icon",
           "nano-tooltip"
@@ -11600,8 +11602,29 @@
       "encapsulation": "scoped",
       "tag": "nano-file-upload",
       "readme": "# nano-file-upload\n\n\n",
-      "docs": "A better UI experience for `input type=\"file\"` form controls.\n\n  - Drag and Drop\n  - Validation options\n  - Preview and manage multiple files",
-      "docsTags": [],
+      "docs": "Enables the selection of files for upload.",
+      "docsTags": [
+        {
+          "name": "version",
+          "text": "1.0.0"
+        },
+        {
+          "name": "status",
+          "text": "stable"
+        },
+        {
+          "name": "slot",
+          "text": "label - A label for the file input. If not provided, the `label` prop will be used."
+        },
+        {
+          "name": "slot",
+          "text": "helper - A helper text to display below the input."
+        },
+        {
+          "name": "slot",
+          "text": "- The default slot can be used to add additional content, such as instructions or a message."
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -11656,7 +11679,7 @@
           "setter": false
         },
         {
-          "name": "clearInput",
+          "name": "clearable",
           "type": "boolean",
           "complexType": {
             "original": "boolean",
@@ -11664,7 +11687,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "clear-input",
+          "attr": "clearable",
           "reflectToAttr": false,
           "docs": "If `true`, a clear icon will appear in the input when there is a value.\nClicking it clears the input. Only used within single file uploads.",
           "docsTags": [
@@ -11796,10 +11819,10 @@
         },
         {
           "name": "invalid",
-          "type": "boolean",
+          "type": "any",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
+            "original": "any",
+            "resolved": "any",
             "references": {}
           },
           "mutable": false,
@@ -11812,13 +11835,13 @@
             },
             {
               "name": "default",
-              "text": "false"
+              "text": "null"
             }
           ],
-          "default": "false",
+          "default": "null",
           "values": [
             {
-              "type": "boolean"
+              "type": "any"
             }
           ],
           "optional": false,
@@ -11845,9 +11868,9 @@
             }
           ],
           "optional": false,
-          "required": true,
-          "getter": false,
-          "setter": false
+          "required": false,
+          "getter": true,
+          "setter": true
         },
         {
           "name": "maxFileSize",
@@ -11889,7 +11912,7 @@
           "mutable": false,
           "attr": "max-files",
           "reflectToAttr": false,
-          "docs": "The maximum file size allowed per file (bytes).",
+          "docs": "The maximum number of files that can be selected. Defaults to 1",
           "docsTags": [
             {
               "name": "default",
@@ -11945,10 +11968,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "'Choose a file...'"
+              "text": "'Choose a file'"
             }
           ],
-          "default": "'Choose a file...'",
+          "default": "'Choose a file'",
           "values": [
             {
               "type": "string"
@@ -12032,10 +12055,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "'submit'"
+              "text": "'submitThenDirty'"
             }
           ],
-          "default": "'submit'",
+          "default": "'submitThenDirty'",
           "values": [
             {
               "value": "dirty",
@@ -12349,126 +12372,81 @@
       ],
       "styles": [
         {
-          "name": "--btn-bg",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-color-primary, #007495);"
-        },
-        {
-          "name": "--btn-icon-size",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-btn-icon-size, 1.4em);"
-        },
-        {
-          "name": "--btn-padding-bottom",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-btn-padding-bottom, .5em);"
-        },
-        {
-          "name": "--btn-padding-end",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-btn-padding-end, 1em);"
-        },
-        {
-          "name": "--btn-padding-start",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-btn-padding-start, 1em);"
-        },
-        {
-          "name": "--btn-padding-top",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-btn-padding-top, .5em);"
-        },
-        {
-          "name": "--btn-text",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-color-primary-contrast, #fff);"
-        },
-        {
-          "name": "--drop-bg",
+          "name": "--color-btn-bg - The background color for the button.",
           "annotation": "prop",
-          "docs": "Default value #f2f7f9;"
-        },
-        {
-          "name": "--drop-bg--invalid",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-input-background-color, white);"
-        },
-        {
-          "name": "--drop-border--invalid",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-color-danger-rgb, 239 65 53);"
+          "docs": ""
         },
         {
-          "name": "--drop-border-radius",
+          "name": "--color-btn-border - The border color for the button.",
           "annotation": "prop",
-          "docs": "Default value 5px;"
+          "docs": ""
         },
         {
-          "name": "--drop-border-tint",
+          "name": "--color-btn-text - The text color for the button.",
           "annotation": "prop",
-          "docs": "Default value var(--nano-color-primary-rgb, 0 116 149);"
+          "docs": ""
         },
         {
-          "name": "--drop-border-width",
+          "name": "--color-drop-bg - The background color for the drop area.",
           "annotation": "prop",
-          "docs": "Default value 2px;"
+          "docs": ""
         },
         {
-          "name": "--drop-height",
+          "name": "--color-drop-border - The border color for the drop area.",
           "annotation": "prop",
-          "docs": "Default value 3.5em;"
+          "docs": ""
         },
         {
-          "name": "--drop-text",
+          "name": "--color-drop-browse - The color for the \"Browse\" text in the drop area.",
           "annotation": "prop",
-          "docs": "Default value #918b86;"
+          "docs": ""
         },
         {
-          "name": "--help-msg-color",
+          "name": "--color-error - The color used for error messages and invalid states.",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-help-color, #616d6e);"
+          "docs": ""
         },
         {
-          "name": "--invalid-msg-color",
+          "name": "--color-error-light - The light variant of the error color. Used for the drop area background when invalid.",
           "annotation": "prop",
-          "docs": "Default value var(--nano-color-danger, #ef4135);"
+          "docs": ""
         },
         {
-          "name": "--invalid-msg-font-size",
+          "name": "--color-text - The default text color for labels and messages.",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-help-font-size, 0.75em);"
+          "docs": ""
         },
         {
-          "name": "--label-color",
+          "name": "--drop-height - The minimum height of the drop area.",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-label-color, \"currentcolor\");"
-        },
+          "docs": ""
+        }
+      ],
+      "slots": [
         {
-          "name": "--label-color--invalid",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-input-label-color-invalid, \"currentcolor\");"
+          "name": "",
+          "docs": "The default slot can be used to add additional content, such as instructions or a message."
         },
         {
-          "name": "--label-font-size",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-input-label-color, 1em);"
+          "name": "helper",
+          "docs": "A helper text to display below the input."
         },
         {
-          "name": "--label-padding",
-          "annotation": "prop",
-          "docs": "Default value var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));"
+          "name": "label",
+          "docs": "A label for the file input. If not provided, the `label` prop will be used."
         }
       ],
-      "slots": [],
       "parts": [],
       "dependents": [],
       "dependencies": [
+        "nano-cta",
         "nano-icon",
         "nano-tooltip",
         "nano-icon-button"
       ],
       "dependencyGraph": {
         "nano-file-upload": [
+          "nano-cta",
           "nano-icon",
           "nano-tooltip",
           "nano-icon-button"
@@ -14258,7 +14236,6 @@
           "nano-img"
         ],
         "nano-img": [
-          "nano-skeleton",
           "nano-resize-observe"
         ]
       }
@@ -15470,12 +15447,10 @@
         "nano-hero"
       ],
       "dependencies": [
-        "nano-skeleton",
         "nano-resize-observe"
       ],
       "dependencyGraph": {
         "nano-img": [
-          "nano-skeleton",
           "nano-resize-observe"
         ],
         "nano-hero": [
@@ -19698,67 +19673,30 @@
     },
     {
       "filePath": "src/components/progress-bar/progress-bar.tsx",
-      "encapsulation": "shadow",
+      "encapsulation": "none",
       "tag": "nano-progress-bar",
       "readme": "# nano-progress-bar\n\n\n",
       "docs": "Shows the status of an ongoing operation.",
       "docsTags": [
         {
           "name": "version",
-          "text": "3.0.0"
+          "text": "8.0.0"
         },
         {
           "name": "status",
-          "text": "stable"
-        },
-        {
-          "name": "slot",
-          "text": "- A label to show inside the indicator."
-        },
-        {
-          "name": "part",
-          "text": "base - The component's base wrapper."
+          "text": "new"
         },
         {
-          "name": "part",
-          "text": "indicator - The progress bar indicator."
+          "name": "type",
+          "text": "CSS Only"
         },
         {
-          "name": "part",
-          "text": "label - The progress bar label."
+          "name": "slot",
+          "text": "- Used for mandatory `<progress>` element and optional `<label>`"
         }
       ],
       "usage": {},
       "props": [
-        {
-          "name": "indeterminate",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "indeterminate",
-          "reflectToAttr": false,
-          "docs": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "showPercent",
           "type": "boolean",
@@ -19769,7 +19707,7 @@
           },
           "mutable": false,
           "attr": "show-percent",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.",
           "docsTags": [
             {
@@ -19789,27 +19727,36 @@
           "setter": false
         },
         {
-          "name": "value",
-          "type": "number",
+          "name": "size",
+          "type": "\"large\" | \"medium\" | \"small\"",
           "complexType": {
-            "original": "number",
-            "resolved": "number",
+            "original": "'small' | 'medium' | 'large'",
+            "resolved": "\"large\" | \"medium\" | \"small\"",
             "references": {}
           },
           "mutable": false,
-          "attr": "value",
-          "reflectToAttr": false,
-          "docs": "The progress bar's percentage, 0 to 100.",
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "The height of the progress-bar",
           "docsTags": [
             {
               "name": "default",
-              "text": "0"
+              "text": "'medium'"
             }
           ],
-          "default": "0",
+          "default": "'medium'",
           "values": [
             {
-              "type": "number"
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -19823,46 +19770,33 @@
       "listeners": [],
       "styles": [
         {
-          "name": "--height",
+          "name": "--border-radius",
           "annotation": "prop",
-          "docs": "The progress bar's height. Default 1em"
+          "docs": "Border radius of the progress bar. Defaults to 1.25rem;"
         },
         {
-          "name": "--indicator-color",
+          "name": "--height",
           "annotation": "prop",
-          "docs": "The indicator color. Default rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);"
+          "docs": "Height of the progress bar. Defaults to 0.625rem;"
         },
         {
-          "name": "--label-color",
+          "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "The label color. Default var(--nano-color-white, white);"
+          "docs": "Color of the progress indicator. Defaults to var(--nano-color-primary-1000);"
         },
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "The track color. Default rgb(var(--nano-track-rgb, 228 230 232) / 100%);"
+          "docs": "Color of the progress track. Defaults to var(--nano-color-neutral-300);"
         }
       ],
       "slots": [
         {
           "name": "",
-          "docs": "A label to show inside the indicator."
-        }
-      ],
-      "parts": [
-        {
-          "name": "base",
-          "docs": "The component's base wrapper."
-        },
-        {
-          "name": "indicator",
-          "docs": "The progress bar indicator."
-        },
-        {
-          "name": "label",
-          "docs": "The progress bar label."
+          "docs": "Used for mandatory `<progress>` element and optional `<label>`"
         }
       ],
+      "parts": [],
       "dependents": [
         "nano-data-table"
       ],
@@ -22291,90 +22225,6 @@
         ]
       }
     },
-    {
-      "filePath": "src/components/skeleton/skeleton.tsx",
-      "encapsulation": "shadow",
-      "tag": "nano-skeleton",
-      "readme": "# nano-skeleton\n\n\n",
-      "docs": "Skeletons are used to show where content will eventually be drawn.",
-      "docsTags": [
-        {
-          "name": "version",
-          "text": "1.0.0"
-        },
-        {
-          "name": "status",
-          "text": "stable"
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "animated",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "animated",
-          "reflectToAttr": false,
-          "docs": "When `true`, the skeleton will animate.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [
-        {
-          "name": "--base-color-rgb",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-rgb, 228 230 232);"
-        },
-        {
-          "name": "--color",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));"
-        },
-        {
-          "name": "--tint",
-          "annotation": "prop",
-          "docs": "default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));"
-        }
-      ],
-      "slots": [],
-      "parts": [],
-      "dependents": [
-        "nano-data-table",
-        "nano-img"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "nano-data-table": [
-          "nano-skeleton"
-        ],
-        "nano-img": [
-          "nano-skeleton"
-        ]
-      }
-    },
     {
       "filePath": "src/components/slides/slide.tsx",
       "encapsulation": "shadow",