@nanoporetech-digital/components 8.0.0-alpha.8 → 8.0.0-alpha.9

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -51,19 +51,28 @@
   --text-color-disabled: var(--nano-color-neutral-1000);
   --border-color: var(--nano-color-neutral-400);
   --trigger-bg-color: var(--nano-color-base-0);
-  container-type: inline-size;
   display: block;
 }
 
 .breadcrumbs {
+  inline-size: fit-content;
+}
+
+nano-menu.breadcrumbs {
   inline-size: 100%;
-  max-inline-size: 1346px;
 }
 
-ol,
-nano-menu::part(base) {
+.breadcrumbs-hidden {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+}
+
+ol {
   list-style: none;
-  padding: 0;
+  padding: var(--nano-spacing-l3) 0;
   margin: 0;
   display: flex;
   flex-direction: row;
@@ -112,14 +121,10 @@ a.return.link {
 
 .breadcrumbs__dropdown {
   inline-size: 100%;
-  display: none;
 }
 .breadcrumbs__dropdown[open]::part(trigger) {
   box-shadow: var(--nano-shadow-l1);
 }
-.breadcrumbs__dropdown[open]::part(panel) {
-  box-shadow: var(--nano-shadow-l1);
-}
 
 .trigger-button {
   inline-size: 100%;
@@ -155,23 +160,14 @@ a.return.link {
   transform: rotate(180deg);
 }
 
-@container (width < 768px) {
-  .main {
-    display: none !important;
-  }
-  .breadcrumbs__dropdown {
-    display: block !important;
-  }
-  nano-menu::part(base) {
-    flex-direction: column !important;
-  }
-  nano-nav-item::after {
-    display: none !important;
-  }
-  .trigger-button_label::after {
-    display: inline-block !important;
-  }
-  .return-only {
-    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
-  }
+nano-nav-item::after {
+  display: none !important;
+}
+
+.trigger-button_label::after {
+  display: inline-block !important;
+}
+
+.return-only {
+  padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
 }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -14,24 +14,56 @@ export class NanoBreadcrumb {
     /** Array of breadcrumb items to render */
     breadcrumbs = [];
     isOpen = false;
-    componentWillLoad() {
-        // add global styles to shadow DOM
-        if (Build.isBrowser)
+    isOverflowing = false;
+    mainRef;
+    componentDidLoad() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
             addGlobalStylesheetToShadow(this.el?.shadowRoot);
+        }
+    }
+    componentDidUpdate() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
+        }
+    }
+    connectedCallback() {
+        if (Build.isBrowser) {
+            window.addEventListener('resize', this.checkOverflow);
+        }
+    }
+    disconnectedCallback() {
+        if (Build.isBrowser) {
+            window.removeEventListener('resize', this.checkOverflow);
+        }
     }
+    checkOverflow = () => {
+        if (!this.mainRef)
+            return;
+        const containerWidth = this.el.clientWidth;
+        const contentWidth = this.mainRef.scrollWidth;
+        const shouldOverflow = contentWidth > containerWidth * 0.9;
+        if (this.isOverflowing !== shouldOverflow) {
+            this.isOverflowing = shouldOverflow;
+            if (this.isOverflowing)
+                this.isOpen = false; // Reset dropdown state when overflow occurs
+        }
+    };
     render() {
         const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
-        // if we have a return breadcrumb, we only want to show that
         if (returnBreadcrumb) {
             return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
         }
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
-            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));
+            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
+                return: breadcrumb.return,
+                link: !!breadcrumb.href,
+            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
     }
     static get is() { return "nano-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -76,9 +108,10 @@ export class NanoBreadcrumb {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "isOverflowing": {}
         };
     }
     static get elementRef() { return "el"; }
 }
-const BreadcrumbList = ({ breadcrumbs, className, }) => (h("ol", { class: `breadcrumbs ${className}` }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
+const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));

package/dist/collection/components/datalist/datalist.js

@@ -511,7 +511,7 @@ export class DataList {
     }
     componentDidRender() {
         setTimeout(() => {
-            if (!this.connectedInput)
+            if (!this.connectedInput && this.host.isConnected)
                 console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
         }, 500);
     }
