@nanoporetech-digital/components 5.10.0 → 5.11.0

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

@@ -1,9 +1,9 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, d as readTask, w as writeTask, h, i as getAssetPath, a as Host, g as getElement } from './index-06666022.js';
-import { a as algoliasearch } from './algoliasearch-lite.esm.browser-04891fdc.js';
-import { C as ComponentStore } from './component-store-54df2005.js';
+import { r as registerInstance, c as createEvent, d as readTask, w as writeTask, h, i as getAssetPath, a as Host, g as getElement } from './index-9695db0a.js';
+import { a as algoliasearch } from './algoliasearch-lite.esm.browser-d71a28dc.js';
+import { C as ComponentStore } from './component-store-f7eb0a56.js';
 import { d as debounce } from './throttle-ac4fcefa.js';
 import { d as displayTransition } from './transitions-fb09eb32.js';
 
@@ -48,7 +48,7 @@ async function clientFetch(url, _a = {}) {
   }
 }
 
-const globalNavCss = ":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>.sticker-trigger{display:none}.global-nav>.sticker-trigger~.sticker-trigger{display:block}.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{width:18px;height: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-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{width:100%;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]){-webkit-margin-start:11px;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{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{height:36px;width:200px;min-width:200px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start: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;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;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);-webkit-margin-start:6px;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-width:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}.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;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width: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;-webkit-margin-after:36px;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{-webkit-padding-end:calc(var(--menu-padding) / 2);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;height:14px;line-height:14px;width:auto;min-width: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-height:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;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;width: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{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{-webkit-border-after:none;border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after: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;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;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;width:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{width: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{-webkit-margin-start:10px;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;height: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:#0c5a71;height: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{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto;}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;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-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.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-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;width:100%}.search-widget{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height: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);width: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;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width: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:#a7b0b3;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;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.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-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width: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-height: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;width: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-height: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{height: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;height:30px;width: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{-webkit-padding-end:0;padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height: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-width: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;-webkit-border-after:#669dac 1px solid;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{-webkit-border-after:none;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:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--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:#17bb75;--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;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;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 globalNavCss = ":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:-moz-fit-content;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 0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0 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:36px;inline-size:200px;min-inline-size:200px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px}.main-bar .logo-link{margin-inline:0 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;font-stretch:condensed;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}.sticker-trigger{background:var(--bar-background);inline-size:100%;block-size:1px;z-index:20;position:relative;display:block}.sticker-trigger:has(+.sticker-trigger){display:none}.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:700}.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:700;cursor:pointer;font-stretch:expanded}.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:#0c5a71;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-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.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 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:#a7b0b3;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 #e8eaea}.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-stretch:condensed;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:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--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:#17bb75;--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;-webkit-appearance:none;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)))}";
 
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
 const THRESHOLDBREAKS = {
@@ -58,6 +58,7 @@ const THRESHOLDBREAKS = {
   search: 3,
   icon: 4,
 };
+const THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
 const GlobalNav = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -66,8 +67,6 @@ const GlobalNav = class {
     this.nanoSearchError = createEvent(this, "nanoSearchError", 7);
     this.nanoSearchReset = createEvent(this, "nanoSearchReset", 7);
     this.currSize = 0;
-    this.thresholdsGoingUp = false;
-    this.THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
     this.autocompleteEles = [];
     this.currAIndex = -1;
     this.isLoggedIn = false;
@@ -91,7 +90,6 @@ const GlobalNav = class {
       }
       else {
         this.isResizing = false;
-        this.thresholdsGoingUp = false;
       }
     };
     this.onMenuBtnKeyDown = (ev) => {
@@ -163,10 +161,7 @@ const GlobalNav = class {
     // Search bar (smaller screens / mobile)
     this.onSearchBtnClick = (ev) => {
       ev.preventDefault();
-      if (!this.searchBarShown)
-        this.searchbarShow();
-      else
-        this.searchbarHide();
+      this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
     };
     this.onSearchBtnKeyDown = (ev) => {
       switch (ev.key) {
@@ -185,9 +180,10 @@ const GlobalNav = class {
     this.searchbarHide = (ev) => {
       if (ev &&
         ev.relatedTarget &&
-        ev.relatedTarget.closest('#global-nav-search-bar'))
+        ev.relatedTarget.closest('#global-nav-search-bar')) {
         return;
-      this.showAutocomplete = false;
+      }
+      this.showAutocomplete = this.searchBarShown = false;
       if (this.searchValInternal.length && ev)
         return;
       this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);
@@ -197,7 +193,6 @@ const GlobalNav = class {
     this.onSearchBarHidden = () => {
       this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
       this.searchBarEl.style.display = 'none';
-      this.searchBarShown = false;
     };
     this.onSearchInput = (ev) => {
       this.searchValInternal = this.searchInput.value;
@@ -394,8 +389,7 @@ const GlobalNav = class {
     this.remoteDataReady = false;
     this.ready = false;
     this.isResizing = false;
-    this.intersectRatio = undefined;
-    this.threshold = this.THRESHOLDLIMIT;
+    this.threshold = THRESHOLDLIMIT;
     this.modalOpen = false;
     this.modalIsOpen = false;
     this.searchBarShown = false;
@@ -539,91 +533,38 @@ const GlobalNav = class {
     this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);
     this.addAlgoliaIndeces();
   }
+  /** 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);
     });
-    if (!this.searchIndex)
+    if (!this.searchIndex) {
       this.searchIndex = this.internalSearchIndeces[0].index;
+    }
   }
+  /** 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.thresholdsGoingUp = true;
       this.setResizingState(true);
     }
   }
-  /**
-   * Primary logic for resizing changes.
-   * When content doesn't fit - we loop down through break points until it does
-   */
-  ratioChange() {
-    if (this.intersectRatio < 1 && this.threshold > 0) {
-      // content doesn't fit
-      if (this.thresholdsGoingUp)
-        this.setResizingState(true);
-      this.threshold--;
-      setTimeout(() => this.ratioChange(), 500);
-    }
-    else {
-      this.thresholdReady = true;
-      // content now fits so add / remove context classes
-      // on nav-items depending on whether they're added to bar or burger.
-      let menuItems, barItems;
-      readTask(() => {
-        menuItems = [
-          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),
-          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
-        ];
-        barItems = [];
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.main)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.about)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('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');
-        });
-      });
-    }
-  }
+  /* Check if data and item placement is ready */
   assessReady() {
     if (this.thresholdReady && this.remoteDataReady) {
       this.ready = true;
+      this.nanoIsReady.emit();
     }
   }
-  remoteReady() {
-    this.attachIO();
-  }
-  isReady() {
-    this.nanoIsReady.emit();
-  }
   /**
    * Add / remove events when autocomplete results show / hide.
    */
@@ -639,13 +580,9 @@ const GlobalNav = class {
     if (!!this.secondaryMenuOpen && this.searchBarShown)
       this.searchbarHide();
   }
-  /**
-   * As relevant slotted items change, reset resizing breakpoints
-   */
+  /** As relevant slotted items change, reset resizing breakpoints */
   slotChange() {
-    this.threshold = this.THRESHOLDLIMIT;
-    if (this.ready)
-      this.ratioChange();
+    this.threshold = THRESHOLDLIMIT;
   }
   // General classes for visuals
   thresholdClasses() {
@@ -656,17 +593,19 @@ const GlobalNav = class {
     return classes;
   }
   // Global DOM Events
+  /**
+   * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
+   * 2) Hide search bar whenever we resize
+   */
   onWindowResize() {
-    if (this.threshold < this.THRESHOLDLIMIT &&
-      window.innerWidth > this.currSize) {
-      this.threshold = this.THRESHOLDLIMIT;
-      this.ratioChange();
+    if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
+      this.threshold = THRESHOLDLIMIT;
     }
     this.currSize = window.innerWidth;
-    this.searchBarShown = false;
+    this.searchbarHide();
   }
   // Burger / Overflow Menu
-  // listen to nav-item secondary open / close events primarily for resizing the menu
+  /* listen to nav-item secondary open / close events primarily for resizing the menu */
   secondaryOpen(ev) {
     if (!ev.detail.secondaryMenu)
       return;
@@ -811,23 +750,82 @@ const GlobalNav = class {
     autocompleteEle.focus({ preventScroll: true });
     autocompleteEle.setAttribute('aria-selected', 'true');
   }
+  async handleBarResize() {
+    const descreaseThreshold = () => {
+      return new Promise((resolve) => {
+        this.threshold--;
+        setTimeout(() => {
+          resolve();
+        }, 500);
+      });
+    };
+    // 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('nano-nav-item[slot="site"]')),
+        ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
+      ];
+      barItems = [];
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('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');
+      });
+    });
+  }
   /**
-   * Attach the IntersectionObserver - from which all threshold / breakpoint logic hinges
+   * Attach the ResizeObserver - from which all threshold / breakpoint logic hinges
    */
