@nanoporetech-digital/components 3.1.1 → 3.3.0

package/dist/collection/components/file-upload/file-upload.css

@@ -62,8 +62,8 @@
   --btn-icon-size: var(--nano-btn-icon-size, 1.4em);
   --btn-padding-top: var(--nano-btn-padding-top, 0.5em);
   --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);
-  --btn-padding-start: var(--nano-btn-padding-start, 1em);
-  --btn-padding-end: var(--nano-btn-padding-end, 1em);
+  --btn-padding-start: var(--nano-btn-padding-start, 1rem);
+  --btn-padding-end: var(--nano-btn-padding-end, 1rem);
 }
 
 :host([disabled]:not([disabled=false])) {
@@ -107,14 +107,10 @@
 }
 .file-upload__more {
   height: 1em;
-  -webkit-margin-before: calc(var(--label-padding) / 2);
-          margin-block-start: calc(var(--label-padding) / 2);
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--label-padding);
-          margin-block-end: var(--label-padding);
-  -webkit-margin-start: 3px;
-          margin-inline-start: 3px;
+  margin-block-start: calc(var(--label-padding) / 2);
+  margin-inline-end: 0;
+  margin-block-end: var(--label-padding);
+  margin-inline-start: 3px;
   position: relative;
 }
 .file-upload__error, .file-upload__help {
@@ -123,7 +119,6 @@
   position: absolute;
   font-size: var(--invalid-msg-font-size);
   line-height: 1.2;
-  -webkit-transition: 0.3s ease-out opacity;
   transition: 0.3s ease-out opacity;
 }
 .file-upload--invalid .file-upload__error, .file-upload--invalid .file-upload__help {
@@ -151,25 +146,15 @@
   display: inline-block;
 }
 .file-upload__drop-area {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   background-color: var(--drop-bg);
   color: var(--drop-text);
   min-height: var(--drop-height);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   font-size: 0.9em;
   position: relative;
-  -webkit-transition: background-color 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out;
   padding: 0.5rem;
 }
@@ -190,7 +175,6 @@
   border-color: rgba(var(--drop-border-tint), 0.5);
   border-style: dashed;
   inset: 0;
-  -webkit-transition: top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out;
   transition: top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out;
 }
 .file-upload--invalid .file-upload__drop-area::after {
@@ -208,8 +192,7 @@
   position: relative;
 }
 .file-upload--focus .file-upload__drop-area span {
-  -webkit-box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-          box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
+  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
 }
 .file-upload__list {
   list-style: none;
@@ -223,91 +206,43 @@
 .file-upload__list-item {
   width: 100%;
   margin: 0 0 2px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-  -webkit-animation: hideListItem 0.3s ease-in-out forwards;
-          animation: hideListItem 0.3s ease-in-out forwards;
-}
-@-webkit-keyframes hideListItem {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-  }
+  align-items: center;
+  transform: translateZ(0);
+  animation: hideListItem 0.3s ease-in-out forwards;
 }
 @keyframes hideListItem {
   0% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
+    transform: translateY(0);
+    transform: translateZ(0);
   }
   100% {
     opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
+    transform: translateY(10px);
+    transform: translateZ(0);
   }
 }
 .file-upload__list-item--active {
-  -webkit-animation: showListItem 0.3s ease-in-out forwards;
-          animation: showListItem 0.3s ease-in-out forwards;
-}
-@-webkit-keyframes showListItem {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-  }
+  animation: showListItem 0.3s ease-in-out forwards;
 }
 @keyframes showListItem {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
+    transform: translateY(10px);
+    transform: translateZ(0);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
+    transform: translateY(0);
+    transform: translateZ(0);
   }
 }
 .file-upload__list .list-title {
   background: var(--nano-color-blue--faded);
   border-radius: 5px;
   padding: 5px 5px;
-  -webkit-margin-end: 2px;
-          margin-inline-end: 2px;
+  margin-inline-end: 2px;
   display: block;
   width: 100%;
   overflow: hidden;
@@ -332,17 +267,13 @@
   -webkit-box-align: center;
   text-decoration: none;
   color: inherit;
-  -webkit-transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;
-  transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;
   transition: background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;
-  transition: background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;
   padding-inline: var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);
   padding-block: var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);
-  -webkit-box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
-          box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
   display: inline-block;
   border-radius: var(--nano-btn-border-radius, 5px);
-  line-height: var(--nano-btn-line-height, 1.5rem);
+  line-height: var(--nano-btn-line-height, 1.5em);
   font-weight: 500;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.02);
