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

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/grid/grid.js

@@ -175,7 +175,7 @@ export class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (h(Host, { key: '410e2e3fce3867216adb0f9bf0501f8d40514bce', class: "nano-grid" }, h("div", { key: '424f6da1b39d37ef70912e87e5d61320b5ff8d11', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '051bdae40a3d63dfdb744a980c74a42c2ac9c05f' })), this.showHelper && (h("div", { key: 'b24395cdacf9d7ba3a15b1a9b064a2a97f3afac1', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, h("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (h("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get is() { return "nano-grid"; }
     static get encapsulation() { return "shadow"; }

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)))));
     }

package/dist/collection/components/input/input.css

@@ -358,7 +358,7 @@ label.visually-hide,
   display: grid;
   grid-template-areas: "overlay";
 }
-:host(:not(.is-invalid):not(.is-valid)) .form-ctrl__validation-icon {
+:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
   display: none;
 }
 

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

@@ -140,7 +140,9 @@ export class Input {
      * String to place within a label element. Alternatively you may use a label slot.
      */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -579,18 +581,18 @@ export class Input {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '1601bf765681a833b22c05294a1c8d9b5c6be5ee', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '87ffe8828b64535a10140feecfc75ff5fba354f2', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-input': true,
-            } }, h("div", { key: '3db99291d328de9684137597706b79e4f24b65e2', style: { width: '100%' } }, h(FormControlWrap, { key: 'df525275b5c35b9ae3fdc793766a9af759740076', ...wrapOptions, class: {
+            } }, h("div", { key: '88cf2db24e47049dd5ef7d45b41614b821a6dd5f', style: { width: '100%' } }, h(FormControlWrap, { key: 'c50c5abfb6c8e3b64c151cca611ba83d6949dfff', ...wrapOptions, class: {
                 'has-helper': this.hasHelperSlot,
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
-            } }, h(FormControl, { key: '8f25ff2340431b2ea29d5063877ad376ec229758', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
+            } }, h(FormControl, { key: 'fc9d46333893136293bbdac44372ba3863a9d864', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
                 this.type === 'date' &&
                 !this.readonly &&
                 !this.disabled && [
@@ -605,10 +607,10 @@ export class Input {
                         this.value = e.detail.value;
                         this.pickerDropdown?.hide();
                     }, min: this.min, max: this.max, "is-modal": true, selectedDate: this.value || this.initialPickerDate || undefined }))),
-            ] }, this.type !== 'textarea' && (h("input", { key: '97734d0168a049af1b22e4517db5e58d25a75b13', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'b1780aa8cf51d8b7440825d461d89e8746fcd96d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+            ] }, this.type !== 'textarea' && (h("input", { key: '5aa8c0b68e55c5afb3f9e9676ee75bd53a242af2', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: '571c808ea1f623b996e17d287eab361444da2fa3', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: 'fa333ee624b824af60a8a79d09720e231e8d455c' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '10a61c2bbda41eac07546a6ad6a83b2b767489e8' }))));
     }
     static get is() { return "nano-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/masked-overflow/masked-overflow.js

@@ -327,7 +327,7 @@ export class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
+        return (h(Host, { key: 'ce255683796d356286e4c9cbd7f7ea34db77190b', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'd1ed2c18f2b317721e2cab42694a1f203d5d807a', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -336,12 +336,12 @@ export class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e1acd4b76844e48ef2700500977fcc227323fa92', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '30e8801e0b1ba96675ab129e5371eb6e1edff420', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '494da67346cf9ec3217eb46aad8e0bbfca7e5842', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '98e0cc7a8b0ab82440b0110e8f4d018b02612901', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '9f1622b178b5cfcf0c44cacb9f5dd3465306b9f8', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'd11134d63b8a733b7d9e0e74283eb463be032c82', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '2630de597a4c38e555eb95dfc19033a517ccdee2', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

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

@@ -38,138 +38,116 @@
     }
   }:host {
   --padding-top: 13px;
-  --padding-end: 12px;
+  --padding-end: 13px;
   --padding-bottom: 13px;
-  --padding-start: 12px;
+  --padding-start: 13px;
   --icon-size: 19px;
-  --font-size: 11px;
-  --global-nav-height: 79px;
-  --bg-color: #001a21;
-  --bg-color-hover: rgb(28 62 72 / 80%);
-  --bg-color-selected: #274048;
-  --bg-color-focus: rgb(28 62 72 / 80%);
-  --focus-outline: none;
-  --content-color: #fff;
-  --secondary-bg-color: rgb(28 62 72);
-  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;
+  --font-size: var(--nano-font-size-xs);
+  --bg-color: var(--nano-color-grey-mono-1600);
+  --bg-color-hover: var(--nano-color-grey-mono-1400);
+  --bg-color-selected: var(--nano-color-grey-mono-1200);
+  --bg-color-open: var(--nano-color-grey-mono-1500);
+  --content-color: var(--nano-color-basic-white);
+  --global-nav-height: 76px;
+  --menu-width: calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));
+  color-scheme: dark;
   display: block;
   z-index: 1;
   background: var(--bg-color);
-}
-:host ::slotted(.nano-nav-item) {
-  --secondary-padding-top: var(--global-nav-height);
-  --nano-icon-size: var(--icon-size);
   color: var(--content-color);
-  font-size: var(--font-size);
-  text-decoration: none;
-  box-sizing: border-box;
-}
-:host *,
-:host *::before,
-:host *::after {
-  box-sizing: border-box;
+  min-height: 100%;
 }
 
 :host(.hide) {
   display: none;
 }
 
-:host(.has-global-nav) .content-wrap {
-  padding-block-start: var(--global-nav-height);
-  margin-block-start: calc(var(--global-nav-height) * -1);
+.head {
+  border-bottom: var(--nano-color-grey-mono-1400) 1px solid;
 }
 
 .container {
   inset-inline-end: auto;
-  flex: 0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));
-  background: var(--bg-color);
   color: var(--content-color);
-  z-index: 1;
-  inline-size: calc(var(--padding-end, 1em) * 2 + var(--icon-size));
-  block-size: 100%;
+  inline-size: var(--menu-width);
+  transition: inline-size 0.3s ease;
+  top: var(--global-nav-height);
+  position: sticky;
 }
 
 :host(.open) .container {
   inline-size: auto;
 }
 
-:host(:not(.loading)) .container {
-  transition: inline-size 0.3s ease;
-}
-
 .content-wrap {
   inset-inline-start: 0;
   inset-block-start: 0;
   inline-size: inherit;
-  max-inline-size: inherit;
   background: var(--bg-color);
-  color: #fff;
-  position: sticky;
-  font-size: var(--icon-size);
+  font-size: var(--font-size);
   line-height: 1;
   display: flex;
-  min-block-size: calc(100vh - 79px);
-  min-block-size: calc(var(--vh, 1vh) * 100 - 79px);
-  z-index: 1;
+}
+.content-wrap::after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--global-nav-height) * -1) 0 0 0;
+  background-color: var(--bg-color);
+  z-index: -1;
 }
 
 .content {
+  max-height: 100%;
   inline-size: auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-color);
