@nanoporetech-digital/components 8.0.0-alpha.6 → 8.0.0-alpha.8

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

@@ -0,0 +1,14 @@
+/**
+ * Highlights a key message on a landing page.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ *
+ * @slot img - The image of the card. Appears first.
+ * @slot content - The main content of the card. Suitable for headings, paragraphs, and other text elements.
+ */
+export declare class NanoFeatureBox {
+    /** The position of the image of the feature-box (`start` being left on a l2r page) */
+    imgPosition?: 'start' | 'end';
+}

package/dist/types/components/slides/slides-interface.d.ts

@@ -28,7 +28,7 @@ export interface Flickity
 export type FlickityOptions = Options & {
   fullscreen?: boolean;
   fade?: boolean;
-}
+};
 
 export type DragEvent = TouchDragEvent | PointerDragEvent;
 

package/dist/types/components.d.ts

@@ -1306,6 +1306,19 @@ export namespace Components {
          */
         "tetherTo": HTMLElement;
     }
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface NanoFeatureBox {
+        /**
+          * The position of the image of the feature-box (`start` being left on a l2r page)
+          * @default 'start'
+         */
+        "imgPosition"?: 'start' | 'end';
+    }
     /**
      * A toolbox to expose a form's data model and validation state
      * @version 3.0.0
@@ -3992,6 +4005,18 @@ declare global {
         prototype: HTMLNanoDropdownElement;
         new (): HTMLNanoDropdownElement;
     };
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface HTMLNanoFeatureBoxElement extends Components.NanoFeatureBox, HTMLStencilElement {
+    }
+    var HTMLNanoFeatureBoxElement: {
+        prototype: HTMLNanoFeatureBoxElement;
+        new (): HTMLNanoFeatureBoxElement;
+    };
     interface HTMLNanoFieldValidatorElementEventMap {
         "nanoPayloadChange": ValidatorValueStore;
         "nanoSubmit": any;
@@ -4768,6 +4793,7 @@ declare global {
         "nano-dialog": HTMLNanoDialogElement;
         "nano-drawer": HTMLNanoDrawerElement;
         "nano-dropdown": HTMLNanoDropdownElement;
+        "nano-feature-box": HTMLNanoFeatureBoxElement;
         "nano-field-validator": HTMLNanoFieldValidatorElement;
         "nano-file-upload": HTMLNanoFileUploadElement;
         "nano-footer": HTMLNanoFooterElement;
@@ -6137,6 +6163,19 @@ declare namespace LocalJSX {
          */
         "tetherTo"?: HTMLElement;
     }
+    /**
+     * Highlights a key message on a landing page.
+     * @status new
+     * @version 8.0.0
+     * @type CSS Only
+     */
+    interface NanoFeatureBox {
+        /**
+          * The position of the image of the feature-box (`start` being left on a l2r page)
+          * @default 'start'
+         */
+        "imgPosition"?: 'start' | 'end';
+    }
     /**
      * A toolbox to expose a form's data model and validation state
      * @version 3.0.0
@@ -8209,6 +8248,7 @@ declare namespace LocalJSX {
         "nano-dialog": NanoDialog;
         "nano-drawer": NanoDrawer;
         "nano-dropdown": NanoDropdown;
+        "nano-feature-box": NanoFeatureBox;
         "nano-field-validator": NanoFieldValidator;
         "nano-file-upload": NanoFileUpload;
         "nano-footer": NanoFooter;
@@ -8410,6 +8450,13 @@ declare module "@stencil/core" {
              * @status stable
              */
             "nano-dropdown": LocalJSX.NanoDropdown & JSXBase.HTMLAttributes<HTMLNanoDropdownElement>;
+            /**
+             * Highlights a key message on a landing page.
+             * @status new
+             * @version 8.0.0
+             * @type CSS Only
+             */
+            "nano-feature-box": LocalJSX.NanoFeatureBox & JSXBase.HTMLAttributes<HTMLNanoFeatureBoxElement>;
             /**
              * A toolbox to expose a form's data model and validation state
              * @version 3.0.0

package/docs-json.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-06-28T12:18:31",
+  "timestamp": "2025-07-01T15:25:42",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1750682262.1ce9541",
+    "version": "4.35.1-dev.1751297804.fe5d130",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -3389,6 +3389,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 +3526,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."
@@ -10986,6 +10994,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",
@@ -23309,6 +23412,11 @@
           "annotation": "prop",
           "docs": "next / prev bg color. Default var(--nano-color-base-0);"
         },
+        {
+          "name": "--navbtns-height",
+          "annotation": "prop",
+          "docs": "next / prev button height. Default 2.75rem;"
+        },
         {
           "name": "--navbtns-icon-color",
           "annotation": "prop",
@@ -23318,6 +23426,11 @@
           "name": "--navbtns-icon-color-disabled",
           "annotation": "prop",
           "docs": "next / prev icon color. Default var(--dot-color-active);"
+        },
+        {
+          "name": "--navbtns-width",
+          "annotation": "prop",
+          "docs": "next / prev button width. Default 1.875rem;"
         }
       ],
       "slots": [
@@ -27081,7 +27194,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"
     },

package/docs-vscode.json

@@ -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": {