@nanoporetech-digital/components 8.4.3 → 8.5.1

package/dist/types/components/in-page-nav/in-page-nav.d.ts

@@ -6,24 +6,32 @@ import { ComponentInterface } from '../../stencil-public-runtime';
  * @version 8.0.0
  *
  * @slot default - The default slot.
- * @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
  * @slot back - For a link to navigate back to the previous section.
  * @slot accessory - To add nav accessories, such as a text input.
  *
  * @part root - The root element of the navigation.
  */
 export declare class NanoInPageNav implements ComponentInterface {
-    /** Whether the headers should be sticky (small screen only). Defaults to true */
-    stickyHeaders?: boolean;
-    el: HTMLElement;
+    private scrollElement;
+    host: HTMLElement;
+    autoExternalLinks: boolean;
+    private io;
     private mobileNavWrapper;
     private slotCtrl;
-    componentDidLoad(): void;
+    /** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
+    autoActive?: boolean;
+    /** Menus that contain links to external pages should have different styling from in-page anchors */
+    externalLinks?: true | false | 'auto';
     private createMobileMenu;
     /**
      * Creates a nano-details element with the given label and submenu.
      * @returns a nano-details element
      */
     private createDetails;
+    private assessLinks;
+    private handleSlotChange;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -1909,10 +1909,15 @@ export namespace Components {
      */
     interface NanoInPageNav {
         /**
-          * Whether the headers should be sticky (small screen only). Defaults to true
+          * Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true
           * @default true
          */
-        "stickyHeaders"?: boolean;
+        "autoActive"?: boolean;
+        /**
+          * Menus that contain links to external pages should have different styling from in-page anchors
+          * @default 'auto'
+         */
+        "externalLinks"?: true | false | 'auto';
     }
     /**
      * Increments and decrements a value using an [input](/components/input).
@@ -6944,10 +6949,15 @@ declare namespace LocalJSX {
      */
     interface NanoInPageNav {
         /**
-          * Whether the headers should be sticky (small screen only). Defaults to true
+          * Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true
           * @default true
          */
-        "stickyHeaders"?: boolean;
+        "autoActive"?: boolean;
+        /**
+          * Menus that contain links to external pages should have different styling from in-page anchors
+          * @default 'auto'
+         */
+        "externalLinks"?: true | false | 'auto';
     }
     /**
      * Increments and decrements a value using an [input](/components/input).

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-27T15:31:33",
+  "timestamp": "2025-09-03T09:56:02",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3358,7 +3358,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/sN_eAsgS/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/RXAuYz49/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -15713,10 +15713,6 @@
           "name": "slot",
           "text": "default - The default slot."
         },
-        {
-          "name": "slot",
-          "text": "mobile - An escape hatch to add a custom mobile nav to override the provided one."
-        },
         {
           "name": "slot",
           "text": "back - For a link to navigate back to the previous section."
@@ -15733,7 +15729,7 @@
       "usage": {},
       "props": [
         {
-          "name": "stickyHeaders",
+          "name": "autoActive",
           "type": "boolean",
           "complexType": {
             "original": "boolean",
@@ -15741,9 +15737,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "sticky-headers",
+          "attr": "auto-active",
           "reflectToAttr": false,
-          "docs": "Whether the headers should be sticky (small screen only). Defaults to true",
+          "docs": "Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true",
           "docsTags": [
             {
               "name": "default",
@@ -15760,6 +15756,39 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "externalLinks",
+          "type": "\"auto\" | boolean",
+          "complexType": {
+            "original": "true | false | 'auto'",
+            "resolved": "\"auto\" | boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "external-links",
+          "reflectToAttr": false,
+          "docs": "Menus that contain links to external pages should have different styling from in-page anchors",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'auto'"
+            }
+          ],
+          "default": "'auto'",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -15834,10 +15863,6 @@
         {
           "name": "default",
           "docs": "The default slot."
-        },
-        {
-          "name": "mobile",
-          "docs": "An escape hatch to add a custom mobile nav to override the provided one."
         }
       ],
       "parts": [

package/docs-vscode.json

@@ -2401,8 +2401,17 @@
       },
       "attributes": [
         {
-          "name": "sticky-headers",
-          "description": "Whether the headers should be sticky (small screen only). Defaults to true"
+          "name": "auto-active",
+          "description": "Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true"
+        },
+        {
+          "name": "external-links",
+          "description": "Menus that contain links to external pages should have different styling from in-page anchors",
+          "values": [
+            {
+              "name": "auto"
+            }
+          ]
         }
       ]
     },

package/hydrate/index.js

@@ -22623,7 +22623,7 @@ class NanoIconItem {
     }; }
 }
 
-const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
+const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
 
 /**
  * In-page navigation allows users to quickly find different sections on a page.
@@ -22632,7 +22632,6 @@ const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{
  * @version 8.0.0
  *
  * @slot default - The default slot.
- * @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
  * @slot back - For a link to navigate back to the previous section.
  * @slot accessory - To add nav accessories, such as a text input.
  *
@@ -22642,19 +22641,18 @@ class NanoInPageNav {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    /** Whether the headers should be sticky (small screen only). Defaults to true */
-    stickyHeaders = true;
-    get el() { return getElement(this); }
-    // private stickyClass = 'sticky';
-    // private stuckClass: string = 'stuck';
-    // private stickyObserver!: IntersectionObserver;
+    scrollElement;
+    get host() { return getElement(this); }
+    autoExternalLinks = false;
+    io;
     mobileNavWrapper;
-    slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
-    componentDidLoad() {
-        this.createMobileMenu();
-    }
+    slotCtrl = new HasSlotController(this, '[default]', 'back', 'accessory');
+    /** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
+    autoActive = true;
+    /** Menus that contain links to external pages should have different styling from in-page anchors */
+    externalLinks = 'auto';
     createMobileMenu() {
-        const ul = getDirectChildren(this.el, 'ul')[0];
+        const ul = getDirectChildren(this.host, 'ul')[0];
         if (!ul)
             return;
         const cloned = ul.cloneNode(true);
@@ -22680,15 +22678,94 @@ class NanoInPageNav {
         node.appendChild(submenu);
         return node;
     }
+    assessLinks() {
+        const anchors = this.host.querySelectorAll('a[href^="#"]');
+        if (this.externalLinks === 'auto') {
+            const allLinks = this.host.querySelectorAll('a[href]');
+            if (anchors.length > allLinks.length / 2) {
+                this.autoExternalLinks = false;
+            }
+            else {
+                this.autoExternalLinks = true;
+            }
+        }
+        if (!this.autoActive)
+            return;
+        const sections = [];
+        anchors.forEach((link) => {
+            const id = link.getAttribute('href')?.substring(1);
+            if (!id)
+                return;
+            const section = document.getElementById(id);
+            if (section)
+                sections.push(section);
+        });
+        if (this.io)
+            this.io.disconnect();
+        this.io = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                const id = entry.target.getAttribute('id');
+                if (!id)
+                    return;
+                const link = this.host.querySelector(`a[href="#${id}"]`);
+                if (!link)
+                    return;
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('in-view');
+                }
+                else {
+                    entry.target.classList.remove('in-view');
+                }
+            });
+            // pick the section nearest to the top
+            const visible = sections.filter((s) => s.classList.contains('in-view'));
+            if (visible.length) {
+                // sort by boundingClientRect.top
+                visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
+                anchors.forEach((l) => l.classList.remove('is-active'));
+                const topId = visible[0].getAttribute('id');
+                const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
+                activeLink?.classList.add('is-active');
+            }
+        }, {
+            root: this.scrollElement === document.documentElement
+                ? null
+                : this.scrollElement,
+            rootMargin: '0px 0px -60% 0px',
+            threshold: 0,
+        });
+        sections.forEach((section) => this.io.observe(section));
+    }
+    handleSlotChange = () => {
+        return;
+    };
+    componentDidLoad() {
+        this.createMobileMenu();
+    }
+    connectedCallback() {
+        return;
+    }
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = null;
+        }
+    }
     render() {
-        return (h(Host, { key: '8b88cd04f960c4c8ea7ae2dd79a6ec82694570e6', class: "nano-in-page-nav" }, h("nav", { key: '4df4a5ef8aecad356c6ad1acd9a6a886edce8139', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'ed1315ac689d77ffd4005df5a6eeb01f3fc9f599', class: "header" }, h("slot", { key: '0db0fb3919268a14fb924b292302c563181e87c0', name: "back" }), h("slot", { key: '95a5fafda43239ef7cc9208efc254fb335bc9f66', name: "accessory" }))), h("div", { key: '5a273c033b193efe7d4c72c3ccfdbf30b4442eae', class: "desktop-nav" }, h("slot", { key: '7d0cff62b54d21daa5b8e7d9551a9d0ed08cfe6f' })), h("nano-details", { key: 'c337ce8ac65560e5914f8566304f9382540316f2', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+        return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
+                'nano-in-page-nav': true,
+                'external-links': this.externalLinks === true ||
+                    (this.externalLinks === 'auto' && this.autoExternalLinks),
+            } }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
     static get style() { return inPageNavCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "nano-in-page-nav",
         "$members$": {
-            "stickyHeaders": [4, "sticky-headers"]
+            "autoActive": [4, "auto-active"],
+            "externalLinks": [8, "external-links"],
+            "autoExternalLinks": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -31499,7 +31576,7 @@ const urls$1 = {
 };
 const search$1 = {
 	app_id: "N8NZI5A47F",
-	api_key: "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
+	api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
 	indeces: [
 		{
 			index: "ont_prod_en_v3",
@@ -31717,7 +31794,7 @@ const urls = {
 };
 const search = {
 	app_id: "N8NZI5A47F",
-	api_key: "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
+	api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
 	indeces: [
 		{
 			index: "ont_prod_en_v3",

package/hydrate/index.mjs

@@ -22621,7 +22621,7 @@ class NanoIconItem {
     }; }
 }
 
-const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
+const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
 
 /**
  * In-page navigation allows users to quickly find different sections on a page.
@@ -22630,7 +22630,6 @@ const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{
  * @version 8.0.0
  *
  * @slot default - The default slot.
- * @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
  * @slot back - For a link to navigate back to the previous section.
  * @slot accessory - To add nav accessories, such as a text input.
  *
@@ -22640,19 +22639,18 @@ class NanoInPageNav {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    /** Whether the headers should be sticky (small screen only). Defaults to true */
-    stickyHeaders = true;
-    get el() { return getElement(this); }
-    // private stickyClass = 'sticky';
-    // private stuckClass: string = 'stuck';
-    // private stickyObserver!: IntersectionObserver;
+    scrollElement;
+    get host() { return getElement(this); }
+    autoExternalLinks = false;
+    io;
     mobileNavWrapper;
-    slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
-    componentDidLoad() {
-        this.createMobileMenu();
-    }
+    slotCtrl = new HasSlotController(this, '[default]', 'back', 'accessory');
+    /** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
+    autoActive = true;
+    /** Menus that contain links to external pages should have different styling from in-page anchors */
+    externalLinks = 'auto';
     createMobileMenu() {
-        const ul = getDirectChildren(this.el, 'ul')[0];
+        const ul = getDirectChildren(this.host, 'ul')[0];
         if (!ul)
             return;
         const cloned = ul.cloneNode(true);
@@ -22678,15 +22676,94 @@ class NanoInPageNav {
         node.appendChild(submenu);
         return node;
     }
+    assessLinks() {
+        const anchors = this.host.querySelectorAll('a[href^="#"]');
+        if (this.externalLinks === 'auto') {
+            const allLinks = this.host.querySelectorAll('a[href]');
+            if (anchors.length > allLinks.length / 2) {
+                this.autoExternalLinks = false;
+            }
+            else {
+                this.autoExternalLinks = true;
+            }
+        }
+        if (!this.autoActive)
+            return;
+        const sections = [];
+        anchors.forEach((link) => {
+            const id = link.getAttribute('href')?.substring(1);
+            if (!id)
+                return;
+            const section = document.getElementById(id);
+            if (section)
+                sections.push(section);
+        });
+        if (this.io)
+            this.io.disconnect();
+        this.io = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                const id = entry.target.getAttribute('id');
+                if (!id)
+                    return;
+                const link = this.host.querySelector(`a[href="#${id}"]`);
+                if (!link)
+                    return;
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('in-view');
+                }
+                else {
+                    entry.target.classList.remove('in-view');
+                }
+            });
+            // pick the section nearest to the top
+            const visible = sections.filter((s) => s.classList.contains('in-view'));
+            if (visible.length) {
+                // sort by boundingClientRect.top
+                visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
+                anchors.forEach((l) => l.classList.remove('is-active'));
+                const topId = visible[0].getAttribute('id');
+                const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
+                activeLink?.classList.add('is-active');
+            }
+        }, {
+            root: this.scrollElement === document.documentElement
+                ? null
+                : this.scrollElement,
+            rootMargin: '0px 0px -60% 0px',
+            threshold: 0,
+        });
+        sections.forEach((section) => this.io.observe(section));
+    }
+    handleSlotChange = () => {
+        return;
+    };
+    componentDidLoad() {
+        this.createMobileMenu();
+    }
+    connectedCallback() {
+        return;
+    }
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = null;
+        }
+    }
     render() {
-        return (h(Host, { key: '8b88cd04f960c4c8ea7ae2dd79a6ec82694570e6', class: "nano-in-page-nav" }, h("nav", { key: '4df4a5ef8aecad356c6ad1acd9a6a886edce8139', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'ed1315ac689d77ffd4005df5a6eeb01f3fc9f599', class: "header" }, h("slot", { key: '0db0fb3919268a14fb924b292302c563181e87c0', name: "back" }), h("slot", { key: '95a5fafda43239ef7cc9208efc254fb335bc9f66', name: "accessory" }))), h("div", { key: '5a273c033b193efe7d4c72c3ccfdbf30b4442eae', class: "desktop-nav" }, h("slot", { key: '7d0cff62b54d21daa5b8e7d9551a9d0ed08cfe6f' })), h("nano-details", { key: 'c337ce8ac65560e5914f8566304f9382540316f2', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+        return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
+                'nano-in-page-nav': true,
+                'external-links': this.externalLinks === true ||
+                    (this.externalLinks === 'auto' && this.autoExternalLinks),
+            } }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
     static get style() { return inPageNavCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "nano-in-page-nav",
         "$members$": {
-            "stickyHeaders": [4, "sticky-headers"]
+            "autoActive": [4, "auto-active"],
+            "externalLinks": [8, "external-links"],
+            "autoExternalLinks": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -31497,7 +31574,7 @@ const urls$1 = {
 };
 const search$1 = {
 	app_id: "N8NZI5A47F",
-	api_key: "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
+	api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
 	indeces: [
 		{
 			index: "ont_prod_en_v3",
@@ -31715,7 +31792,7 @@ const urls = {
 };
 const search = {
 	app_id: "N8NZI5A47F",
-	api_key: "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
+	api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
 	indeces: [
 		{
 			index: "ont_prod_en_v3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.4.3",
+  "version": "8.5.1",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.4.3"
+    "@nanoporetech-digital/style": "8.5.1"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",