@@ -372,33 +303,28 @@
 }
 .file-upload__button:focus, .file-upload__button.button--focus {
   outline: none;
-  -webkit-box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-          box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-}
-.file-upload__button nano-icon {
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  font-size: var(--nano-btn-icon-size, 1rem);
+  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
+}
+.file-upload__button nano-icon,
+.file-upload__button nano-spinner {
+  --base-color-rgb: 255, 255, 255;
+  margin-inline-start: 0.5em;
+  margin-inline-end: 0;
+  font-size: var(--nano-btn-icon-size, 1em);
   vertical-align: middle;
-  -webkit-margin-before: -0.188rem;
-          margin-block-start: -0.188rem;
+  margin-block-start: -0.188em;
   display: inline-block;
 }
-.file-upload__button.button--icon-start nano-icon {
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+.file-upload__button.button--icon-start nano-icon,
+.file-upload__button.button--icon-start nano-spinner {
+  margin-inline-start: 0;
+  margin-inline-end: 0.5em;
 }
 .file-upload__button:hover:not(.file-upload__button--disabled) {
-  -webkit-box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-          box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
 }
 .file-upload__button:active:not(.button--disabled):not(:disabled) {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .file-upload__button--disabled, .file-upload__button:disabled {
   opacity: 0.6;
@@ -422,12 +348,12 @@
   border-style: var(--nano-btn-border-style, solid);
   border-width: var(--nano-btn-border-width, 2px);
   border-radius: var(--nano-btn-border-radius, 5px);
+  padding-block: calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));
   color: var(--btn-bg);
   border-color: var(--btn-bg);
 }