-  flex: 1;
+  flex: 1 1 0%;
 }
-.content::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 0;
-  background: var(--bg-color);
-  z-index: -1;
-  block-size: 100vh;
+.content:has(.foot) {
+  height: calc(100vh - var(--global-nav-height));
 }
 
 .collapse-btn {
-  background: var(--bg-color-selected);
-  border: none;
-  color: inherit;
-  font-size: var(--icon-size);
-  margin-block: var(--padding-top) var(--padding-bottom);
-  margin-inline: calc(var(--padding-start) / 2) 0;
-  border-radius: 4px;
+  all: unset;
   padding-block: 6px;
-  padding-inline: 5px;
+  padding-inline: var(--padding-start) var(--padding-end);
+  width: 100%;
   display: flex;
-  align-content: center;
-  inline-size: 30px;
-  flex: 0 0 auto;
+  justify-items: flex-start;
+  background-color: var(--bg-color);
+  appearance: none;
+  cursor: pointer;
+  font-size: var(--icon-size);
+}
+.collapse-btn:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+}
+.collapse-btn:hover {
+  background-color: var(--bg-color-hover);
+}
+.collapse-btn:active {
+  background-color: var(--bg-color-selected);
 }
 .collapse-btn .nano-icon {
-  font-size: var(--icon-size);
-  transition: 0.2s transform ease-in-out;
-  transform: translateZ(0) rotate(0deg);
+  transition: var(--nano-transition-x-fast) rotate ease-in-out;
+  rotate: 0deg;
 }
 :host(.open) .collapse-btn .nano-icon {
-  transform: translateZ(0) rotate(180deg);
+  rotate: 180deg;
 }
 
-.foot {
-  margin-block-start: auto;
+.visually-hidden {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
-.measure-ele {
-  block-size: 1px;
+.foot {
+  margin-block-start: auto;
+  margin-block-end: var(--padding-bottom);
 }