@nanoporetech-digital/components 8.4.2 → 8.5.0

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-26T10:39:49",
+  "timestamp": "2025-09-02T13:42:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3358,7 +3358,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/WUhA-BsM/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/hHVyLZ9F/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$": "-",
@@ -28711,7 +28788,7 @@ drag();
 nowNext();
 player();
 
-const slidesCss = ":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{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--navbtns-width:1.875rem;--navbtns-height:2.75rem;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;--flip-icon-ltr:0;--flip-icon-rtl:1;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host:dir(rtl){--flip-icon-ltr:1;--flip-icon-rtl:0}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;max-block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.button-icon{display:block}.button-icon::after{content:\"\";display:block;background-size:cover;inline-size:var(--navbtns-width);block-size:var(--navbtns-height);background-color:var(--navbtns-icon-color);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);transition:color var(--nano-transition-fast) ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg * var(--flip-icon-ltr));-webkit-mask-size:cover;mask-size:cover}.button-icon--previous::after{rotate:calc(180deg * var(--flip-icon-rtl))}.flickity-button:disabled .button-icon::after{background-color:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;inset-block-end:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentcolor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":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{--dot-color:var(--nano-color-neutral-400);--dot-color-active:var(--nano-color-primary-1000);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:transparent;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:transparent;--navbtns-width:1.875rem;--navbtns-height:2.75rem;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:transparent;--flip-icon-ltr:0;--flip-icon-rtl:1;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host:dir(rtl){--flip-icon-ltr:1;--flip-icon-rtl:0}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;max-block-size:300px;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.button-icon{display:block}.button-icon::after{content:\"\";display:block;background-size:cover;inline-size:var(--navbtns-width);block-size:var(--navbtns-height);background-color:var(--navbtns-icon-color);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);transition:color var(--nano-transition-fast) ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;margin-inline-start:auto;rotate:calc(180deg * var(--flip-icon-ltr));-webkit-mask-size:cover;mask-size:cover}.button-icon--previous::after{rotate:calc(180deg * var(--flip-icon-rtl))}.flickity-button:disabled .button-icon::after{background-color:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{inline-size:100%;padding:0;margin:0;text-align:center;line-height:1;z-index:4;display:inline-flex;justify-content:center;inset-block-end:0}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{all:unset;text-indent:200%;white-space:nowrap;overflow:hidden;display:inline-block;display:inline-block;position:relative;inline-size:1.25rem;block-size:0.375rem;margin-block:0;cursor:pointer;padding:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot::after{content:\"\";position:absolute;inset:0;background:currentcolor;background:var(--dot-color);margin:calc(var(--nano-spacing-md) / 2)}.flickity-page-dots .dot:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.flickity-page-dots .dot.is-selected::after{background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 
 const modulo = (num, div) => {
     return ((num % div) + div) % div;
@@ -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",
@@ -32718,6 +32795,7 @@ var lazyload = /*#__PURE__*/Object.freeze({
 function PageDots(parent) {
     this.parent = parent;
     this.parentElement = this.parent.element.shadowRoot || this.parent.element;
+    this.containingEl = this.parentElement.parentNode || this.parentElement;
     this._create();
 }
 PageDots.prototype = Object.create(Unipointer.prototype);
@@ -32737,13 +32815,13 @@ PageDots.prototype.activate = function () {
     this.holder.addEventListener('click', this.handleClick);
     this.bindStartEvent(this.holder);
     // add to DOM
-    this.parentElement.appendChild(this.holder);
+    this.containingEl.appendChild(this.holder);
 };
 PageDots.prototype.deactivate = function () {
     this.holder.removeEventListener('click', this.handleClick);
     this.unbindStartEvent(this.holder);
     // remove from DOM
-    this.parentElement.removeChild(this.holder);
+    this.containingEl.removeChild(this.holder);
 };
 PageDots.prototype.setDots = function () {
     // get difference between number of slides and number of dots