-.file-upload__button.button--keyline:hover:not(.button--disabled):not(:disabled), .file-upload__button.button--keyline:not(.button--focus), .file-upload__button.button--keyline.button--active {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+.file-upload__button.button--keyline:hover:not(.button--disabled):not(:disabled), .file-upload__button.button--keyline:not(:focus):not(.button--focus), .file-upload__button.button--keyline.button--active {
+  box-shadow: none;
 }
 :host([disabled]:not([disabled=false])) .file-upload__button {
   opacity: 0.4;
@@ -442,12 +368,8 @@
   border: 0;
   outline: none;
   background-color: transparent;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   width: auto;
   color: var(--clear-btn-color);
 }
@@ -459,12 +381,8 @@
   margin-block: 0;
 }
 .file-upload__button .file-upload__btn-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .file-upload__button .file-upload__btn-content span {
   white-space: nowrap;

package/dist/collection/components/global-nav/global-nav.js

@@ -10,10 +10,10 @@ import { debounce } from '../../utils/throttle';
 import { displayTransition } from '../../utils/transitions';
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
 const THRESHOLDBREAKS = {
-  search: 0,
-  about: 1,
-  main: 2,
-  login: 3,
+  about: 0,
+  main: 1,
+  login: 2,
+  search: 3,
   icon: 4,
 };
 /**
@@ -396,7 +396,7 @@ export class GlobalNav {
     this.scrollingUp = true;
     this.searchLoading = false;
     this.showAutocomplete = false;
-    this.secondaryMenuOpen = false;
+    this.secondaryMenuOpen = null;
     this.userMenuOpen = false;
     this.menuFullScreen = false;
     this.searchValInternal = '';
@@ -628,7 +628,11 @@ export class GlobalNav {
     if (!ev.detail.secondaryMenu)
       return;
     ev.stopPropagation();
-    this.secondaryMenuOpen = true;
+    this.secondaryMenuOpen = ev.target;
+    if (!this.menuSelectedItems) {
+      this.menuSelectedItems = this.el.querySelectorAll('nano-nav-item.selected');
+      this.menuSelectedItems.forEach((i) => i.classList.remove('selected'));
+    }
     this.menuContentDiv.style.minHeight =
       ev.detail.secondaryMenu.scrollHeight + 'px';
   }
@@ -636,8 +640,14 @@ export class GlobalNav {
     if (!ev.detail.secondaryMenu)
       return;
     ev.stopPropagation();
-    this.secondaryMenuOpen = false;
-    this.menuContentDiv.style.minHeight = '';
+    setTimeout(() => {
+      if (this.secondaryMenuOpen === ev.target && this.menuSelectedItems) {
+        this.secondaryMenuOpen = null;
+        this.menuContentDiv.style.minHeight = '';
+        this.menuSelectedItems.forEach((i) => i.classList.add('selected'));
+        this.menuSelectedItems = null;
+      }
+    }, 200);
   }
   async handleUserMenu() {
     await displayTransition(this.userLinkPanel, 'show', this.userMenuOpen);
@@ -655,8 +665,8 @@ export class GlobalNav {
     this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
     this.searchBarEl.style.display = 'block';
     setTimeout(() => {
-      this.searchBarEl.style.height =
-        this.searchBarEl.querySelector('.search-widget').scrollHeight + 'px';
+      const widgetHeight = Math.floor(this.searchBarEl.querySelector('.search-widget').scrollHeight) - 1;
+      this.searchBarEl.style.height = widgetHeight.toString() + 'px';
     }, 50);
   }
   // Algolia search
@@ -817,7 +827,7 @@ export class GlobalNav {
     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.searchIndex, onNanoChange: this.onSearchIndexChange, mask: true }, this.internalSearchIndeces.map((index) => {
         return (h("nano-option", { selected: index.index === this.searchIndex, value: index.index }, index.name || index.index));
-      })), 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]
+      }), 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,
@@ -845,7 +855,7 @@ export class GlobalNav {
         'search-auto-complete-shown': this.showAutocomplete && this.scrollingUp,
         'modal-open': this.modalIsOpen,
         resizing: this.isResizing,
-      }, dir: isRtl ? 'rtl' : null }, h("div", { class: {
+      }, dir: isRtl ? 'rtl' : null, role: "navigation" }, h("div", { class: {
         'global-nav': true,
         'scrolling-down': !this.scrollingUp,
       } }, h("nav", { id: "global-nav-menu", class: {
@@ -853,7 +863,7 @@ export class GlobalNav {
         open: this.modalOpen,
         'has-promotion': this.hasPromotionSlot,
         'menu-full-screen': this.menuFullScreen,
-        'secondary-open': this.secondaryMenuOpen,
+        'secondary-open': !!this.secondaryMenuOpen,
       }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div) }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, h("div", { class: "gn-menu_actions" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
@@ -863,7 +873,7 @@ export class GlobalNav {
         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" }, h("nav", { class: "nav-links nav-links--main" }, h("slot", { name: "overflow" }), this.threshold <
+    ], 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" }, h("nav", { class: "nav-links nav-links--main", role: "menu" }, h("slot", { name: "overflow" }), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
       !!this.mainSlotLen && h("slot", { name: "main" })), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
@@ -885,7 +895,7 @@ export class GlobalNav {
     ], (this.hasSiteSlot || !!this.siteNavItms.length) && [
       (this.threshold >= this.THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
-        this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title" }, "Sites"), h("nav", { class: "nav-links nav-links--sub", "aria-label": "Different company site links" }, h("slot", { name: "site" }), this.siteNavItms.map((link) => {
+        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" }), 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 &&
@@ -899,7 +909,10 @@ export class GlobalNav {
       (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" }, 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), !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { name: "loggedin" }), 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" }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, h("div", { class: "bars", ref: (div) => (this.barsDiv = div) }, h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
+        this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion" }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, h("div", { class: "bars", ref: (div) => (this.barsDiv = div) }, h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
+        this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
+        ? 'menu'
+        : undefined }, (this.hasPromotionSlot ||
       !!this.overflowSlotLen ||
       ((this.myAccData || !!this.iconSlotLen) &&
         this.threshold <
@@ -915,15 +928,17 @@ export class GlobalNav {
         this.threshold <
           this.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" }, h("img", { src: getAssetPath(`./assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo" }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main" })), this.threshold >=
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
+      !!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" }, h("img", { src: getAssetPath(`./assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo" }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main" })), this.mainSlotLen === 0 &&
+      this.threshold >=
+        this.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" }),
-    ], this.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.search &&
+    ], (this.mainSlotLen > 0 ||
+      this.threshold <
+        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
       ((this.showSearch && !!this.internalSearchIndeces.length) ||
         !!this.searchSlotLen) && (h("button", { class: {
         'icon-btn': true,
@@ -940,7 +955,7 @@ export class GlobalNav {
       ],
     ], (!!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" }, h("slot", { name: "about" }), 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.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about" }), !!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 >=
@@ -954,12 +969,13 @@ export class GlobalNav {
         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.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && (h("div", { id: "global-nav-search-bar", class: {
+    ], h("span", { class: "measure-ele" })), (this.mainSlotLen > 0 ||
+      this.threshold <
+        this.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) }, h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && h("slot", { name: "search" })))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && h("slot", { name: "search" })))))), h("div", { class: "sticker-trigger" }), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
         open: this.modalOpen,