@nanoporetech-digital/components 9.0.1 → 9.1.1

package/dist/types/components/global-nav/global-nav.d.ts

@@ -82,6 +82,7 @@ export declare class GlobalNav implements ComponentInterface {
     shouldResize: boolean;
     breakpoint: 0 | 1 | 2 | 3 | 4;
     breakpointChanged(): void;
+    private setNavItemHover;
     private debounceResetResize;
     private addMainmenuRo;
     private removeMainmenuRo;

package/dist/types/components/mdd/mdd-item.d.ts

@@ -0,0 +1,23 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+ * or as a collapsible `nano-details` in accordion mode.
+ *
+ * @slot label - the heading / title of the section
+ * @slot - the body content
+ *
+ * @part details - the underlying `nano-details` element (accordion mode only)
+ *
+ * @version 8.24.0
+ * @status experimental
+ */
+export declare class MddItem implements ComponentInterface {
+    private detailsEl;
+    host: HTMLNanoMddItemElement;
+    /** Controlled open state (used by nano-mdd in accordion mode) */
+    open: boolean;
+    /** Set by parent nano-mdd — switches between column and accordion rendering */
+    accordion: boolean;
+    openChanged(): void;
+    render(): any;
+}

package/dist/types/components/mdd/mdd.d.ts

@@ -0,0 +1,24 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+ * enforces accordion behaviour (only one item open at a time).
+ *
+ * @slot - `nano-mdd-item` elements
+ *
+ * @part grid - the inner grid wrapper
+ *
+ * @version 8.24.0
+ * @status experimental
+ */
+export declare class Mdd implements ComponentInterface {
+    host: HTMLNanoMddElement;
+    /** When true, only one item can be open at a time */
+    accordion: boolean;
+    accordionChanged(): void;
+    /** Listen for nano-details opening (composed:true bubbles through shadow boundaries) */
+    onDetailsOpen(e: CustomEvent & {
+        target: Element;
+    }): void;
+    private syncAccordionProp;
+    componentDidLoad(): void;
+}

package/dist/types/components/nav-item/nav-item.d.ts

@@ -30,6 +30,11 @@ export declare class NavItem implements ComponentInterface {
     private secondaryDiv;
     private slotCtrl;
     private controlElement;
+    private hoverTimer;
+    private openedByTouch;
+    private openedByClick;
+    private canHover;
+    private transitionAbort;
     private host;
     didOpen: boolean;
     isInMenuDrawer: boolean;
@@ -47,6 +52,9 @@ export declare class NavItem implements ComponentInterface {
     checkbox: boolean;
     /** Whether secondary menus should close on blur */
     closeOnBlur: boolean;
+    /** Open the secondary panel on hover (fine pointer / non-touch devices only) */
+    openOnHover: boolean;
+    openOnHoverChanged(): void;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose: EventEmitter<NavItemEventDetail>;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -63,6 +71,12 @@ export declare class NavItem implements ComponentInterface {
     openChange(): void;
     didOpenChange(): void;
     handleClose(e: KeyboardEvent): void;
+    private addHoverListeners;
+    private removeHoverListeners;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusOut;
+    private awaitTransition;
     private closeSecondary;
     private openSecondary;
     private toggleSecondary;
@@ -73,6 +87,7 @@ export declare class NavItem implements ComponentInterface {
     /** Opens the secondary nav panel if it is not open */
     openMenu(): Promise<void>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -2322,6 +2322,37 @@ export namespace Components {
          */
         "syncActiveItem": () => Promise<void>;
     }
+    /**
+     * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+     * enforces accordion behaviour (only one item open at a time).
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface NanoMdd {
+        /**
+          * When true, only one item can be open at a time
+          * @default false
+         */
+        "accordion": boolean;
+    }
+    /**
+     * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+     * or as a collapsible `nano-details` in accordion mode.
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface NanoMddItem {
+        /**
+          * Set by parent nano-mdd — switches between column and accordion rendering
+          * @default false
+         */
+        "accordion": boolean;
+        /**
+          * Controlled open state (used by nano-mdd in accordion mode)
+          * @default false
+         */
+        "open": boolean;
+    }
     /**
      * Menus provide a list of options for the user to choose from.
      * @version 1.0.0
@@ -2441,6 +2472,11 @@ export namespace Components {
           * Opens the secondary nav panel if it is not open
          */
         "openMenu": () => Promise<void>;
+        /**
+          * Open the secondary panel on hover (fine pointer / non-touch devices only)
+          * @default false
+         */
+        "openOnHover": boolean;
         /**
           * Whether this menu item is currently 'selected'
           * @default false
@@ -4539,6 +4575,30 @@ declare global {
         prototype: HTMLNanoMaskedOverflowElement;
         new (): HTMLNanoMaskedOverflowElement;
     };
+    /**
+     * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+     * enforces accordion behaviour (only one item open at a time).
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface HTMLNanoMddElement extends Components.NanoMdd, HTMLStencilElement {
+    }
+    var HTMLNanoMddElement: {
+        prototype: HTMLNanoMddElement;
+        new (): HTMLNanoMddElement;
+    };
+    /**
+     * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+     * or as a collapsible `nano-details` in accordion mode.
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface HTMLNanoMddItemElement extends Components.NanoMddItem, HTMLStencilElement {
+    }
+    var HTMLNanoMddItemElement: {
+        prototype: HTMLNanoMddItemElement;
+        new (): HTMLNanoMddItemElement;
+    };
     interface HTMLNanoMenuElementEventMap {
         "nanoFocus": any;
         "nanoBlur": any;
@@ -5127,6 +5187,8 @@ declare global {
         "nano-input-otp": HTMLNanoInputOtpElement;
         "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-masked-overflow": HTMLNanoMaskedOverflowElement;
+        "nano-mdd": HTMLNanoMddElement;
+        "nano-mdd-item": HTMLNanoMddItemElement;
         "nano-menu": HTMLNanoMenuElement;
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
         "nano-more-less": HTMLNanoMoreLessElement;
@@ -7528,6 +7590,37 @@ declare namespace LocalJSX {
          */
         "showIndicator"?: boolean;
     }
+    /**
+     * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+     * enforces accordion behaviour (only one item open at a time).
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface NanoMdd {
+        /**
+          * When true, only one item can be open at a time
+          * @default false
+         */
+        "accordion"?: boolean;
+    }
+    /**
+     * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+     * or as a collapsible `nano-details` in accordion mode.
+     * @version 8.24.0
+     * @status experimental
+     */
+    interface NanoMddItem {
+        /**
+          * Set by parent nano-mdd — switches between column and accordion rendering
+          * @default false
+         */
+        "accordion"?: boolean;
+        /**
+          * Controlled open state (used by nano-mdd in accordion mode)
+          * @default false
+         */
+        "open"?: boolean;
+    }
     /**
      * Menus provide a list of options for the user to choose from.
      * @version 1.0.0
@@ -7651,6 +7744,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "open"?: boolean;
+        /**
+          * Open the secondary panel on hover (fine pointer / non-touch devices only)
+          * @default false
+         */
+        "openOnHover"?: boolean;
         /**
           * Whether this menu item is currently 'selected'
           * @default false
@@ -8787,6 +8885,8 @@ declare namespace LocalJSX {
         "nano-input-otp": NanoInputOtp;
         "nano-intersection-observe": NanoIntersectionObserve;
         "nano-masked-overflow": NanoMaskedOverflow;
+        "nano-mdd": NanoMdd;
+        "nano-mdd-item": NanoMddItem;
         "nano-menu": NanoMenu;
         "nano-menu-drawer": NanoMenuDrawer;
         "nano-more-less": NanoMoreLess;
@@ -9094,6 +9194,20 @@ declare module "@stencil/core" {
              * @status stable
              */
             "nano-masked-overflow": LocalJSX.NanoMaskedOverflow & JSXBase.HTMLAttributes<HTMLNanoMaskedOverflowElement>;
+            /**
+             * Mega drop-down container. Groups `nano-mdd-item` elements and optionally
+             * enforces accordion behaviour (only one item open at a time).
+             * @version 8.24.0
+             * @status experimental
+             */
+            "nano-mdd": LocalJSX.NanoMdd & JSXBase.HTMLAttributes<HTMLNanoMddElement>;
+            /**
+             * An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,
+             * or as a collapsible `nano-details` in accordion mode.
+             * @version 8.24.0
+             * @status experimental
+             */
+            "nano-mdd-item": LocalJSX.NanoMddItem & JSXBase.HTMLAttributes<HTMLNanoMddItemElement>;
             /**
              * Menus provide a list of options for the user to choose from.
              * @version 1.0.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-08T14:06:57",
+  "timestamp": "2026-10-13T11:52:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -9208,6 +9208,7 @@
       ],
       "dependents": [
         "nano-in-page-nav",
+        "nano-mdd-item",
         "nano-step-accordion"
       ],
       "dependencies": [
@@ -9220,6 +9221,9 @@
         "nano-in-page-nav": [
           "nano-details"
         ],
+        "nano-mdd-item": [
+          "nano-details"
+        ],
         "nano-step-accordion": [
           "nano-details"
         ]
@@ -19116,6 +19120,210 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/mdd/mdd.tsx",
+      "encapsulation": "none",
+      "tag": "nano-mdd",
+      "readme": "# nano-mdd-item\n\n\n",
+      "docs": "Mega drop-down container. Groups `nano-mdd-item` elements and optionally\nenforces accordion behaviour (only one item open at a time).",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- `nano-mdd-item` elements"
+        },
+        {
+          "name": "part",
+          "text": "grid - the inner grid wrapper"
+        },
+        {
+          "name": "version",
+          "text": "8.24.0"
+        },
+        {
+          "name": "status",
+          "text": "experimental"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "accordion",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "accordion",
+          "reflectToAttr": true,
+          "docs": "When true, only one item can be open at a time",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [
+        {
+          "event": "nanoOpen",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "`nano-mdd-item` elements"
+        }
+      ],
+      "parts": [
+        {
+          "name": "grid",
+          "docs": "the inner grid wrapper"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/mdd/mdd-item.tsx",
+      "encapsulation": "none",
+      "tag": "nano-mdd-item",
+      "readme": "# nano-mdd-item\n\n\n",
+      "docs": "An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,\nor as a collapsible `nano-details` in accordion mode.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "label - the heading / title of the section"
+        },
+        {
+          "name": "slot",
+          "text": "- the body content"
+        },
+        {
+          "name": "part",
+          "text": "details - the underlying `nano-details` element (accordion mode only)"
+        },
+        {
+          "name": "version",
+          "text": "8.24.0"
+        },
+        {
+          "name": "status",
+          "text": "experimental"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "accordion",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "accordion",
+          "reflectToAttr": true,
+          "docs": "Set by parent nano-mdd — switches between column and accordion rendering",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "Controlled open state (used by nano-mdd in accordion mode)",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "the body content"
+        },
+        {
+          "name": "label",
+          "docs": "the heading / title of the section"
+        }
+      ],
+      "parts": [
+        {
+          "name": "details",
+          "docs": "the underlying `nano-details` element (accordion mode only)"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "nano-details"
+      ],
+      "dependencyGraph": {
+        "nano-mdd-item": [
+          "nano-details"
+        ],
+        "nano-details": [
+          "nano-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/menu/menu.tsx",
       "encapsulation": "shadow",
@@ -20007,6 +20215,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "openOnHover",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "open-on-hover",
+          "reflectToAttr": false,
+          "docs": "Open the secondary panel on hover (fine pointer / non-touch devices only)",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "selected",
           "type": "boolean",

package/docs-vscode.json

@@ -2832,6 +2832,36 @@
         }
       ]
     },
+    {
+      "name": "nano-mdd",
+      "description": {
+        "kind": "markdown",
+        "value": "Mega drop-down container. Groups `nano-mdd-item` elements and optionally\nenforces accordion behaviour (only one item open at a time)."
+      },
+      "attributes": [
+        {
+          "name": "accordion",
+          "description": "When true, only one item can be open at a time"
+        }
+      ]
+    },
+    {
+      "name": "nano-mdd-item",
+      "description": {
+        "kind": "markdown",
+        "value": "An item within a `nano-mdd`. Renders as a plain labelled column in grid mode,\nor as a collapsible `nano-details` in accordion mode."
+      },
+      "attributes": [
+        {
+          "name": "accordion",
+          "description": "Set by parent nano-mdd — switches between column and accordion rendering"
+        },
+        {
+          "name": "open",
+          "description": "Controlled open state (used by nano-mdd in accordion mode)"
+        }
+      ]
+    },
     {
       "name": "nano-menu",
       "description": {
@@ -2933,6 +2963,10 @@
           "name": "open",
           "description": "Whether a secondary menu should be or is currently open"
         },
+        {
+          "name": "open-on-hover",
+          "description": "Open the secondary panel on hover (fine pointer / non-touch devices only)"
+        },
         {
           "name": "selected",
           "description": "Whether this menu item is currently 'selected'"