@@ -525,18 +525,18 @@ export class DataList {
         }
     }
     render() {
-        return (h(Host, { key: 'f5870b17a2a42fc705708682f48c42b8acc623b7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '2b8f7500f1ed990dc79bda02a6980a018697d508', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: 'ef306491a6086d4977e46567ad1e4b344890ea86', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '7beb913e00bb595dd36ad107edfdac05ab902efd', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'c175138c17a40bf755688ef7e4a85ef8e1608836', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '125572d377ad74a2b6d3e0ae36f708075517d60f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '9a079eef12530562bd535a4d9e2ec65f747cd113', name: "list-top" }), h("slot", { key: '3421b5c0f4bfe14354f7a27d99b17d208032df25' }), h("slot", { key: '5bc52d6bbaffb020a8dee8acdceafb5c421e89d8', name: "internal-opts" }), h("slot", { key: '66a4b6158d9bea7f0212088a86069d93bc7c17ef', name: "list-bottom" })), h("nano-menu", { key: '78daf54379a013a64c702cfc2df12e2cf36c993e', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '63f4fc2409d3e2ef1bc38658f4d0e890326ddb7e', name: "list-top" }), h("slot", { key: '0bd4aa53d535ac07a779f9f44dae01801c5ddb43' }), h("slot", { key: 'ee39e492165395226a04b49dbe4ba0d6d3a70172', name: "internal-opts" }), h("slot", { key: 'd7af12aa6cf517a89b1718b74c48235753970664', name: "list-bottom" })), h("nano-menu", { key: 'bb1f661fc618cacc2f81aaeca1d03c96c1d1c557', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '4c1fa43790c0ae2c84d919242764797c9e9a2546', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '01e5040fe2991ffacfceb27ce997399641ab6a37', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: 'c343a887d35603ba194a4774e2ca66e7e299ed2c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '2810cc360410aae1263442e29aca34f0cd39c9b6', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get is() { return "nano-datalist"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-input/date-input.js

@@ -12,8 +12,7 @@ const DateRegxps = {
 };
 let inputIds = 0;
 /**
- * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
- * It has specific options for localisation, date formatting and validation.
+ * Enables date selection and input in a form.
  *
  * @version 1.0.0
  * @status deprecated
@@ -412,10 +411,10 @@ export class DateInput {
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'd584003b7188229e35c59048e46b0c2be1068987', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '88ef9423db0ed1e11b5ccad2c75a0c9d0f9b9d29', class: "date-field" }, h("nano-input", { key: 'a4d5c368da0bb9b296563e09760d8c450360d2d3', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '8852fd0a14ed85773706f6313be4af121c33f212', name: "start", slot: "start" }), h("slot", { key: 'c34815b4acd3bd9e556d908dcebb4e39a9ab1f78', name: "label", slot: "label" }), h("slot", { key: '3ba077636a9908c1ff57ca6a82824586becd8497', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'c45a42017fc0023f1f9b6c8201b209979678fd52', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: 'ae888424999bff07e6693023e1ef38a2ae471c96', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'd82337659d8656f162e51789dcd32c102f733f77', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'f5c9d99cd1a6725068f7f1acd27cf6e3e3717754' }, h("div", { key: 'b9e02ade28a5213382b993e57143dff2d19ececd', class: "date-field__close-bar" }, h("button", { key: 'af6aebad9c406b500d17338a0f5fb178638d3a01', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: '6cecd49256234320e73d732e689dd552dbf22645', name: "light/xmark" }), h("span", { key: 'fc9f86d2f3dbf06d53217ccf6556b3b119240ceb', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'd0a388667a9372ecfebae22d0175fe68230c11ac', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '109ec3fe3dd22087fca3240b3ad2b712b7444a3e', slot: "helper" }, h("span", { key: 'a709814dfcb66923cb512737768b4385c6a2fa85', class: { vhidden: !!this.value.length } }, h("slot", { key: '16375d1e2af0839d94b93b02117817fe54ed5887', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'dce160d23dbf15337800f15f43380c75643f6373' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: 'c50fb0b2a5104229cf44f9564a902b813e45111f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get is() { return "nano-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/drawer/drawer.css

@@ -106,7 +106,6 @@
 
 .drawer__panel {
   position: absolute;
-  z-index: 2;
   max-inline-size: 100%;
   max-block-size: 100%;
   background-color: var(--panel-background);

package/dist/collection/components/dropdown/dropdown.js

@@ -601,7 +601,7 @@ export class Dropdown {
                         "EventEmitter": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::EventEmitter"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
                         }
                     }
                 },

package/dist/collection/components/field-validator/field-validator.js

@@ -702,7 +702,7 @@ export class FieldValidator {
                         "ObservableMap": {
                             "location": "import",
                             "path": "@stencil/store",
-                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
+                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.3/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
                         },
                         "ValidatorValueStore": {
                             "location": "import",

package/dist/collection/components/footer/footer.css

@@ -159,11 +159,25 @@
   --input-font-size: var(--nano-font-size-2xs) !important;
   max-inline-size: 9rem !important;
 }
+@container footer-container (max-width: 1200px) {
+  :host .top {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
+  }
+  :host .top-end {
+    grid-row: 2;
+    grid-column: 1/-1;
+  }
+}
 @container footer-container (max-width: 912px) {
-  :host .top,
   :host .middle,
   :host .bottom {
     grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+  :host .top {
+    display: flex;
+    flex-direction: column;
   }
   :host .middle-center {
     flex-wrap: wrap;

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

@@ -122,6 +122,7 @@ nano-badge {
 .gn__menu-bar {
   inline-size: 100%;
   overflow: clip;
+  background-color: var(--main-menu-bar-bg-color);
 }
 .gn__menu-bar a {
   color: var(--main-menu-text-color);
@@ -136,7 +137,6 @@ nano-badge {
 .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;

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

@@ -147,6 +147,14 @@ export class GlobalNav {
         this._mainMenuBar = el;
         this.addMainmenuRo();
     }
+    /**
+     * Manually triggers the main menu bar resize behaviour.
+     * This can be useful if you append new children to the global-nav
+     */
+    async triggerResize() {
+        this.shouldResize = true;
+        this.breakpoint = 0;
+    }
     shouldResize = true;
     breakpoint = 0;
     breakpointChanged() {
@@ -488,20 +496,20 @@ export class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '66132ed8841605602bff8c2c750a657ec4d6d83a', class: {
+        return (h(Host, { key: '00499c2d65244ee4bba6b85c830c7f586ac3dbb9', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'c8dfcf4b405c72a14f576fb7b14ce41e8ff49b83', class: {
+            } }, h("div", { key: '56a6a9c2521b37bd2273ca8919bf74b572b5ca22', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '741e6dc6df0253450f65e792f45fe2a337bb007d', 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: 'b8d197424ed2d4dff32234457b7836507d9777ba', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '36ef3c9a323078bfbf4f28682afd4b33475c6d1d', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'bc4b0680aa33d9084668eaa40ca867cdd039375b', 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: '03a2d6fed3ac78527aefb80a881f270b6fad48a2', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b1fb1192dd02f22944f40a772ffa8a88ba39e8c', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '569277672e49d95702583537c90db8de51d89a35', name: "overflow" }))), h("div", { key: '367e4bfffe6a8359bf49e6a4ea7a69dfdd20e6af', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aca6cb95a4b03c46509cfd6d0a55e722976200e9', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8c56fcfde4d896b30a277a00f79de3dfb75d93ef', 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: 'fb8ca915d6460ee871a0a357b8a25d2e720620ac', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '96962d7ccd0d55f5c054dae0e8480398e7ea1415', name: "logo" }, h("a", { key: 'dcfa5d446ef38afb07285172dd5c0269da604d44', 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,
+            : '', h("slot", { key: '8a5c53acab83acf5055bbb893400bdee271f55e2', name: "overflow" }))), h("div", { key: '83b09941ac6af91ed7eee1537597bb73d0be8f78', class: "gn__menu-bar-wrapper" }, h("div", { key: '65c85c1b34a5c3e687797ac88bc480356a348a99', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '7ebee46ce5c2e5b5c5226ebefb082c64cc54aa61', 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: 'c8d58d9ed7c74d7044a42544a638520efa199a84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '1239a8949b63a740eca77ddf9d2a894571c1099c', name: "logo" }, h("a", { key: 'dd3c247f271d0c62aca93033d9ae5f9f1580be61', 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: 'c4e2a7166c5766eede74e6f9e5763e157c47ac74', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e6bb457db190019f21c1c712bb8c9bab5abec91b', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: 'd46c596a07189f129a1644118560590e70101a2b', 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: '00df8fe73a5c1e5b0e3263ee584549c1b450675f', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'b03a0c3f58a7a50939ec09258dda85a49157cf48', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '367ed61df9546497f9cef04d833e86f59389f48a', 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: 'd8013a6f1cd8953bc63ba6f518367a4b278197bd', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                            (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: 'f8704085d6b7013c96ea922d783e4117fdd1a085', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '9b056f95508275dd70aa7626396795ab348beb02', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '8ae5f8986cfa43e035570c0af6e01b63d2a41ec3', 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: '6026bb1da1649da1bfa8fdd0aca64637768e264d', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '7a662aeeae84bea4e73a907c185933ef40239061', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'e047a10dcabdde6ea485f08a03f3b92d12109846', 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: '94f69085cc0aad1a16cd37c34edb08bec7ddfa07', 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: 'fe62a269a2f3ca318ad1e071404f693c9540317b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '87d39b1dc2be07a66b546ba53eea56351bb103ec', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'fade49b478eddeb181f332b8db31b0f88c98305f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e7c946dc5ec1ee76d115fd2575b1288f95d71c43' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'cbf4fe8934165e90ea788e51994471120886343b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '066d8efa608ce3de3f55c0d4acc9db4c236e8e79', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '2cf9e1520de0e89ced9eee012990034b4602cfe5', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '76da20f849a0d244a3127c937a08ee0e06381922' }, "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,
@@ -511,10 +519,10 @@ export class GlobalNav {
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: '74852e060130852064b4987f1de0c8f0fa2a395e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: 'e66b10d8ce1de533d772bfd66bf7c73511f338ff', class: "gn__cart" }, h("nano-icon-button", { key: '47b8fc7ad91f5ea1048a670407ad602d29eb347f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '75c8ffb6264bd4a390ad77d15c408105d6f77393', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '59565a179d237c35d5528e4527b92372d2088b18', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: '33cc9bf94208059a733ef7c3abf2fda237f7193c', class: "gn__cart" }, h("nano-icon-button", { key: '62158360ce5c519c5d49246897cd3768831bea60', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '668b68f55175618acfdbf787373fdc05ca6c6586', 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: '798ee16df74983e3d5689639f3320198bd1fe14d', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: 'a51edbf9c6bc9b0e34e207e21b4341704032e82f', part: "site-search-results" }, h("slot", { key: '4ae65a7bc4d8897d95e43692b87830cf9f9d8a8f' }))))));
+            : '', 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("nano-global-search-results", { key: '46f38c9e68b64668a7dc28cf98ae772bae059fb5', part: "site-search-results" }, h("div", { key: '5be5030d0eaaa992f334e818be155683b7f282e6', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'b144415e3e26914d026c403052d65237c693db2a' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -954,6 +962,23 @@ export class GlobalNav {
                     "tags": []
                 }
             },
+            "triggerResize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually triggers the main menu bar resize behaviour. \nThis can be useful if you append new children to the global-nav",
+                    "tags": []
+                }
+            },
             "submitSearch": {
                 "complexType": {
                     "signature": "() => Promise<void>",

package/dist/collection/components/global-search-results/global-search-results.css

@@ -49,7 +49,6 @@
   justify-content: space-between;
 }
 .main-search__wrap {
-  /* autoprefixer: ignore next */
   display: contents;
   block-size: 100%;
 }

package/dist/collection/components/grid/grid.css

@@ -38,13 +38,15 @@
     }
   }:host {
   /**
-  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding
-  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding
-  * @prop --grid-align-items: alignment of items in the grid. Defaults to start
+  * @prop --grid-col-gap: gap between all columns. Defaults to `var(--nano-spacing-md)`
+  * @prop --grid-row-gap: gap between all rows. Defaults to `var(--nano-spacing-md)`
+  * @prop --grid-align-items: alignment of items in the grid. Defaults to `start`
+  * @prop --grid-justify-items: justification of items in the grid. Defaults to `start`
   */
-  --grid-col-gap: var(--nano-spacing-medium, 16px);
-  --grid-row-gap: var(--nano-spacing-medium, 16px);
+  --grid-col-gap: var(--nano-spacing-md);
+  --grid-row-gap: var(--nano-spacing-md);
   --grid-align-items: start;
+  --grid-justify-items: start;
   --current-grid-size: "grid size: s";
   container-type: inline-size;
   display: block;
@@ -55,6 +57,7 @@
   block-size: inherit;
   min-block-size: inherit;
   align-items: var(--grid-align-items);
+  justify-items: var(--grid-justify-items);
 }
 
 :host([show-helper]:not([show-helper=false])) {

package/dist/collection/components/in-page-nav/in-page-nav.js

@@ -23,14 +23,15 @@ export class NanoInPageNav {
     /** Whether the headers should be sticky (small screen only). Defaults to true */
     stickyHeaders = true;
     el;
-    isMobile = window.innerWidth <= this.breakpoint;
+    isMobile = false;
     stickyClass = 'sticky';
     stuckClass = 'stuck';
     stickyObserver;
     slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
     componentDidLoad() {
-        this.updateNavForBreakpoint();
-        window.addEventListener('resize', this.updateNavForBreakpoint);
+        if (Build.isBrowser) {
+            this.updateNavForBreakpoint();
+        }
     }
     /**
      * Checks if the current screen width is less than or equal to the breakpoint.
@@ -38,6 +39,8 @@ export class NanoInPageNav {
      * If not, it transforms the mobile navigation back into a desktop one.
      */
     updateNavForBreakpoint = () => {
+        if (Build.isServer)
+            return;
         this.isMobile = window.innerWidth <= this.breakpoint;
         if (this.isMobile) {
             // if the mobile slot is not there, we need to transform the desktop nav into a mobile one
@@ -54,6 +57,8 @@ export class NanoInPageNav {
     };
     // make nano-details headers sticky
     initStickiness() {
+        if (Build.isServer)
+            return;
         let lastScrollTop = 0;
         // shadowRoot for mobile slot, light DOM for default nav
         const nanoDetails = this.isMobile && this.slotCtrl.has('mobile')
@@ -95,11 +100,16 @@ export class NanoInPageNav {
             this.stickyObserver.observe(details);
         });
     }
+    connectedCallback() {
+        if (Build.isBrowser) {
+            window.addEventListener('resize', this.updateNavForBreakpoint);
+        }
+    }
     disconnectedCallback() {
         if (this.stickyObserver) {
             this.stickyObserver.disconnect();
         }
-        if (this.updateNavForBreakpoint) {
+        if (Build.isBrowser) {
             window.removeEventListener('resize', this.updateNavForBreakpoint);
         }
     }
@@ -209,7 +219,7 @@ export class NanoInPageNav {
         });
     }
     render() {
-        return (h(Host, { key: '92552373d8a09fb223e32246547a8d134cb09da2', class: "nano-in-page-nav" }, h("nav", { key: '6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '1c596d58e78b17a8ba5e408a5156a6be59cf1765', class: "header" }, h("slot", { key: '9d6b924c2a24e85681564744a3667eb23692ae07', name: "back" }), h("slot", { key: 'c3f9a3a6f2879054df7b50074872a3341d02f0f5', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
+        return (h(Host, { key: 'fd3f27b1f30fa2e769abff0f6f28d95a09a9573c', class: "nano-in-page-nav" }, h("nav", { key: '56bb0757c62664ca08d55f12d5be0461c8333363', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'd1ec827847505fcef24412a84b47a9816c06b117', class: "header" }, h("slot", { key: 'edf50c9a0f9968dd7b224f919f800634f0b49ece', name: "back" }), h("slot", { key: '09e6a97a71aebda4e1217f3d7bfad9ae1264a9cc', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
                 ? `details-wrapper ${this.stickyClass}`
                 : 'details-wrapper' }, h("slot", { name: "mobile" }))) : (h("slot", null)))));
     }