-  attachIO() {
-    if (this.io)
+  attachResizeObserver() {
+    if (this.resizeObserver || !this.mainBarDiv)
       return;
-    const root = this.el.shadowRoot.querySelector('.global-nav .main-bar');
-    if (typeof window !== 'undefined' &&
-      window.IntersectionObserver &&
-      !!root) {
-      const io = (this.io = new window.IntersectionObserver((data) => {
-        this.intersectRatio = data.slice(-1)[0].intersectionRatio;
-      }, { root, threshold: 1 }));
-      io.observe(root.querySelector('.measure-ele'));
-    }
+    const ro = (this.resizeObserver = new ResizeObserver(() => {
+      if (this.mainBarDiv.scrollWidth <= this.mainBarDiv.parentElement.clientWidth) {
+        return;
+      }
+      this.handleBarResize();
+    }));
+    ro.observe(this.mainBarDiv);
   }
   // Stencil Lifecycle / Rendering
+  componentWillLoad() {
+    ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
+    this.assessSlottedContent();
+  }
+  connectedCallback() {
+    this.handleMyAccountData();
+    this.getMyAccData();
+  }
   componentDidLoad() {
     {
       this.debounceResize = debounce(this.onWindowResize.bind(this), 300);
@@ -836,28 +834,16 @@ const GlobalNav = class {
     }
     this.initAlgoliaClient();
     this.addAlgoliaIndeces();
-    if (this.remoteDataReady)
-      this.attachIO();
-  }
-  componentWillLoad() {
-    ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
-    this.assessSlottedContent();
+    this.attachResizeObserver();
+    requestAnimationFrame(() => this.handleBarResize());
   }
   disconnectedCallback() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
-    }
-    if (this.mo) {
-      this.mo.disconnect();
-      this.mo = undefined;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
     }
     window.removeEventListener('resize', this.debounceResize);
   }
