@nanoporetech-digital/components 8.0.0-alpha.7 → 8.0.0-alpha.9

package/docs-json.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-06-30T20:33:32",
+  "timestamp": "2025-07-04T11:17:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1751297804.fe5d130",
+    "version": "4.35.3",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -1408,7 +1408,12 @@
           "docs": "optional. Template string (format depends on 'tplEngine' property). May contain other algolia-... components with nested templates."
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "default-content",
+          "docs": ""
+        }
+      ],
       "dependents": [
         "nano-global-search-results"
       ],
@@ -3389,6 +3394,10 @@
           "name": "slot",
           "text": "img - The image of the card. Appears first."
         },
+        {
+          "name": "slot",
+          "text": "category - The category tag on a card. Appears on the bottom right corner of a card image."
+        },
         {
           "name": "slot",
           "text": "title - The title of the card. Appears second."
@@ -3522,6 +3531,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "category",
+          "docs": "The category tag on a card. Appears on the bottom right corner of a card image."
+        },
         {
           "name": "content",
           "docs": "The main content of the card. Appears third."
@@ -7051,7 +7064,7 @@
       "encapsulation": "scoped",
       "tag": "nano-date-input",
       "readme": "# nano-date-field\n\n\n",
-      "docs": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.\nIt has specific options for localisation, date formatting and validation.",
+      "docs": "Enables date selection and input in a form.",
       "docsTags": [
         {
           "name": "version",
@@ -10986,6 +10999,101 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/feature-box/feature-box.ts",
+      "encapsulation": "none",
+      "tag": "nano-feature-box",
+      "readme": "# nano-feature-box\n\n\n",
+      "docs": "Highlights a key message on a landing page.",
+      "docsTags": [
+        {
+          "name": "status",
+          "text": "new"
+        },
+        {
+          "name": "version",
+          "text": "8.0.0"
+        },
+        {
+          "name": "type",
+          "text": "CSS Only"
+        },
+        {
+          "name": "slot",
+          "text": "img - The image of the card. Appears first."
+        },
+        {
+          "name": "slot",
+          "text": "content - The main content of the card. Suitable for headings, paragraphs, and other text elements."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "imgPosition",
+          "type": "\"end\" | \"start\"",
+          "complexType": {
+            "original": "'start' | 'end'",
+            "resolved": "\"end\" | \"start\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "img-position",
+          "reflectToAttr": true,
+          "docs": "The position of the image of the feature-box (`start` being left on a l2r page)",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'start'"
+            }
+          ],
+          "default": "'start'",
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--bg",
+          "annotation": "prop",
+          "docs": "background of the feature box. Defaults to `var(--nano-color-basic-black)`;"
+        },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "text colour of feature box contents. Defaults to `var(--nano-color-basic-white)`;"
+        }
+      ],
+      "slots": [
+        {
+          "name": "content",
+          "docs": "The main content of the card. Suitable for headings, paragraphs, and other text elements."
+        },
+        {
+          "name": "img",
+          "docs": "The image of the card. Appears first."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/field-validator/field-validator.tsx",
       "encapsulation": "scoped",
@@ -11164,7 +11272,7 @@
               "ObservableMap": {
                 "location": "import",
                 "path": "@stencil/store",
-                "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
+                "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.3/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
               },
               "ValidatorValueStore": {
                 "location": "import",
@@ -13112,6 +13220,28 @@
           "parameters": [],
           "docs": "Send the current search term and selected index to a nested `nano-global-search-results`",
           "docsTags": []
+        },
+        {
+          "name": "triggerResize",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "triggerResize() => Promise<void>",
+          "parameters": [],
+          "docs": "Manually triggers the main menu bar resize behaviour. \nThis can be useful if you append new children to the global-nav",
+          "docsTags": []
         }
       ],
       "events": [
@@ -13860,17 +13990,22 @@
         {
           "name": "--grid-align-items",
           "annotation": "prop",
-          "docs": "alignment of items in the grid. Defaults to start"
+          "docs": "alignment of items in the grid. Defaults to `start`"
         },
         {
           "name": "--grid-col-gap",
           "annotation": "prop",
-          "docs": "gap between all columns. Defaults to theme's global padding"
+          "docs": "gap between all columns. Defaults to `var(--nano-spacing-md)`"
+        },
+        {
+          "name": "--grid-justify-items",
+          "annotation": "prop",
+          "docs": "justification of items in the grid. Defaults to `start`"
         },
         {
           "name": "--grid-row-gap",
           "annotation": "prop",
-          "docs": "gap between all rows. Defaults to theme's global padding"
+          "docs": "gap between all rows. Defaults to `var(--nano-spacing-md)`"
         }
       ],
       "slots": [
@@ -18455,8 +18590,16 @@
       "encapsulation": "shadow",
       "tag": "nano-menu-drawer",
       "readme": "# nano-app-menu\n\n\n",
-      "docs": "Menu drawer - digital specific navigation strip designed to be open (default) or closed.\nShows menu item logos only on minimised, expands to show entire menu item.\nUsed in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\nOnly one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.",
+      "docs": "\nDisplay navigation items in a collapsible drawer at the side of a UI.",
       "docsTags": [
+        {
+          "name": "status",
+          "text": "stable"
+        },
+        {
+          "name": "version",
+          "text": "1.0.0"
+        },
         {
           "name": "slot",
           "text": "foot - nav items to be placed at the bottom of the drawer"
@@ -18468,35 +18611,6 @@
       ],
       "usage": {},
       "props": [
-        {
-          "name": "hideHeight",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "hide-height",
-          "reflectToAttr": false,
-          "docs": "Should element hide and move items into the nano-global-nav when items are cut off\n(this will only work when nano-menu-drawer is displayed at full screen)",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "hideWidth",
           "type": "number",
@@ -18508,7 +18622,7 @@
           "mutable": false,
           "attr": "hide-width",
           "reflectToAttr": false,
-          "docs": "Screen width to hide the menu drawer and move the items into the nano-global-nav",
+          "docs": "Global-nav width to hide the menu drawer and move the items into the nano-global-nav",
           "docsTags": [
             {
               "name": "default",
@@ -18554,35 +18668,6 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "saveState",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "save-state",
-          "reflectToAttr": false,
-          "docs": "Save open state to localStorage",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [],
@@ -18597,12 +18682,6 @@
           "event": "nanoClose",
           "capture": false,
           "passive": false
-        },
-        {
-          "event": "nanoIsReady",
-          "target": "body",
-          "capture": false,
-          "passive": false
         }
       ],
       "styles": [],
@@ -18885,11 +18964,39 @@
         },
         {
           "name": "part",
-          "text": "secondary-wrapper - the div surrounding slotted secondary content"
+          "text": "label - the label text of the nav item"
         },
         {
           "name": "part",
-          "text": "secondary-mask - the div that is added when secondary content is shown"
+          "text": "modal - the div that contains the secondary content panel"
+        },
+        {
+          "name": "part",
+          "text": "modal--open - the div that contains the secondary content panel when open"
+        },
+        {
+          "name": "part",
+          "text": "modal--close - the div that contains the secondary content panel when closed"
+        },
+        {
+          "name": "part",
+          "text": "modal-content - the div that contains the secondary content panel content"
+        },
+        {
+          "name": "part",
+          "text": "modal-content--open - the div that contains the secondary content panel content when open"
+        },
+        {
+          "name": "part",
+          "text": "modal-mask - the div that covers the screen when the secondary content panel is open"
+        },
+        {
+          "name": "part",
+          "text": "close-button - the div that contains the close button for the secondary content panel"
+        },
+        {
+          "name": "part",
+          "text": "close-button-icon - the icon inside the close button for the secondary content panel"
         },
         {
           "name": "version",
@@ -19018,35 +19125,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "notification",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "notification",
-          "reflectToAttr": false,
-          "docs": "Will show an indicator badge - only when placed in a nano-menu-draw",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "open",
           "type": "boolean",
@@ -19269,6 +19347,11 @@
         }
       ],
       "styles": [
+        {
+          "name": "--icon-size",
+          "annotation": "prop",
+          "docs": "size of the icon. Defaults to `1em`"
+        },
         {
           "name": "--padding",
           "annotation": "prop",
@@ -19300,23 +19383,39 @@
       "parts": [
         {
           "name": "close-button",
-          "docs": ""
+          "docs": "the div that contains the close button for the secondary content panel"
+        },
+        {
+          "name": "close-button-icon",
+          "docs": "the icon inside the close button for the secondary content panel"
         },
         {
           "name": "label",
-          "docs": ""
+          "docs": "the label text of the nav item"
         },
         {
           "name": "modal",
-          "docs": ""
+          "docs": "the div that contains the secondary content panel"
+        },
+        {
+          "name": "modal--close",
+          "docs": "the div that contains the secondary content panel when closed"
+        },
+        {
+          "name": "modal--open",
+          "docs": "the div that contains the secondary content panel when open"
+        },
+        {
+          "name": "modal-content",
+          "docs": "the div that contains the secondary content panel content"
         },
         {
-          "name": "secondary-mask",
-          "docs": "the div that is added when secondary content is shown"
+          "name": "modal-content--open",
+          "docs": "the div that contains the secondary content panel content when open"
         },
         {
-          "name": "secondary-wrapper",
-          "docs": "the div surrounding slotted secondary content"
+          "name": "modal-mask",
+          "docs": "the div that covers the screen when the secondary content panel is open"
         },
         {
           "name": "trigger",
@@ -19419,7 +19518,7 @@
           "mutable": false,
           "attr": "filter-meta",
           "reflectToAttr": false,
-          "docs": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'",
+          "docs": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms.",
           "docsTags": [
             {
               "name": "default",
@@ -20750,6 +20849,14 @@
       "readme": "# nano-resize-observe\n\n\n",
       "docs": "A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
       "docsTags": [
+        {
+          "name": "status",
+          "text": "stable"
+        },
+        {
+          "name": "version",
+          "text": "1.0.0"
+        },
         {
           "name": "slot",
           "text": "- Main slot for any content."
@@ -23494,7 +23601,7 @@
               "Element": {
                 "location": "import",
                 "path": "@stencil/core",
-                "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
               },
               "HTMLElement": {
                 "location": "global",
@@ -23603,7 +23710,7 @@
               "Element": {
                 "location": "import",
                 "path": "@stencil/core",
-                "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
               }
             }
           },
@@ -23698,7 +23805,7 @@
               "Element": {
                 "location": "import",
                 "path": "@stencil/core",
-                "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
               }
             }
           },
@@ -23822,7 +23929,7 @@
               "Element": {
                 "location": "import",
                 "path": "@stencil/core",
-                "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
               }
             }
           },
@@ -23951,7 +24058,7 @@
               "Element": {
                 "location": "import",
                 "path": "@stencil/core",
-                "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
+                "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
               }
             }
           },
@@ -26885,10 +26992,10 @@
       "docstring": "",
       "path": "src/utils/popover.ts"
     },
-    "../../../stenciljs/internal/stencil-core/index.d.ts::EventEmitter": {
+    "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter": {
       "declaration": "any",
       "docstring": "",
-      "path": "../../../stenciljs/internal/stencil-core/index.d.ts"
+      "path": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts"
     },
     "src/utils/date-utils.ts::DaysOfWeek": {
       "declaration": "export enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}",
@@ -27015,10 +27122,10 @@
       "docstring": "",
       "path": "src/components/nav-item/nav-item-interface.d.ts"
     },
-    "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts::ObservableMap": {
+    "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.3/node_modules/@stencil/store/dist/index.d.ts::ObservableMap": {
       "declaration": "any",
       "docstring": "",
-      "path": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts"
+      "path": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.3/node_modules/@stencil/store/dist/index.d.ts"
     },
     "src/components/field-validator/field-validator-interface.d.ts::ValidatorValueStore": {
       "declaration": "export interface ValidatorValueStore {\n  [key: string]: any;\n}",
@@ -27091,7 +27198,7 @@
       "path": "src/components/select/select-interface.d.ts"
     },
     "src/components/slides/slides-interface.d.ts::FlickityOptions": {
-      "declaration": "export type FlickityOptions = Options & {\n  fullscreen?: boolean;\n  fade?: boolean;\n}",
+      "declaration": "export type FlickityOptions = Options & {\n  fullscreen?: boolean;\n  fade?: boolean;\n};",
       "docstring": "",
       "path": "src/components/slides/slides-interface.d.ts"
     },
@@ -27110,10 +27217,10 @@
       "docstring": "",
       "path": "src/components/slides/slides-interface.d.ts"
     },
-    "../../../stenciljs/internal/stencil-core/index.d.ts::Element": {
+    "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element": {
       "declaration": "any",
       "docstring": "",
-      "path": "../../../stenciljs/internal/stencil-core/index.d.ts"
+      "path": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts"
     }
   }
 }

package/docs-vscode.json

@@ -1301,7 +1301,7 @@
       "name": "nano-date-input",
       "description": {
         "kind": "markdown",
-        "value": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.\nIt has specific options for localisation, date formatting and validation."
+        "value": "Enables date selection and input in a form."
       },
       "attributes": [
         {
@@ -1792,6 +1792,27 @@
         }
       ]
     },
+    {
+      "name": "nano-feature-box",
+      "description": {
+        "kind": "markdown",
+        "value": "Highlights a key message on a landing page."
+      },
+      "attributes": [
+        {
+          "name": "img-position",
+          "description": "The position of the image of the feature-box (`start` being left on a l2r page)",
+          "values": [
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nano-field-validator",
       "description": {
@@ -2785,24 +2806,16 @@
       "name": "nano-menu-drawer",
       "description": {
         "kind": "markdown",
-        "value": "Menu drawer - digital specific navigation strip designed to be open (default) or closed.\nShows menu item logos only on minimised, expands to show entire menu item.\nUsed in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\nOnly one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens."
+        "value": "\nDisplay navigation items in a collapsible drawer at the side of a UI."
       },
       "attributes": [
-        {
-          "name": "hide-height",
-          "description": "Should element hide and move items into the nano-global-nav when items are cut off\n(this will only work when nano-menu-drawer is displayed at full screen)"
-        },
         {
           "name": "hide-width",
-          "description": "Screen width to hide the menu drawer and move the items into the nano-global-nav"
+          "description": "Global-nav width to hide the menu drawer and move the items into the nano-global-nav"
         },
         {
           "name": "open",
           "description": "Set the initial menu drawer open or closed"
-        },
-        {
-          "name": "save-state",
-          "description": "Save open state to localStorage"
         }
       ]
     },
@@ -2854,10 +2867,6 @@
           "name": "href",
           "description": "Href to link to. Alternatively, slot an `<a>` element"
         },
-        {
-          "name": "notification",
-          "description": "Will show an indicator badge - only when placed in a nano-menu-draw"
-        },
         {
           "name": "open",
           "description": "Whether a secondary menu should be or is currently open"
@@ -2899,7 +2908,7 @@
         },
         {
           "name": "filter-meta",
-          "description": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'"
+          "description": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms."
         },
         {
           "name": "href",