@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/esm/nano-global-nav.entry.js

@@ -1,662 +1,288 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, e as readTask, d as writeTask, a as Host, j as getAssetPath } from './index-6cc72cd9.js';
-import { a as algoliasearch } from './algoliasearch-lite.esm.browser-0f71b631.js';
-import { C as ComponentStore } from './component-store-199a9fd8.js';
-import { d as debounce } from './throttle-df960210.js';
-import { d as displayTransition } from './transitions-c09bd7f6.js';
-import { s as searchInsight } from './search-insights-1a7b7dc5.js';
-import { t as transformTag, h } from './renderer-4bc3e2dc.js';
+import { a as getElement, r as registerInstance, c as createEvent, d as Host, l as getAssetPath } from './index-DOuz1S3w.js';
+import { h } from './renderer-CnE0Hztu.js';
+import { a as algoliasearch } from './algoliasearch-lite.esm.browser-C1SNUAIj.js';
+import { d as debounce } from './throttle-C93FMm2Z.js';
+import { a as addGlobalStylesheetToShadow } from './style-BrRDhFfF.js';
+import { s as searchInsight } from './search-insights-8OL2oeQN.js';
 
-async function clientFetch(url, { body, ...customConfig } = {}) {
-    const headers = {
-        Accept: 'application/json, text/plain, */*',
-        'Access-Control-Allow-Origin': '*',
-        'Content-Type': 'application/json',
-        Cache: 'no-cache',
-    };
-    const config = {
-        method: body ? 'POST' : 'GET',
-        credentials: 'include',
-        keepalive: true,
-        mode: 'cors',
-        ...customConfig,
-        headers: {
-            ...headers,
-            ...customConfig.headers,
-        },
-    };
-    if (body) {
-        config.body = JSON.stringify(body);
-    }
-    let id = setTimeout(() => { }, 0);
-    if (window.AbortController) {
-        const controller = new AbortController();
-        const { timeout = 500 } = customConfig;
-        id = setTimeout(() => controller.abort(), timeout);
-        config.signal = controller.signal;
-    }
-    const response = await fetch(url, config);
-    clearTimeout(id);
-    if (response.ok) {
-        return await response.json();
-    }
-    else {
-        const errorMessage = await response.text();
-        return new Error(errorMessage);
-    }
-}
-
-const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn .nano-icon{inline-size:18px;block-size:18px}.global-nav ::slotted(.nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-inline-size:100%;min-inline-size:100%;box-shadow:none;transition:0.2s ease box-shadow;display:flex;flex-wrap:wrap}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";inline-size:100%;block-size:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{flex:1 1 100%;inline-size:fit-content;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(.nano-nav-item[slot=icon]){margin-inline-start:11px}.main-bar>* ::slotted(.nano-nav-item),.main-bar>* .nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{margin-block:0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{block-size:40px;inline-size:173px;min-inline-size:173px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px;inline-size:130px;min-inline-size:130px}.main-bar .logo-link{margin-inline:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(.nano-nav-item),.main-bar .nav-links .nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;font-size:1.065em;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(.nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-inline-size:1px;display:block;margin:0;padding:0}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;block-size:100vh;inline-size:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;inline-size:calc(100vw - 20px)}.gn-menu.menu-full-screen{inline-size:100vw !important}.gn-menu_wrap{max-inline-size:92vw;inline-size:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;block-size:14px;line-height:14px;inline-size:auto;min-inline-size:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-block-size:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(.nano-nav-item),.gn-menu .nav-links .nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;inline-size:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(.nano-nav-item),.gn-menu .nav-links .user-nav .nano-nav-item{font-weight:400;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;border-block-end:1px solid var(--menu-hint-color);padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600}.gn-menu .nav-links_title--sites{border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-block-end:0}.gn-menu .nav-links .back-btn{border-block-start:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;inline-size:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600;cursor:pointer}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn .nano-icon{margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(.nano-nav-item),.gn-menu .nav-links--sub .nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;inline-size:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(.nano-nav-item),.gn-menu .nav-links--sites .nano-nav-item{inline-size:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn .nano-icon{margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;block-size:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:var(--nano-layer-index-mask, 10);visibility:visible}.search-btn::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{block-size:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-inline-size:45em;margin-inline-start:auto;flex:1;}.search-bar .search-widget{margin:0;overflow:inherit;max-inline-size:none;max-block-size:none;min-inline-size:auto;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-search-focus);font-size:1.1875em}.search-bar .search-widget .nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-search-focus);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget .nano-select.search-input.has-focus{color:var(--bar-search-focus)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-block-size:2.35em;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;inline-size:100%}.search-widget{padding-inline-end:var(--bar-item-spacing);margin-inline:var(--bar-item-spacing) auto;position:relative;flex:1 1 auto;max-inline-size:500px;min-inline-size:350px;max-block-size:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);inline-size:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;padding-block:calc(var(--bar-vertical-padding) / 2) 1px;padding-inline:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:rgb(167, 176, 179);font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;inline-size:100%;text-decoration:underline;border-block-start:1px solid rgb(232, 234, 234)}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}.nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;inline-size:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) .nano-select.search-input{overflow:hidden;max-block-size:1em}.nano-select.search-input .down-arrow{font-size:0.65em}.nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;inline-size:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host(:dir(rtl)) .nano-input.search-input{--input-border-radius:5px 0 0 5px}:host-context([dir=rtl]) .nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) .nano-input.search-input{overflow:hidden;max-block-size:1em}.nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}.nano-input.search-input .search-icon--show{display:flex !important}.nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.nano-input.search-input .search-icon .nano-icon{block-size:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;block-size:30px;inline-size:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn .nano-icon{margin-inline-start:5px;inline-size:16px;block-size:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open .nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-inline-size:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:400;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:19px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#4a4a4a;--bar-color-shade:#d8d8d8;--bar-color-tint:rgb(19 89 111);--bar-color-focus:#007fa9;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--bar-search-focus:#007FA9;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#007fa9;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;block-size:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
-const NanoGlobalNavStyle0 = globalNavCss;
+const globalNavCss = ":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{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;background-color:var(--main-menu-bar-bg-color);min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
 