-  connectedCallback() {
-    this.handleMyAccountData();
-    this.getMyAccData();
-  }
   // Render output
   autocompleteList() {
     let content;
@@ -914,7 +900,7 @@ const GlobalNav = class {
           'search-icon': true,
           'search-icon--search': true,
           'search-icon--show': !!this.searchValue && !this.searchLoading,
-        }, slot: "end", onMouseDown: (e) => {
+        }, slot: "end", onClick: (e) => {
           this.searchValInternal = this.searchInput.value;
           this.onSearchSubmit(e);
         } }, h("nano-icon", { name: "light/search" })), h("span", { class: {
@@ -946,10 +932,7 @@ const GlobalNav = class {
         '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", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >=
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
+      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
         (!this.activeMyAccountSections ||
@@ -957,61 +940,52 @@ const GlobalNav = class {
         this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
         this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
-    ], this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { name: "solid/chevron-right" })))), h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { class: "content", part: "burger-content" }, h("nav", { class: "nav-links nav-links--main", role: "menu" }, h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
+    ], this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { name: "solid/chevron-right" })))), h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { class: "content", part: "burger-content" }, h("nav", { class: "nav-links nav-links--main", role: "menu" }, h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
       !!this.mainSlotLen && (h("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
       !!this.siteNavItms.length) && (h("div", null, (this.hasSiteSlot || !!this.siteNavItms.length) && [
-      (this.threshold >= this.THRESHOLDLIMIT - 2 ||
+      (this.threshold >= THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
         this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { 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 < this.THRESHOLDLIMIT - 2 &&
+      ((this.threshold < THRESHOLDLIMIT - 2 &&
         this.mainSlotLen >= 2) ||
         this.overflowSlotLen >= 2) && (h("nav", { class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), h("div", { class: "content--sub" }, h("slot", { 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 <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
       (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { 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", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: this.myAccData.urls.forgot_password +
         this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { class: "sticker-trigger" }), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, h("div", { class: "bars", part: "bars" }, h("nav", { 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 <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
       (this.isLoggedIn &&
         (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
       (!!this.mainSlotLen &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
       ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       this.hasSiteSlot ||
       !!this.siteNavItms.length) && (h("button", { 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", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (h("a", { href: this.logoUrl, class: "logo-link", part: "logo-link" }, h("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       this.showSearch && !!this.internalSearchIndeces.length && (h("div", { 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", { name: "search", onSlotchange: this.assessSlottedContent })),
     ], (this.mainSlotLen > 0 ||
-      this.threshold <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
       ((this.showSearch && !!this.internalSearchIndeces.length) ||
         !!this.searchSlotLen) && (h("button", { class: {
         'icon-btn': true,
         'search-btn': true,
         'search-btn--open': this.searchBarShown,
-      }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onMouseDown: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search" }))), this.threshold >=
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
+      }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
         (!this.activeMyAccountSections ||
@@ -1020,12 +994,10 @@ const GlobalNav = class {
         this.cartUrl && !!this.cartCount && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
     ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
       (!this.activeMyAccountSections ||
         this.activeMyAccountSections.includes('loggedin')) &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
       this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
       this.myAccountUser && (h("div", { class: "user-links" }, h("button", { class: {
           'icon-btn': true,
@@ -1035,13 +1007,12 @@ const GlobalNav = class {
         return (h("a", { href: link.address, target: link.target }, link.title));
       })), h("div", { class: "user-links-panel-foot" }, h("a", { href: this.myAccData.urls.forgot_password +
           this.ssoRedirect }, "Change Password"), h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
-    ], h("span", { class: "measure-ele" })), (this.mainSlotLen > 0 ||
-      this.threshold <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { id: "global-nav-search-bar", class: {
+    ]), (this.mainSlotLen > 0 ||
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { 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", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
+      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
         open: this.modalOpen,
@@ -1156,10 +1127,8 @@ const GlobalNav = class {
     "searchIndeces": ["addIndeces"],
     "internalSearchIndeces": ["addAlgoliaIndeces"],
     "threshold": ["thresholdChange"],
-    "intersectRatio": ["ratioChange"],
     "thresholdReady": ["assessReady"],
-    "remoteDataReady": ["assessReady", "remoteReady"],
-    "ready": ["isReady"],
+    "remoteDataReady": ["assessReady"],
     "showAutocomplete": ["setupAutocompleteBlur", "resetHitFocus"],
     "secondaryMenuOpen": ["closeSearchBar"],
     "aboutSlotLen": ["slotChange"],