-// the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
-const THRESHOLDBREAKS = {
-    about: 0,
-    main: 1,
-    login: 2,
-    search: 3,
-    icon: 4,
-};
-const THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
+const MIN_SEARCH_LENGTH = 3;
 const GlobalNav = class {
-    // position and dimension state
-    debounceResize;
-    debounceSetResizingState;
-    currSize = 0;
-    // menu
-    menuDiv;
-    menuBtn;
-    menuWrapDiv;
-    menuContentDiv;
-    menuSelectedItems;
-    // search
-    searchBarEl;
-    searchInput;
-    algoliaClient;
-    currentIndex;
-    autocompleteResults;
-    autocompleteEles = [];
-    currAIndex = -1;
-    algoliaSearchResults;
-    scopeSearch;
-    // general
-    mainBarDiv;
-    userLinkPanel;
-    isLoggedIn = false;
-    myAccData = null;
-    // myaccount links
-    aboutNavItms = [];
-    siteNavItms = [];
-    loggedInNavItms = [];
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.nanoIsReady = createEvent(this, "nanoIsReady", 7);
-        this.nanoSearchResult = createEvent(this, "nanoSearchResult", 7);
-        this.nanoSearchError = createEvent(this, "nanoSearchError", 7);
-        this.nanoSearchReset = createEvent(this, "nanoSearchReset", 7);
-        this.assessSlottedContent = debounce(this.assessSlottedContent.bind(this), 10);
-        this.handleBarResize = debounce(this.handleBarResize.bind(this), 200);
+    get host() { return getElement(this); }
+    overflowMenu;
+    overflowOpen = false;
+    /** The link to put on the logo */
+    logoUrl = location.protocol + '//' + location.host;
+    /** Url to the Nanopore store cart. Will default to the url supplied by MyAccount */
+    cartUrl = '';
+    /** Url to the Nanopore message center. Will default to the url supplied by MyAccount  */
+    msgUrl = '';
+    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
+    loginUrl = '';
+    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
+    logoutUrl = '';
+    /** Url to the Nanopore contact page */
+    contactUrl = 'https://nanoporetech.com/contact';
+    _sessionRedirect = window.location.href;
+    /** A url to take the user after login / logout. Defaults to current URL. Is automatically URI encoded */
+    get sessionRedirect() {
+        return encodeURIComponent(this._sessionRedirect);
+    }
+    set sessionRedirect(val) {
+        this._sessionRedirect = val;
+    }
+    /** MyAccount store cart count.*/
+    cartCount = 0;
+    /** MyAccount un-read message count. */
+    msgCount = 0;
+    /** Manually toggle open or close the overflow menu */
+    async toggleOverflowMenu() {
+        this.overflowOpen = !this.overflowOpen;
+    }
+    /// MY-ACCOUNT - start ///
+    /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
+    myAccountUrl;
+    async handleMyAccountUrl() {
+        if (!this.myAccountUrl)
+            return;
+        if (this.myAccountUrl === 'local-logged-in') {
+            this.myAccountData = (await import('./local-logged-in-DNQyU0ot.js'));
+            return;
+        }
+        else if (this.myAccountUrl === 'local-logged-out') {
+            this.myAccountData = (await import('./local-logged-out-CD2oXHpq.js'));
+            return;
+        }
+        fetch(this.myAccountUrl + '/nav_bar_data.json')
+            .then((res) => res.json())
+            .then((data) => {
+            this.myAccountData = data;
+        })
+            .catch((err) => {
+            console.error('Error fetching MyAccount data', err);
+        });
     }
-    // user profile link
-    userProfileUrl = '';
-    // has slot tests
-    hasLoggedinSlot = false;
-    hasSiteSlot = false;
-    hasPromotionSlot = false;
-    // slot item number tests
-    aboutSlotLen = 0;
-    iconSlotLen = 0;
-    mainSlotLen = 0;
-    overflowSlotLen = 0;
-    searchSlotLen = 0;
-    // threshold / sizing
-    thresholdReady = false;
-    remoteDataReady = false;
-    ready = false;
-    isResizing = false;
-    threshold = THRESHOLDLIMIT;
-    // modals state
-    modalOpen = false;
-    modalIsOpen = false;
-    searchBarShown = false;
-    scrollingUp = true;
-    showAutocomplete = false;
-    secondaryMenuOpen = null;
-    userMenuOpen = false;
-    menuFullScreen = false;
-    // search
-    searchLoading = false;
-    searchValInternal = '';
-    internalSearchIndeces = [];
-    get el() { return getElement(this); }
-    /**
-     * Connect to local, dev, test or prod MyAccount
-     * environments to retrieve global nav / sso data.
-     * Alternatively, you can use the `ssoDataUrl` prop.
-     */
-    env = 'prod';
-    /**
-     * A base url to retrieve global nav / sso data.
-     * `nav_bar_data.json` will be appended to this url.
-     * An alternative to the pre-defined `env` urls
-     */
-    ssoDataUrl;
     /**
-     * An alternative to both 'env' and 'ssoDataUrl'.
-     * You can directly provide a JSON object of myaccount data.
-     * (e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)
-     * This is useful for SSR
+     * MyAccount data automatically set via `myAccountUrl`.
+     * Alternatively you can directly provide a JSON object which is useful for SSR
+     * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
      */
     myAccountData;
-    handleMyAccountData() {
-        if (!this.myAccountData)
+    /** Emitted when myaccount data has loaded */
+    nanoUserData;
+    /// MY-ACCOUNT - end ///
+    /// USER LOGIN ///
+    userLinks = [];
+    isLoggedIn = false;
+    /** Logged in user details automatically populated from MyAccount */
+    get myAccountUser() {
+        return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
+    }
+    processUserData() {
+        if (!this.myAccountUser)
             return;
-        if (!this.myAccountData.user || !this.myAccountData.links)
+        this.userLinks = this.myAccountData?.links.filter((link) => link.area === 'profile-panel-list');
+        this.loginUrl = this.loginUrl || this.myAccountData.urls.login;
+        this.logoutUrl = this.logoutUrl || this.myAccountData.urls.logout;
+        this.msgUrl = this.msgUrl || this.myAccountData.urls.messages;
+        this.msgCount = this.msgCount || this.myAccountData.notifications.count;
+        this.cartUrl = this.cartUrl || this.myAccountData.urls.cart;
+        this.cartCount = this.cartCount || this.myAccountData.cart.count;
+        this.isLoggedIn = true;
+        this.nanoUserData.emit(this.myAccountUser);
+    }
+    formatLoginLink(link) {
+        if (!link)
+            return '';
+        if (!this.sessionRedirect)
+            return link;
+        if (link.endsWith('='))
+            return link + this.sessionRedirect;
+        if (link.includes('?'))
+            return link + '&ReplayState=' + this.sessionRedirect;
+        return link + '?ReplayState=' + this.sessionRedirect;
+    }
+    /// USER LOGIN - end ///
+    /// RESIZING - start ///
+    resizeObserver;
+    cachedWidth;
+    mainMenu;
+    _mainMenuBar;
+    get mainMenuBar() {
+        return this._mainMenuBar;
+    }
+    set mainMenuBar(el) {
+        if (this._mainMenuBar === el)
             return;
-        this.myAccData = this.myAccountData;
-        if (this.myAccData.user.id) {
-            this.isLoggedIn = true;
-            this.myAccountUser = this.myAccData.user;
-        }
-        this.processMyAccLinks();
-        this.processMyAccData();
-        this.remoteDataReady = true;
+        this._mainMenuBar = el;
+        this.addMainmenuRo();
+    }
+    shouldResize = true;
+    breakpoint = 0;
+    breakpointChanged() {
+        if (this.breakpoint < this.bpPartials.mainMenu.breakpoint &&
+            this.shouldResize === false) {
+            this.overflowOpen = false;
+        }
+    }
+    debounceResetResize = debounce(() => {
+        this.shouldResize = false;
+    }, 300);
+    addMainmenuRo() {
+        this.removeMainmenuRo();
+        const ro = (this.resizeObserver = new ResizeObserver(() => {
+            if (this.shouldResize ||
+                (this.mainMenuBar.clientWidth >= this.cachedWidth &&
+                    this.breakpoint === 0) ||
+                (this.mainMenuBar.clientWidth <= this.cachedWidth &&
+                    this.mainMenuBar.clientWidth >= this.mainMenu.scrollWidth)) {
+                // if we're already resizing,
+                // OR we're already at the biggest breakpoint and the bar's size is now bigger than what it was,
+                // OR the bar's size is less than it was but is still bigger than the menu's size
+                // we don't need to do anything
+                return;
+            }
+            // reset breakpoint and start resizing
+            this.shouldResize = true;
+            this.breakpoint = 0;
+        }));
+        ro.observe(this.mainMenuBar);
+    }
+    removeMainmenuRo() {
+        if (!this.resizeObserver)
+            return;
+        if (this.mainMenuBar)
+            this.resizeObserver.unobserve(this.mainMenuBar);
+        else
+            this.resizeObserver.disconnect();
     }
-    /**
-     * Where to take user after SSO login
-     */
-    ssoRedirect = encodeURIComponent(window.location.href);
-    /**
-     * Whether to attempt to get global nav / sso data from MyAccount
-     */
-    getMyAccountData = true;
-    /**
-     * Active MyAccount link sections. By default all will show.
-     */
-    activeMyAccountSections = null;
-    /**
-     * Whether to show search functionality
-     */
-    showSearch = true;
-    /**
-     * Whether to show Nanopore logo
-     */
-    showLogo = true;
-    /**
-     * The link to put on the logo
-     */
-    logoUrl = location.protocol + '//' + location.host;
-    /**
-     * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
-     */
-    searchIndeces = [];
-    /**
-     * Logged in user details automatically populated from MyAccount
-     */
-    myAccountUser = null;
-    /**
-     * An Algolia App ID key. Will be automatically populated from MyAccount
-     */
-    searchAppId;
-    /**
-     * An Algolia API Key. Will be automatically populated from MyAccount
-     */
-    searchApiKey;
-    /**
-     * A search value to passed to Algolia to programmatically get or to preload search results
-     */
-    searchValue = '';
-    /**
-     * Algolia search index to programmatically set or to set an initial index
-     */
-    searchIndex = 'All';
-    /**
-     * MyAccount store cart count.
-     */
-    cartCount = 0;
-    /**
-     * MyAccount un-read message count.
-     */
-    msgCount = 0;
-    /**
-     * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
-     */
-    cartUrl = null;
-    /**
-     * Url to the Nanopore message center. Will default to the url supplied by MyAccount
-     */
-    msgUrl = null;
-    /**
-     * Emitted when the global nav is ready.
-     */
-    nanoIsReady;
-    /**
-     * Emitted when search results are successfully returned from Algolia.
-     */
+    handleResize = () => {
+        if (!this.shouldResize)
+            return;
+        if (this.breakpoint < 4 &&
+            this.mainMenu.scrollWidth > this.mainMenuBar.clientWidth) {
+            // changing 'breakpoint' will keep triggering a re-render until the content fits
+            this.breakpoint++;
+        }
+        else {
+            // content now fits
+            this.cachedWidth = this.mainMenuBar.clientWidth;
+            this.debounceResetResize();
+        }
+    };
+    /// RESIZING - end ///
+    /// SEARCH - start ///
+    algoliaClient;
+    searchResults;
+    searchInput;
+    activeIndex;
+    autocompleteResults;
+    searchForm;
+    searchIndices = [];
+    searchBarShown = false;
+    searchLoading = false;
+    _searchValue = '';
+    /** Emitted when search results are successfully returned from Algolia. */
     nanoSearchResult;
-    /**
-     * Emitted when algolia returns an error.
-     */
+    /** Emitted when algolia returns an error. */
     nanoSearchError;
-    /**
-     * Emitted when search field is cleared.
-     */
+    /** Emitted when search field is cleared. */
     nanoSearchReset;
-    /**
-     * Submit the search form (a search value must be present)
-     */
+    /** Algolia search index to search within */
+    searchIndex = 'All';
+    /** A search string used to load and show autocomplete results */
+    get searchValue() {
+        return this._searchValue;
+    }
+    set searchValue(val) {
+        if (val) {
+            this.host.componentOnReady().then(() => {
+                this.searchBarShown = true;
+                this.handleSearchTermChangeEvent(val);
+            });
+        }
+    }
+    /** Send the current search term and selected index to a nested `nano-global-search-results` */
     async submitSearch() {
         this.onSearchSubmit();
-        this.showAutocomplete = false;
         return;
     }
-    /**
-     * Manually open or close the overflow (burger) menu
-     * @param openClose - optionally force open (true) or close (false)
-     */
-    async toggleOverflowMenu(openClose) {
-        if (openClose === true || (openClose === undefined && !this.modalIsOpen)) {
-            this.menuOpen();
-        }
-        else {
-            this.menuClose(null, true);
-        }
-    }
-    async getMyAccData() {
-        if (this.myAccData)
+    handleSearchIndex() {
+        if (!this.searchIndices?.length)
             return;
-        switch (this.env) {
-            case 'prod':
-                this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
-                break;
-            case 'local':
-            case 'dev':
-            case 'test':
-            default:
-                this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
-                break;
-        }
-        if (!this.getMyAccountData || this.myAccData) {
-            this.remoteDataReady = true;
+        if (!this.searchIndex) {
+            this.activeIndex = this.searchIndices[0];
             return;
         }
-        let url = this.ssoDataUrl;
-        if (!url) {
-            switch (this.env) {
-                case 'dev':
-                    url = 'https://myaccount-dev.nanoporetech.com/';
-                    break;
-                case 'test':
-                    url = 'https://myaccount-test.nanoporetech.com/';
-                    break;
-                default:
-                    url = 'https://myaccount.nanoporetech.com/';
-                    break;
-            }
-        }
-        const config = { timeout: 5000 };
-        try {
-            if (this.env === 'local') {
-                this.myAccData = (await import('./local-my-account-3ba1ec04.js'));
-            }
-            else {
-                this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
-            }
-            if (this.myAccData.user.id) {
-                this.isLoggedIn = true;
-                this.myAccountUser = this.myAccData.user;
-            }
-            this.processMyAccLinks();
-            this.processMyAccData();
-            setTimeout(() => (this.remoteDataReady = true), 300);
-        }
-        catch (e) {
-            console.error(e);
-            this.remoteDataReady = true;
-        }
+        this.activeIndex =
+            this.searchIndices.find((index) => index.name === this.searchIndex) ||
+                this.searchIndices[0];
+        return this.activeIndex;
     }
-    currentSelectedIndex() {
-        if (!this.internalSearchIndeces.length) {
-            return;
-        }
-        if (!this.searchIndex)
-            return this.internalSearchIndeces[0];
-        const foundIndex = this.internalSearchIndeces.find((index) => index.name === this.searchIndex);
-        if (!foundIndex) {
-            this.currentIndex = this.internalSearchIndeces[0];
-            console.error('index not found');
+    initSearch() {
+        if (!this.myAccountData)
             return;
-        }
-        this.currentIndex = foundIndex;
-        return foundIndex;
-    }
-    changeInternalSearchVal() {
-        if (this.searchValInternal !== this.searchValue)
-            this.searchValue = this.searchValInternal;
-    }
-    initAlgoliaClient() {
-        if (!this.searchAppId || !this.searchApiKey)
+        const { search } = this.myAccountData;
+        if (!search?.app_id || !search?.api_key)
             return;
-        this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);
-        this.addAlgoliaIndeces();
+        // initialise algolia
+        this.algoliaClient = algoliasearch(search.app_id, search.api_key);
         // setup algolia analytics
-        searchInsight.init(this.searchAppId, this.searchApiKey).then(() => {
+        searchInsight.init(search.app_id, search.api_key).then(() => {
             if (this.myAccountUser)
                 searchInsight.setUser(this.myAccountUser.uuid);
         });
-    }
-    /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
-    addIndeces() {
-        this.internalSearchIndeces = [
-            ...this.internalSearchIndeces,
-            ...this.searchIndeces,
-        ];
-    }
-    /** Internal set of of Algolia indices. Includes public & private (e.g. from MyAccount) */
-    addAlgoliaIndeces() {
-        if (!this.algoliaClient || !this.internalSearchIndeces.length)
-            return;
-        this.internalSearchIndeces.forEach((searchIndex) => {
-            searchIndex.alogliaIndex = this.algoliaClient.initIndex(searchIndex.index);
+        // initialise all search indices
+        this.searchIndices = this.myAccountData.search.indeces;
+        this.searchIndices.forEach((searchIndex) => {
+            searchIndex.algoliaIndex = this.algoliaClient.initIndex(searchIndex.index);
         });
+        // set the initial search index if it's not manually set
         if (!this.searchIndex) {
-            this.searchIndex = this.internalSearchIndeces[0].name;
-        }
-    }
-    /** Current content breakpoint. If it goes up, things can look wonky for a second so we temporarily hide stuff */
-    thresholdChange(newThreshold, oldThreshold) {
-        if (newThreshold > oldThreshold) {
-            // we've resized to larger screen.
-            this.setResizingState(true);
-        }
-    }
-    /* Check if data and item placement is ready */
-    assessReady() {
-        if (this.thresholdReady && this.remoteDataReady) {
-            this.ready = true;
-            this.nanoIsReady.emit();
-            if (this.searchValue)
-                requestAnimationFrame(() => this.searchbarShow());
+            this.searchIndex = this.searchIndices[0].name;
         }
     }
     /**
-     * Add / remove events when autocomplete results show / hide.
-     */
-    setupAutocompleteBlur() {
-        if (this.showAutocomplete) {
-            this.el.shadowRoot.addEventListener('click', this.onAutocompleteBlur);
-        }
-        else {
-            this.el.shadowRoot.removeEventListener('click', this.onAutocompleteBlur);
-        }
-    }
-    closeSearchBar() {
-        if (!!this.secondaryMenuOpen && this.searchBarShown)
-            this.searchbarHide();
-    }
-    /** As relevant slotted items change, reset resizing breakpoints */
-    slotChange() {
-        this.threshold = THRESHOLDLIMIT;
-    }
-    // General classes for visuals
-    thresholdClasses() {
-        const classes = [];
-        let i = 0;
-        for (i; i < this.threshold; i++)
-            classes.push('threshold-' + (i + 1));
-        return classes;
-    }
-    /**
-     * provides 'isResizing' - we use this to fade content out on 'breakpoint' increase
-     * (when the screen size increases). Otherwise the stepping through of
-     * breakpoints to calculate if content currently fits shows on screen (looks ugly)
-     */
-    setResizingState = (state = false) => {
-        if (typeof this.debounceSetResizingState === 'undefined') {
-            this.debounceSetResizingState = debounce(this.setResizingState, 600);
-        }
-        if (state) {
-            this.isResizing = true;
-            this.debounceSetResizingState();
-        }
-        else {
-            this.isResizing = false;
-        }
-    };
-    // Global DOM Events
-    /**
-     * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
-     * 2) Assess the all threshold / breakpoints to see if content fits
-     * 3) Hide search bar whenever we resize
+     * Called whenever the search form is submitted (but can also be called manually).
+     * Fires event which will activate / display `nano-global-search-results`
      */
-    onWindowResize() {
-        if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
-            this.threshold = THRESHOLDLIMIT;
-        }
-        this.currSize = window.innerWidth;
-        this.searchbarHide();
-        this.handleBarResize();
-    }
-    // Burger / Overflow Menu
-    /* listen to nav-item secondary open / close events primarily for resizing the menu */
-    secondaryOpen(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        this.secondaryMenuOpen = ev.target;
-        if (!this.menuSelectedItems) {
-            this.menuSelectedItems = this.el.querySelectorAll(`${transformTag('nano-nav-item')}[selected]`);
-            this.menuSelectedItems.forEach((i) => i.classList.remove('selected'));
-        }
-        this.menuContentDiv.style.minHeight =
-            ev.detail.secondaryMenu.scrollHeight + 'px';
-    }
-    secondaryClose(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        if (this.secondaryMenuOpen === ev.target && this.menuSelectedItems) {
-            this.secondaryMenuOpen = null;
-            this.menuContentDiv.style.minHeight = '';
-            this.menuSelectedItems = null;
-            this.el
-                .querySelectorAll(`${transformTag('nano-nav-item')}[selected]`)
-                .forEach((i) => i.classList.add('selected'));
-        }
-    }
-    onMenuBtnKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                if (this.modalOpen)
-                    this.menuClose(ev, true);
-                else
-                    this.menuOpen();
-                break;
-        }
-    };
-    onMenuBtnClick = (ev) => {
-        this.menuClose(ev, true);
-    };
-    menuOpen = (e) => {
-        if (e)
-            e.preventDefault();
-        this.menuDiv.style.display = 'block';
-        // need to open menu in stages
-        // wait for re-flow after changing display
-        // wait for repaint after animate, then focus
-        this.modalOpen = true;
-        this.menuWrapDiv.focus({ preventScroll: true });
-        if (this.threshold < 2 ||
-            this.menuWrapDiv.scrollHeight > window.innerHeight) {
-            document.body.style.overflow = 'hidden';
-            this.menuFullScreen = true;
-        }
-        else
-            document.body.style.overflowX = 'hidden';
-        setTimeout(() => (this.modalIsOpen = true), 300);
-    };
-    onMenuHidden = () => {
-        this.menuDiv.removeEventListener('transitionend', this.onMenuHidden);
-        document.body.style.overflow = '';
-        this.menuDiv.style.display = 'none';
-        this.modalIsOpen = false;
-        this.menuFullScreen = false;
-        setTimeout(() => {
-            if (document.activeElement === document.body && this.menuBtn)
-                this.mainBarDiv.focus({ preventScroll: true });
-        }, 50);
-    };
-    menuClose(ev, force = false) {
-        if (!this.modalIsOpen)
-            return;
-        if (force) {
-            this.modalOpen = false;
-            this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
-            return;
-        }
-        if (!ev
-            .composedPath()
-            .some((el) => el === this.menuContentDiv ||
-            el.classList?.contains('gn-menu_actions'))) {
-            requestAnimationFrame(() => {
-                if (this.secondaryMenuOpen)
-                    return;
-                this.modalOpen = false;
-                this.menuDiv.addEventListener('transitionend', this.onMenuHidden);
-            });
-        }
-    }
-    subMenuClose = (ev) => {
-        ev.preventDefault();
-        ev.target.closest(transformTag('nano-nav-item')).open = false;
-    };
-    // User profile menu
-    onUserBtnClick = (ev) => {
-        ev.preventDefault();
-        this.userMenuOpen = !this.userMenuOpen;
-    };
-    onUserBtnKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                this.userMenuOpen = !this.userMenuOpen;
-                break;
-        }
-    };
-    onUserMenuBlur = (ev) => {
-        if (!ev.relatedTarget) {
-            this.userMenuOpen = false;
-            return;
-        }
-        if (ev.relatedTarget.closest('.user-links-panel'))
-            return false;
-        this.userMenuOpen = false;
-    };
-    async handleUserMenu() {
-        await displayTransition(this.userLinkPanel, {
-            className: 'show',
-            show: this.userMenuOpen,
-        });
-        if (this.userMenuOpen) {
-            this.userLinkPanel.focus();
-            this.userLinkPanel.addEventListener('focusout', this.onUserMenuBlur);
-        }
-        else {
-            this.userLinkPanel.removeEventListener('focusout', this.onUserMenuBlur);
-            this.el.focus();
-        }
-    }
-    // Search bar open / closed
-    onSearchBtnClick = (ev) => {
-        ev.preventDefault();
-        if (this.searchBarShown)
-            this.searchbarHide();
-        else
-            this.searchbarShow();
-    };
-    async searchbarShow() {
-        if (!this.searchBarEl)
+    onSearchSubmit = async (ev) => {
+        if (ev)
+            ev.preventDefault();
+        if (!this.activeIndex ||
+            !this.myAccountData ||
+            this._searchValue?.length < MIN_SEARCH_LENGTH)
             return;
-        this.searchBarShown = true;
-        this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
-        this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
-        this.searchBarEl.style.display = 'block';
-        requestAnimationFrame(() => {
-            const widgetHeight = Math.floor(this.searchBarEl.querySelector('.search-widget').scrollHeight) - 1;
-            this.searchBarEl.style.height = widgetHeight.toString() + 'px';
+        if (!this.searchResults)
+            await this.doAlgoliaSearch();
+        const { search } = this.myAccountData;
+        const activeIndex = this.searchResults.results.find((res) => this.activeIndex.index === res.index);
+        const { index, domain, filters, query, replicas } = activeIndex;
+        this.searchBarShown = false;
+        this.nanoSearchResult.emit({
+            meta: {
+                indexTitle: activeIndex.indexName,
+                index,
+                domain,
+                filters,
+                query,
+                replicas,
+            },
+            client: { apiKey: search.api_key, appId: search.app_id },
         });
-    }
-    onSearchBarShown = () => {
-        this.searchBarEl.removeEventListener('transitionend', this.onSearchBarShown);
-        if (this.searchInput)
-            this.searchInput.setFocus();
-        this.searchBarEl.style.overflow = 'visible';
-    };
-    searchbarHide = (ev) => {
-        if (ev &&
-            ev.relatedTarget &&
-            ev.relatedTarget.closest('#global-nav-search-bar')) {
-            return;
-        }
-        this.showAutocomplete = this.searchBarShown = false;
-        if (this.searchValInternal.length && ev)
-            return;
-        if (!this.searchBarEl)
-            return;
-        this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);
-        this.searchBarEl.style.overflow = 'hidden';
-        this.searchBarEl.style.height = '0px';
-    };
-    onSearchBarHidden = () => {
-        this.searchBarEl.style.display = 'none';
     };
-    // Algolia search
-    autocompleteSnippet(hit) {
-        const lookFor = ['title']; // , 'body'
-        if (hit._snippetResult) {
-            const found = lookFor.find((prop) => hit._snippetResult[prop] &&
-                hit._snippetResult[prop].matchLevel !== 'none');
-            if (found) {
-                if (found !== 'title')
-                    return ((hit.title.length > 15
-                        ? hit.title.substring(0, 15) + ' ...'
-                        : hit.title) +
-                        ' ' +
-                        hit._snippetResult[found].value);
-                else
-                    return hit._snippetResult['title'].value;
-            }
-        }
-        return hit.title;
-    }
-    onSearchInput = (ev) => {
-        this.searchValInternal = this.searchInput.value;
-        if (!this.isSearchValSet()) {
-            this.searchLoading = false;
-            return;
-        }
-        if (ev.detail.type === 'input') {
-            this.showAutocomplete = false;
-            this.searchLoading = true;
-        }
-    };
-    /**
-     * Constructs a multi-search query for all set search indices
-     * (which are normally controlled via the myAccount payload) then sends to Algolia.
-     * Post-processes results, adding correct domains to url fields.
-     * @returns formatted algolia results
-     */
     async doAlgoliaSearch() {
-        this.algoliaSearchResults = null;
-        const queries = this.internalSearchIndeces.map((index) => {
+        this.searchResults = null;
+        const queries = this.searchIndices.map((index) => {
             const toReturn = {
                 clickAnalytics: true,
                 attributesToSnippet: ['body:5', 'title:8'],
                 indexName: index.index,
-                query: this.searchValInternal,
+                query: this._searchValue,
                 facets: index.filters,
                 hitsPerPage: 5,
                 filters: '',
@@ -668,595 +294,216 @@ const GlobalNav = class {
             return toReturn;
         });
         try {
-            this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
+            this.searchLoading = true;
+            // process results, adding correct domains to url fields.
+            this.searchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
         }
         catch (e) {
+            console.error(e);
             this.nanoSearchError.emit(e);
         }
         this.searchLoading = false;
-        if (!this.algoliaSearchResults)
-            return;
-        this.algoliaSearchResults.results.map((result, i) => {
-            result.indexName = this.internalSearchIndeces[i].name;
-            result.selected =
-                this.currentIndex.name === this.internalSearchIndeces[i].name;
-            result.domain = this.currentIndex.domain || null;
-            result.domains = this.myAccData.domains || null;
-            result.allGroup = !!this.internalSearchIndeces[i].allGroup;
-            result.filters = this.internalSearchIndeces[i].filters;
-            result.replicas = this.currentIndex.replicas;
-        });
-        return this.algoliaSearchResults;
+        return this.searchResults;
     }
     /**
-     * Called whenever the search input value changes.
-     * Performs Algolia search and shows autocomplete results.
-     * @param ev optional input change event
+     * Process a set (or multiple sets) of algolia results
+     * and applies correct domain names / http protocol to each result's url
      */
-    onSearchChange = async (ev) => {
-        this.searchValInternal = this.searchValue = ev
-            ? ev.detail.value
-            : this.searchValInternal;
-        this.showAutocomplete = false;
+    processSearchResults(results) {
+        const multiResults = results;
+        const singleResult = results;
+        if (multiResults.results) {
+            multiResults.results.forEach((result, i) => {
+                result = {
+                    ...result,
+                    indexName: this.searchIndices[i].name,
+                    selected: this.activeIndex.name === this.searchIndices[i].name,
+                    domain: this.activeIndex.domain || null,
+                    domains: this.myAccountData.domains || null,
+                    allGroup: !!this.searchIndices[i].allGroup,
+                    filters: this.searchIndices[i].filters,
+                    replicas: this.activeIndex.replicas,
+                };
+                multiResults.results[i] = this.processSearchResults(result);
+            });
+            return multiResults;
+        }
+        singleResult.hits.map((hit) => {
+            if (hit.url && !hit.url.match(/^http/))
+                hit.url =
+                    location.protocol + '//' + this.domainFor(hit.origin) + hit.url;
+        });
+        return singleResult;
+    }
+    // Finds a correct domain (as defined by myAccount data) for a given origin
+    domainFor(origin) {
+        if (!this.myAccountData)
+            return '';
+        const domain = this.myAccountData.domains.find((dm) => dm.origin === origin);
+        return domain ? domain.domain : '';
+    }
+    async setAutocompleteResults() {
         this.autocompleteResults = null;
-        if (!this.isSearchValSet()) {
-            if (!this.searchValInternal.length) {
+        if (this._searchValue.length < MIN_SEARCH_LENGTH) {
+            if (!this._searchValue.length)
                 this.nanoSearchReset.emit();
-            }
-            this.searchLoading = false;
             return;
         }
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        // start search
-        this.searchLoading = true;
-        const algoliaHits = await this.doAlgoliaSearch();
-        this.scopeSearch = null;
-        this.scopeSearch = algoliaHits;
-        // set / show autocomplete results
-        this.autocompleteResults = algoliaHits.results.find((res) => res.selected);
-        this.showAutocompleteResults();
-        this.searchLoading = false;
-    };
-    /**
-     * Called whenever the search form is submitted (but can also be called manually).
-     * Fires event which will activate / display `nano-global-search-results`
-     *
-     * @param ev optional form submit event
-     * @returns Algolia search results
-     */
-    onSearchSubmit = async (ev) => {
-        if (ev)
-            ev.preventDefault();
-        if (!this.isSearchValSet())
+        this.autocompleteResults = (await this.doAlgoliaSearch()).results.find((res) => res.selected);
+    }
+    autocompleteSnippet(hit) {
+        return hit._snippetResult?.title?.value || hit.title;
+    }
+    // Search event handlers
+    handleSearchOpenEvent = (e) => {
+        if (!e.target.classList.contains('gn__search-dropdown')) {
             return;
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        if (!this.algoliaSearchResults)
-            await this.doAlgoliaSearch();
-        const activeIndex = this.algoliaSearchResults.results.find((res) => res.selected);
-        const { index, domain, filters, query, replicas } = activeIndex;
-        this.nanoSearchResult.emit({
-            meta: {
-                indexTitle: activeIndex.indexName,
-                index,
-                domain,
-                filters,
-                query,
-                replicas,
-            },
-            client: { apiKey: this.searchApiKey, appId: this.searchAppId },
-        });
-        this.showAutocomplete = false;
-        return this.algoliaSearchResults;
+        }
+        this.searchInput.setFocus();
+        this.searchBarShown = true;
     };
-    onSearchIndexChange = async (index) => {
-        const ev = index;
-        let indexStr = index;
-        if (!this.currentIndex)
-            this.currentSelectedIndex();
-        if (ev.detail && ev.detail.value.length)
-            indexStr = ev.detail.value;
-        if (!indexStr || !indexStr.length)
-            return;
-        if (this.currentIndex.index === indexStr)
-            return;
-        const selectedIndex = this.internalSearchIndeces.find((index) => index.index === indexStr);
-        if (!selectedIndex || !selectedIndex.alogliaIndex)
-            return;
-        this.searchIndex = selectedIndex.name;
-        if (this.isSearchValSet())
-            await this.onSearchChange();
+    handleSearchCloseEvent = (e) => {
+        if (e.target.classList.contains('gn__search-dropdown')) {
+            this.searchBarShown = false;
+        }
     };
-    isSearchValSet() {
-        if (this.searchValInternal.length < 3)
-            return false;
-        return true;
-    }
-    switchIndexSubmit = async (index) => {
-        if (this.isSearchValSet()) {
-            await this.onSearchIndexChange(index);
-            this.onSearchSubmit();
+    handleSearchTermInputEvent = (e) => {
+        if (e.detail.type === 'input' &&
+            this.searchInput.value.length >= MIN_SEARCH_LENGTH) {
+            this.autocompleteResults = null;
+            this.searchLoading = true;
         }
-        else
-            this.onSearchIndexChange(index);
     };
-    // Autocomplete
-    resetHitFocus() {
-        this.currAIndex = -1;
-    }
-    onAutocompleteBlur = (ev) => {
-        if (!this.showAutocomplete || !this.autocompleteResults)
+    handleSearchTermChangeEvent = (searchStr) => {
+        if (this._searchValue === searchStr)
             return;
-        if (ev && ev.target && ev.target.closest('.search-widget'))
-            return;
-        this.showAutocomplete = false;
+        this._searchValue = searchStr;
+        this.setAutocompleteResults();
     };
-    showAutocompleteResults = () => {
-        if (!this.autocompleteResults || !this.autocompleteResults.hits)
+    handleSearchIndexChangeEvent = (e) => {
+        if (!e.detail?.value?.length)
             return;
-        this.showAutocomplete = true;
-    };
-    setActiveElement(autocompleteEle) {
-        this.autocompleteEles.map((ele) => ele.setAttribute('aria-selected', 'false'));
-        autocompleteEle.focus({ preventScroll: true });
-        autocompleteEle.setAttribute('aria-selected', 'true');
-    }
-    onAutocompleteInteract = (ev) => {
-        // list open, navigate items with arrows
-        if (!this.showAutocomplete || !this.autocompleteResults)
+        const index = e.detail.value;
+        if (this.activeIndex.index === index)
             return;
-        let testIndex = this.currAIndex;
-        switch (ev.key) {
-            case 'Tab':
-                setTimeout(() => {
-                    if (!this.el.shadowRoot.activeElement ||
-                        !this.el.shadowRoot.activeElement.closest('.search-widget')) {
-                        this.showAutocomplete = false;
-                        return;
-                    }
-                    else {
-                        const found = this.autocompleteEles.find((ele, i) => {
-                            if (ele === this.el.shadowRoot.activeElement) {
-                                this.currAIndex = i;
-                                return true;
-                            }
-                        });
-                        if (found)
-                            this.setActiveElement(found);
-                        else
-                            this.currAIndex = -1;
-                    }
-                });
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp': {
-                if (ev.key === 'ArrowDown')
-                    testIndex++;
-                else if (ev.key === 'ArrowUp')
-                    testIndex--;
-                const found = this.autocompleteEles[testIndex];
-                if (found ||
-                    testIndex < 0 ||
-                    testIndex > this.autocompleteEles.length - 1) {
-                    ev.preventDefault();
-                }
-                if (found) {
-                    this.setActiveElement(found);
-                    this.currAIndex = testIndex;
-                }
-                else if (testIndex < 0) {
-                    this.searchInput.setFocus();
-                    this.currAIndex = -1;
-                }
-                break;
-            }
-            case 'Enter':
-            case ' ':
-                if (this.autocompleteEles[this.currAIndex]) {
-                    this.autocompleteEles[this.currAIndex].click();
-                }
-                break;
+        const selectedIndex = this.searchIndices.find((searchIndex) => searchIndex.index === index);
+        if (!selectedIndex || !selectedIndex.algoliaIndex)
+            return;
+        this.searchIndex = selectedIndex.name;
+        if (this._searchValue.length >= MIN_SEARCH_LENGTH) {
+            this.searchInput.setFocus();
+            this.searchBarShown = true;
+            this.setAutocompleteResults();
         }
     };
-    // Various.
-    /**
-     * Assesses what content is present in which slots
-     */
-    assessSlottedContent = () => {
-        readTask(() => {
-            this.hasSiteSlot = !!this.el.querySelectorAll('[slot="site"]').length;
-            this.hasLoggedinSlot =
-                !!this.el.querySelectorAll('[slot="loggedin"]').length;
-            this.hasPromotionSlot =
-                !!this.el.querySelectorAll('[slot="promotion"]').length;
-            this.aboutSlotLen = this.el.querySelectorAll('[slot="about"]').length;
-            this.iconSlotLen = this.el.querySelectorAll('[slot="icon"]').length;
-            this.mainSlotLen = this.el.querySelectorAll('[slot="main"]').length;
-            this.overflowSlotLen =
-                this.el.querySelectorAll('[slot="overflow"]').length;
-            this.searchSlotLen = this.el.querySelectorAll('[slot="search"]').length;
-        });
-    };
-    async handleBarResize() {
-        const descreaseThreshold = () => {
-            return new Promise((resolve) => {
-                this.threshold--;
-                setTimeout(() => {
-                    resolve();
-                }, 200);
-            });
-        };
-        // Decrease the threshold until content fits
-        while (this.threshold > 0) {
-            if (this.mainBarDiv.scrollWidth <= this.mainBarDiv.parentElement.clientWidth)
-                break;
-            await descreaseThreshold();
-        }
-        /* content now fits so add / remove context classes
-        on nav-items depending on whether they're added to bar or burger. */
-        this.thresholdReady = true;
-        let menuItems, barItems;
-        readTask(() => {
-            menuItems = [
-                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="site"]`)),
-                ...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="overflow"]`)),
-            ];
-            barItems = [];
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="icon"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="loggedin"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="main"]`)));
-            if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about)
-                menuItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
-            else
-                barItems.push(...Array.from(this.el.querySelectorAll(`${transformTag('nano-nav-item')}[slot="about"]`)));
-        });
-        writeTask(() => {
-            menuItems.forEach((item) => {
-                item.classList.add('nano-global-nav-menu');
-                item.classList.remove('nano-global-nav-bar');
-            });
-            barItems.forEach((item) => {
-                item.classList.remove('nano-global-nav-menu');
-                item.classList.add('nano-global-nav-bar');
-            });
-        });
+    /// SEARCH - end ///
+    /// LIFECYCLE ///
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoUserData = createEvent(this, "nanoUserData", 7);
+        this.nanoSearchResult = createEvent(this, "nanoSearchResult", 7);
+        this.nanoSearchError = createEvent(this, "nanoSearchError", 7);
+        this.nanoSearchReset = createEvent(this, "nanoSearchReset", 7);
+        this.handleResize = debounce(this.handleResize, 75);
     }
-    // Stencil Lifecycle / Rendering
     componentWillLoad() {
-        ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
-        this.assessSlottedContent();
+        this.handleMyAccountUrl();
+        this.initSearch();
+        this.processUserData();
+        addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
-    connectedCallback() {
-        this.handleMyAccountData();
-        this.getMyAccData();
+    componentDidRender() {
+        this.handleResize();
     }
-    componentDidLoad() {
-        {
-            this.debounceResize = debounce(this.onWindowResize.bind(this), 200);
-            window.addEventListener('resize', this.debounceResize);
-            this.currSize = window.innerWidth;
+    /// RENDER ///
+    loggedInPanel() {
+        if (!this.isLoggedIn || !this.myAccountUser)
+            return;
+        return (h("div", { part: "user-panel", class: `gn__user-panel nano-theme-dark` }, h("div", { class: "gn__user-panel-head", slot: "label" }, h("nano-avatar", { initials: this.myAccountUser.first_name?.charAt(0) +
+                this.myAccountUser.last_name?.charAt(0) }, this.myAccountUser.small_avatar_url &&
+            !this.myAccountUser.small_avatar_url.includes('generic') && (h("img", { src: this.myAccountUser.small_avatar_url, alt: "User Avatar", height: 40, width: 40 }))), h("div", null, this.myAccountUser.name, h("br", null), this.myAccountUser.job_title, ", ", this.myAccountUser.company)), h("div", { class: "gn__user-panel-body" }, this.userLinks.map((link) => (h("a", { href: link.address, target: link.target || undefined }, link.title, (link.title === 'Messages' ||
+            link.address.includes(this.msgUrl) ||
+            this.msgUrl.includes(link.address)) &&
+            this.msgCount > 0 && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount)))))), h("div", { class: "gn__user-panel-foot" }, h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.logoutUrl) }, "Logout")))));
+    }
+    bpPartials = {
+        contact: {
+            tpl: () => h("a", { href: this.contactUrl }, "Contact"),
+            breakpoint: 0,
+        },
+        mainMenu: {
+            tpl: () => h("slot", { name: "menu" }),
+            breakpoint: 1,
+        },
+        logo: {
+            tpl: () => { },
+            breakpoint: 2,
+        },
+    };
+    noResultPartial() {
+        if (this.searchLoading ||
+            this.autocompleteResults?.hits.length ||
+            this._searchValue.length < MIN_SEARCH_LENGTH) {
+            // it's loading or there are results or there's no search term
+            return;
         }
-        this.initAlgoliaClient();
-        this.addAlgoliaIndeces();
-        requestAnimationFrame(() => this.handleBarResize());
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.debounceResize);
-    }
-    // Render output
-    autocompleteList() {
-        let content;
-        if (this.showAutocomplete && this.scrollingUp) {
-            let currentScopeHits = 0;
-            let scopeChangeSuggestions = 0;
-            const scopeSuggestReducer = (total, result) => {
-                return result.index !== this.currentIndex.index
-                    ? total + result.hits.length
-                    : total;
-            };
-            const currentSuggestReducer = (total, result) => {
-                return result.index === this.currentIndex.index
-                    ? total + result.hits.length
-                    : total;
-            };
-            if (this.scopeSearch) {
-                scopeChangeSuggestions = this.scopeSearch.results.reduce(scopeSuggestReducer, 0);
-                currentScopeHits = this.scopeSearch.results.reduce(currentSuggestReducer, 0);
-            }
-            if ((this.autocompleteResults && this.autocompleteResults.hits.length) ||
-                (scopeChangeSuggestions && !currentScopeHits)) {
-                let scopeSuggestions = 0;
-                content = (h("div", null, !currentScopeHits && (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', h("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
-                    this.autocompleteResults.hits.map((hit, i) => {
-                        return (h("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit), onClick: () => {
-                                searchInsight.sendClick({
-                                    index: this.currentIndex.index,
-                                    eventName: 'Global nav quick search - search result clicked',
-                                    queryID: this.autocompleteResults.queryID,
-                                    objectIDs: [hit.objectID],
-                                    positions: [i + 1],
-                                });
-                            } }));
-                    }),
-                ], (!currentScopeHits || this.currentIndex.allGroup) &&
-                    this.scopeSearch &&
-                    this.scopeSearch.results && [
-                    this.scopeSearch.results.map((result, i) => {
-                        if (!result.hits.length ||
-                            result.index === this.currentIndex.index ||
-                            scopeSuggestions > 1)
-                            return;
-                        scopeSuggestions++;
-                        return (h("button", { role: "option", ref: (button) => this.autocompleteEles.push(button), tabindex: "-1", id: 'autocomplete-scope-' + i, class: "search-autocomplete-hit", onClick: () => this.switchIndexSubmit(result.index), onMouseDown: () => this.switchIndexSubmit(result.index) }, "\"", this.searchValInternal, "\"", ' ', h("div", { class: "search-autocomplete-hit-scope" }, "in ", result.indexName)));
-                    }),
-                ], !!currentScopeHits && (h("div", { class: "search-autocomplete-foot" }, h("button", { role: "option", class: "search-autocomplete-submit", ref: (button) => this.autocompleteEles.push(button), id: 'autocomplete-foot', onClick: this.onSearchSubmit, onMouseDown: this.onSearchSubmit }, "View all results")))));
-            }
-            else if (!currentScopeHits) {
-                content = (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found. Try another phrase."));
-            }
+        const toReturn = [];
+        if (this.searchIndex === 'All') {
+            toReturn.push(h("div", { slot: "no-result", class: "gn__search-no-results" }, "No results matching for \"", h("strong", null, this._searchValue), "\" Try another phrase"));
+            return toReturn;
         }
-        return (h("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete, onKeyDown: this.onAutocompleteInteract }, content));
-    }
-    searchWidget() {
-        return [
-            h("form", { class: "search-inputs", onSubmit: this.onSearchSubmit, id: "global-nav-search" }, h("nano-select", { class: "search-input", label: "Which area of content would you like to search?", hideLabel: true, showInlineError: false, value: this.currentSelectedIndex()?.index, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
-                return (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index));
-            }), h("nano-icon", { name: "light/chevron-down", class: "select-input__arrow", slot: "down-arrow" })), h("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search Nanopore", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, onKeyDown: this.onAutocompleteInteract, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
-                    ? this.autocompleteEles[this.currAIndex].id
-                    : false, "aria-controls": "autocomplete-results", onNanoFocus: this.showAutocompleteResults, value: this.searchValue, role: "textbox" }, h("button", { class: {
-                    'search-icon': true,
-                    'search-icon--search': true,
-                    'search-icon--show': !!this.searchValue && !this.searchLoading,
-                }, slot: "end", onClick: (e) => {
-                    this.searchValInternal = this.searchInput.value;
-                    this.onSearchSubmit(e);
-                } }, h("nano-icon", { name: "light/magnifying-glass", role: "img", ariaLabel: "Search now" })), h("span", { class: {
-                    'search-icon': true,
-                    'search-icon--loader': true,
-                    'search-icon--show': this.searchLoading,
-                }, slot: "end" }, h("nano-icon", { name: "light/spinner-third" }))), h("input", { type: "submit" })),
-        ];
+        this.searchResults.results.forEach((result) => {
+            if (result.hits.length) {
+                toReturn.push(h("nano-option", { class: "gn__search-result", onNanoSelect: (e) => {
+                        e.preventDefault();
+                        this.searchIndex = result.indexName;
+                        this.onSearchSubmit(e);
+                    } }, "Show results for \"", h("strong", null, this._searchValue), "\" in\u00A0", h("strong", null, result.indexName)));
+            }
+        });
+        toReturn.unshift(h("div", { slot: toReturn.length ? 'list-top' : 'no-result', class: "gn__search-no-results" }, "No results matching for \"", h("strong", null, this._searchValue), "\" in", ' ', h("strong", null, this.searchIndex), ". Try another phrase"));
+        return toReturn;
     }
     render() {
-        this.autocompleteEles = [];
-        const isRtl = this.el.ownerDocument.dir === 'rtl';
-        const searchWidget = this.searchWidget();
-        searchWidget.push(this.autocompleteList());
-        return (h(Host, { key: '24a35d2ad7bf721dd01ea704298d32450c987c53', class: {
-                [this.thresholdClasses().join(' ')]: true,
-                ready: this.ready,
-                'search-bar-shown': this.searchBarShown && this.scrollingUp,
-                'search-auto-complete-shown': this.showAutocomplete && this.scrollingUp,
-                'modal-open': this.modalIsOpen,
-                resizing: this.isResizing,
+        const bpps = this.bpPartials;
+        return (h(Host, { key: 'c968c75746e8b8211210b47c595cff25f0af8933', class: {
+                'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
+                'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            }, dir: isRtl ? 'rtl' : null }, h("div", { key: '6507f16e32b2c6d1e236efa05a8eb725226bebab', class: {
-                'global-nav': true,
-                'scrolling-down': !this.scrollingUp,
-            } }, h("nav", { key: '860000d1e558d4f386c6e656e9cf80768d5dad1f', id: "global-nav-menu", class: {
-                'gn-menu': true,
-                open: this.modalOpen,
-                'has-promotion': this.hasPromotionSlot,
-                'menu-full-screen': this.menuFullScreen,
-                'secondary-open': !!this.secondaryMenuOpen,
-            }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { key: '3d5bd2e8fd1257a1d3ee1d0106b85e213260c6c0', class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { key: '355f89f2ba243c3858e18c9af208d2c102214f6d', class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { key: 'b078eb21d775f3fb72873f08d8170c5cbd15fc7e', class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: '59d9b7de1ec45513defaa00b318f56335239c4ba', name: "light/xmark", "aria-label": "close menu", role: "img" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { key: 'a51364497a6436124d41c67387d4e06459fecac3', name: "light/bars", "aria-label": "close menu", role: "img" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && h("slot", { key: '5a4de1bfc3142f1ab92c14f996e371105e8747ae', name: "icon" }),
-            this.myAccData &&
-                (!this.activeMyAccountSections ||
-                    this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (h("a", { key: 'c160c224ab55265b8711dfe52847ec694aea45b8', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: 'd1d6d0665ffd3fbe6a1cbf2fb5232b8de837680c', name: "light/bell", role: "img", ariaLabel: "Check notifications" }), this.msgCount > 0 && (h("span", { key: 'd88070f6f7b57b4f3db2d4165f3640b9c2a02cfa', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (h("a", { key: 'b34df751132a325edb07fd7b8bc722f6ac1a5249', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: 'baaeb176499832c4c337ab70b667c6405c289d25', name: "light/cart-shopping", role: "img", ariaLabel: "Go to cart" }), this.cartCount > 0 && (h("span", { key: '868f6bec4cec2385ead80ea3b25ff665546576d0', class: "gn-menu_actions-counter" }, this.cartCount)))),
-            ],
-        ], this.myAccData && this.myAccData.urls.login && (h("a", { key: '574ed325458daae66c2ef942af1698d60a1fc7d1', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { key: '5cb49b6829078fa1703930c9d023638751604517', name: "solid/chevron-right" })))), h("div", { key: '998c9784eb21866fd28c2b261cfd61a1c2183de9', class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { key: '256be0960f44b72b62176a73a09937897aa211fb', class: "content", part: "burger-content" }, h("nav", { key: 'ed7346608de637f45639a5f7ee0a34930ebd2265', class: "nav-links nav-links--main", role: "menu" }, h("slot", { key: 'dfd170cd101390574856a9eadac9a67714d1f98f', name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
-            !!this.mainSlotLen && (h("slot", { key: 'f2e316b2d713411d126e39ac7c0a27f1d45128ad', name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-            this.hasSiteSlot) ||
-            !!this.siteNavItms.length) && (h("div", { key: '5cf164c338a24c26208a7807bb58e747890d0a3c' }, (this.hasSiteSlot || !!this.siteNavItms.length) && [
-            (this.threshold >= THRESHOLDLIMIT - 2 ||
-                this.mainSlotLen < 2) &&
-                this.overflowSlotLen < 2 && (h("div", { key: '5ae0b83ce30a602168a22d1367f75c7150eb2a8c', class: "nav-links-wrap" }, h("h4", { key: 'c19be958e609ed84e9e2feb0342c601fa5c38017', class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { key: '64fcab191bc5c7f100ba29fa83bff5e69813fc72', class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { key: 'aa8d2a33df760e02d193e94fc93fd731db345551', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-            })))),
-            ((this.threshold < THRESHOLDLIMIT - 2 &&
-                this.mainSlotLen >= 2) ||
-                this.overflowSlotLen >= 2) && (h("nav", { key: '6f7613703f867a4a120a9511bb591784479bbb1a', class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { key: 'b1f63cabe7bafb88d8d1a0386b1ea159ae334608', class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", h("nano-icon", { key: '5fe1c4389dacf278b3cc3290041af82e9f5f0731', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: '6fe3dbea59f144d3f857a70942ed03e667833f08', slot: "secondary" }, h("div", { key: 'd2c9bd8e6b35aebd5a2dc22a6a40de3db401123c', class: "content" }, h("button", { key: 'd996342c3f68a52c2d756801849ce2e82b25fb01', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '453b6631e44817cc9952cb649e3eb1e9f5b22a83', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), "Sites"), h("div", { key: '6aef4eb001acae9a17de56a9357293d7824da662', class: "content--sub" }, h("slot", { key: '64cf6e8c2bc47c9609c571a3e4fbf1a6d9955e0a', name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
-                return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-            }))))))),
-        ]))), this.isLoggedIn &&
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
-            (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { key: 'c74acf7d9230f3ce4722e9aee3cd7de5ab14fea2', class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { key: '2de6d7fbe9c41bcfbf213d86396c2f89c49ef00c', class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { key: 'ba118d2302b391640f00b30d8f03d64df08d0fb6', slot: "icon-end", name: "solid/chevron-right" }), h("div", { key: 'e7052720dd70aed785d055ee496d7c75f1736bf1', slot: "secondary" }, h("div", { key: '4dcc50535727163c54b95f705b390f16b4f82e7f', class: "content" }, h("button", { key: 'e3018cecdeca60b2fcf120a77bb3bd5bc710f19f', class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { key: '60938fd4dcf94006ffb5544fb7ddb24952ece667', slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: 'd3d4d5d4e971f2c2e82adc7f64b3313d11e8a8e3', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '2dffba3926caf4e82f13baa8e1070fb15fa1194d', class: "content--sub" }, h("slot", { key: 'b424a41514d0a0ec6c218f6a6191c5441bb02740', name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
-            return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
-        }), h("nano-nav-item", { key: '2eaab58c5e0108e209308d1dd82e5a77803b8d02', class: "nano-global-nav nano-global-nav-menu" }, h("a", { key: '34b8908d1c901652129a9b7b3647945795e5d831', href: this.myAccData.urls.forgot_password +
-                this.ssoRedirect }, "Change Password")))))))), h("slot", { key: '8fc5918b9e332211e87b875d9688502be7e8c0f6', name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { key: '36f4753c6c5e7cdc1e52ebe48b618562bc6bd73f', class: "login-btn logout-btn" }, h("a", { key: 'b207ee40e85bcca7e6a6e5b9bbd22a4e0a4a4e06', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { key: '840fab91269d501ff63032755453fc7dd2e3044b', class: "bars", part: "bars" }, h("nav", { key: 'c5787f83cad65be5ab76d1c94e0afef8767ba30b', part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
-            !!this.overflowSlotLen ||
-            ((this.myAccData || !!this.iconSlotLen) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
-            (this.isLoggedIn &&
-                (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
-            (!!this.mainSlotLen &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
-            ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-                this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
-            this.hasSiteSlot ||
-            !!this.siteNavItms.length) && (h("button", { key: '228ac94558fa514552ef4fdbf64d7e50f8308eaf', class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, h("nano-icon", { key: '0a6a501e1b137d8c2c6b35e89d5f2c2a227757ae', name: "light/bars", "aria-label": "Open menu" }))), this.showLogo && (h("a", { key: '287d80e53176feb00c5c27c7725709fb1bfe429b', href: this.logoUrl, class: "logo-link", part: "logo-link" }, h("img", { key: 'c4ed59df56ee140f81836c2e70c680cfc64494a9', src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { key: '6457da01602749c6d4e57cc5eed213eb709f4725', class: "logo-link" }, h("slot", { key: '55427cf66636a0dd4e230a3d0b102ef7f13d1b8c', name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { key: 'e80af31b5921eb88bc30c1c1cd744135e9bdf608', class: "nav-links nav-links--main" }, h("slot", { key: '5593574b8f2c1cbb42a7054b9d57a0e388671f47', name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
-            this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'b549fa2052b890c98612f61b36192b1ebdae3727', class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
-                    ? 'true'
-                    : 'false' }, searchWidget)),
-            (!this.showSearch || !this.myAccData) &&
-                !!this.searchSlotLen && (h("slot", { key: '2ce8de3529a1282b84bdd869d8ee52e82d3b005e', name: "search", onSlotchange: this.assessSlottedContent })),
-        ], (this.mainSlotLen > 0 ||
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
-            ((this.showSearch && !!this.internalSearchIndeces.length) ||
-                !!this.searchSlotLen) && (h("button", { key: 'a7897e2689f5a359abf9ef9ed2a4ec817fd5b080', class: {
-                'icon-btn': true,
-                'search-btn': true,
-                'search-btn--open': this.searchBarShown,
-            }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick }, h("nano-icon", { key: '722a12b69853025aea0afe9df06a619d4436cedc', name: "light/magnifying-glass", role: "img", ariaLabel: "Search Oxford Nanopore" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
-            !!this.iconSlotLen && h("slot", { key: '42e97c3c8747b7c74db55cecd0b69d1852578b76', name: "icon" }),
-            this.myAccData &&
-                (!this.activeMyAccountSections ||
-                    this.activeMyAccountSections.includes('icons')) && [
-                this.msgUrl && (h("a", { key: '594e5afec810a113431fec5d3e7455b436ed8e64', href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { key: '06716749b05dd80fe53682007f4a7002cea52a4f', name: "light/bell", ariaLabel: "View your notifications" }), this.msgCount > 0 && (h("span", { key: '5663dbe78c0752ed36b0aedc6607616716bf7e80', class: "gn-menu_actions-counter" }, this.msgCount)))),
-                this.cartUrl && (h("a", { key: '37c337b1f1ee4cf77e7262d836ec5e68bfb8eeab', href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { key: '453c5ab4b42e75939fba0d27bfc6612190110e3d', name: "light/cart-shopping", ariaLabel: "View your shopping cart" }), this.cartCount > 0 && (h("span", { key: 'f05cd64edfb4551025985f856015db1c0172aa08', class: "gn-menu_actions-counter" }, this.cartCount)))),
-            ],
-        ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { key: 'd4acf4145017c329be89cc5dc8ee2c363e07abd9', class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { key: 'effca72df5b665591a8a0bfb20928c087f477926', name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { key: '53e97b86a3b21bb721f2c1c9429b644e80edb45f', class: "nano-global-nav nano-global-nav-bar" }, h("a", { key: '47b828025006378bc2d32e43e0b86c515a2ff4ae', href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
-            (!this.activeMyAccountSections ||
-                this.activeMyAccountSections.includes('loggedin')) &&
-            this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
-            this.myAccData.urls.login && (h("a", { key: '49e47b4a0eff405906177fa9ac75b7b8c503500e', href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
-            this.myAccountUser && (h("div", { key: '92ff2c5e6cea3e5ed0383585ffa6048c0c260898', class: "user-links" }, h("button", { key: '9616128132c5cca0e0d7095255a2a268736021d4', class: {
-                    'icon-btn': true,
-                    'user-links-btn': true,
-                    open: this.userMenuOpen,
-                }, onMouseDown: this.onUserBtnClick, onKeyDown: this.onUserBtnKeyDown }, ' ', this.myAccountUser.name, h("nano-icon", { key: '122db375cc8db65f5a4f16180f6428102d8cbd21', name: "solid/caret-down", ariaLabel: "View your account links" })), h("div", { key: 'f6e44355fee2fb4b13d0b2e2a0be9c70a5e8c2ae', class: "user-links-panel", tabindex: "-1", ref: (div) => (this.userLinkPanel = div) }, !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { key: '4b394ae61cf88ee87bffc60f6a4941cd2a49a75d', myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { key: '11e22a97ca4f9fb61004e5d6b4a6a8b254fc42e0', class: "user-links-panel-content" }, this.loggedInNavItms.map((link) => {
-                return (h("a", { href: link.address, target: link.target }, link.title));
-            })), h("div", { key: '960c025ec4f02407d7c3c7628391693146cb3696', class: "user-links-panel-foot" }, h("a", { key: 'b436b24213dcb3f3f5e6631bdb5c09a6cc8a58a1', href: this.myAccData.urls.forgot_password +
-                    this.ssoRedirect }, "Change Password"), h("a", { key: '9c068fc5c88b89b8b440de798481b50c75575c30', href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
-        ]), (this.mainSlotLen > 0 ||
-            this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { key: 'c0301d8f09af80559b6b617338ab0280e9fa24af', id: "global-nav-search-bar", class: {
-                'search-bar': true,
-                show: this.searchBarShown,
-            }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { key: 'a91f8a78d5ef401db74dbcba2ed8baa707e239f5', class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", { key: 'aabb58b78e40aba19642c8732422eb2e7575365f' }, searchWidget)), (!this.showSearch || !this.myAccData) &&
-            !!this.searchSlotLen && (h("slot", { key: '6814610e28a8710768cbed27b6e534024d06c4e5', name: "search", onSlotchange: this.assessSlottedContent })))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
-            this.menuFullScreen) && (h("div", { key: 'b49ca662c96557b2a267589c2f8d25f25f2bcb75', class: {
-                mask: true,
-                open: this.modalOpen,
-            }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { key: '2d3d588a904ee2c95c3582b9735bb8597dcf05d1', class: "site-content" }, h("slot", { key: '3411ccdeff0c33e857e72683e57acfcfef11ee96' }))));
-    }
-    // Data processing
-    /**
-     * Finds a correct domain (as defined by myAccount data) for a given origin
-     * @returns a domain string for this origin
-     */
-    domainFor(origin) {
-        if (!this.myAccData)
-            return '';
-        const domain = this.myAccData.domains.find((dm) => dm.origin === origin);
-        return domain ? domain.domain : '';
-    }
-    /**
-     * process a set, or multiple sets of algolia results
-     * and applies correct domain names / http protocol to each result's url
-     * @returns results where partial paths are turned to full urls
-     */
-    processSearchResults(results) {
-        const multiResults = results;
-        const singleResult = results;
-        if (multiResults.results) {
-            multiResults.results.forEach((result, i) => {
-                multiResults.results[i] = this.processSearchResults(result);
-            });
-            return multiResults;
-        }
-        else {
-            singleResult.hits.map((hit) => {
-                if (hit.url && !hit.url.match(/^http/))
-                    hit.url =
-                        location.protocol + '//' + this.domainFor(hit.origin) + hit.url;
-            });
-            return singleResult;
-        }
-    }
-    /**
-     * Ingests the data blob from myAccount; turns prescient fields to internal state
-     */
-    processMyAccData() {
-        if (!this.myAccData || !this.myAccData.search.indeces.length)
-            return;
-        if (this.myAccData.search.api_key)
-            this.searchApiKey = this.myAccData.search.api_key;
-        if (this.myAccData.search.app_id)
-            this.searchAppId = this.myAccData.search.app_id;
-        if (this.myAccData.cart.count)
-            this.cartCount = this.myAccData.cart.count;
-        if (this.myAccData.notifications.count)
-            this.msgCount = this.myAccData.notifications.count;
-        if (!this.searchAppId || !this.searchApiKey)
-            return;
-        this.internalSearchIndeces = [
-            ...this.myAccData.search.indeces,
-            ...this.searchIndeces,
-        ];
-        if (this.myAccData.urls.cart && !this.cartUrl)
-            this.cartUrl = this.myAccData.urls.cart;
-        if (this.myAccData.urls.messages && !this.msgUrl)
-            this.msgUrl = this.myAccData.urls.messages;
-    }
-    /**
-     * Ingests the data blob from myAccount links; applies prescient fields to internal state
-     */
-    processMyAccLinks() {
-        if (!this.myAccData.links || !this.myAccData.links.length)
-            return;
-        this.myAccData.links.forEach((link) => {
-            switch (link.area) {
-                case 'left-side-logged-in':
-                case 'left-side-logged-out':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('sites'))
-                        break;
-                    if (this.isLoggedIn && link.area === 'left-side-logged-in')
-                        this.siteNavItms.push(link);
-                    else if (!this.isLoggedIn && link.area === 'left-side-logged-out')
-                        this.siteNavItms.push(link);
-                    break;
-                case 'right-side-logged-in':
-                case 'right-side-logged-out':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('about'))
-                        break;
-                    if (this.isLoggedIn && link.area === 'right-side-logged-in')
-                        this.aboutNavItms.push(link);
-                    else if (!this.isLoggedIn && link.area === 'right-side-logged-out')
-                        this.aboutNavItms.push(link);
-                    break;
-                case 'profile-panel-list':
-                    if (this.activeMyAccountSections &&
-                        !this.activeMyAccountSections.includes('loggedin'))
-                        break;
-                    this.loggedInNavItms.push(link);
-                    break;
-            }
-        });
+            } }, h("div", { key: 'edeec7490c6a32e2a44f3a8109f5d3f18c9d6101', class: {
+                gn: true,
+                'gn__search-open': this.searchBarShown,
+            } }, h("nano-drawer", { key: '56df68664885f1ed133b75e7f290405eb32bed67', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'da5e97e862497b1af8f0d0b3ed67e0dd03761f28', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3336390377aba9b2f127a7e1056fb80ba7d1ec75', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            ? bpps.mainMenu.tpl()
+            : '', h("slot", { key: '8c29d087282917c213beeadf719840c44b0f5494', name: "overflow" }))), h("div", { key: '6f07398ab8cd7d5f5fadafdb1d1f29ee9917efc3', class: "gn__menu-bar-wrapper" }, h("div", { key: '58546b45ca7ba896a9f0e1c5e528e191602e64a8', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'dd3d1cf935f2231e280cb0c7697c55470887c949', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'aa31d9a9cc0e1ad0d4db76ca9f4add388cef95bd', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02abef6f7550594481eff44ae5e332d74ba61138', name: "logo" }, h("a", { key: '084b9f9f88c68933f0d038b655833c5ba0117498', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '130b8ce4dfd708a8a884aa172a6b7c1a7defa204', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e4f69fca3d5a6700de16f8102dbf916a0b0e4d77', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '40033ff956c6f0b59ef5f569a00e56efc8e0f8df', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '32b4e3be46dae8578c4adf038bda844d3bf4b8b9', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '17ee6f5b011997b09148d8a09749931ae0e681f0', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '800b2d3b1343a6d09a8951b753742e6eb5731648', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'a8eb120a2268645e17935d5dd86e8cf9de550866', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                this.handleSearchTermChangeEvent(e.detail.value);
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '33472cd1d86a17143253aed1a7924b05343614a7', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'f88f3bcef70a7a29410d77ba849862ffc9db6562', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '075a4615d1715d941bd2368db97375f614867477', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '5194af389122625d1209e25208de761fa15dd7e3' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
+                    searchInsight.sendClick({
+                        index: this.activeIndex.index,
+                        eventName: 'Global nav quick search - search result clicked',
+                        queryID: this.autocompleteResults.queryID,
+                        objectIDs: [hit.objectID],
+                        positions: [i + 1],
+                    });
+                } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
+            h("nano-option", { key: 'c9dec204a82019869cc9b8086f07cfbfdf309f15', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: '986773d6af8b1b50000db8c428c2f25f07298a3c', class: "gn__cart" }, h("nano-icon-button", { key: '0afee86e684d4136e729955d28444a6c8a27838f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6305ad69d802aeda9a132ca204baf8b7b3aa17be', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            ? bpps.contact.tpl()
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '7c8b5194019e9b8346f6e0e927cff22ccf8b3e2e', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '213396f31494cb46551fd6839b95bf4155982a57', part: "site-search-results" }, h("slot", { key: 'd9471b1379c08106453aef43c0e590cf272a425f' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
-        "myAccountData": ["handleMyAccountData"],
-        "env": ["getMyAccData"],
-        "ssoDataUrl": ["getMyAccData"],
-        "searchIndex": ["currentSelectedIndex"],
-        "searchValInternal": ["changeInternalSearchVal"],
-        "searchApiKey": ["initAlgoliaClient"],
-        "searchAppId": ["initAlgoliaClient"],
-        "searchIndeces": ["addIndeces"],
-        "internalSearchIndeces": ["addAlgoliaIndeces"],
-        "threshold": ["thresholdChange"],
-        "thresholdReady": ["assessReady"],
-        "remoteDataReady": ["assessReady"],
-        "showAutocomplete": ["setupAutocompleteBlur", "resetHitFocus"],
-        "secondaryMenuOpen": ["closeSearchBar"],
-        "aboutSlotLen": ["slotChange"],
-        "iconSlotLen": ["slotChange"],
-        "mainSlotLen": ["slotChange"],
-        "overflowSlotLen": ["slotChange"],
-        "searchSlotLen": ["slotChange"],
-        "userMenuOpen": ["handleUserMenu"]
+        "myAccountUrl": ["handleMyAccountUrl"],
+        "myAccountData": ["processUserData", "initSearch"],
+        "shouldResize": ["breakpointChanged"],
+        "breakpoint": ["breakpointChanged"],
+        "searchIndices": ["handleSearchIndex"],
+        "searchIndex": ["handleSearchIndex"]
     }; }
 };
-GlobalNav.style = NanoGlobalNavStyle0;
+GlobalNav.style = globalNavCss;
 
 export { GlobalNav as nano_global_nav };
-
-//# sourceMappingURL=nano-global-nav.entry.js.map