@nanoporetech-digital/components 8.0.0-alpha.0 → 8.0.0-alpha.2

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@4.35.1/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
+                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@stenciljs/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
                         },
                         "ValidatorValueStore": {
                             "location": "import",

package/dist/collection/components/form-control/form-control.js

@@ -22,7 +22,7 @@ export const FormControlWrap = (props, children) => {
             'has-float-label': label !== null && floatLabel,
             'has-helper-end': hasHelperEndSlot,
             rtl,
-            [props.class]: true,
+            [props.class]: !!props.class,
         } }, h("div", { class: "form-ctrl__wrapper" }, !floatLabel ? renderLabel({ ...props }) : '', h("div", { class: {
             'form-ctrl__input': true,
             'form-ctrl__textarea': type === 'textarea',

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

@@ -149,7 +149,7 @@ nano-badge {
 .gn__main-menu > * {
   margin-inline-end: var(--nano-spacing-xl);
 }
-.gn__main-menu > *:is(slot) {
+.gn__main-menu > *:is(slot, slot-fb) {
   display: flex;
 }
 .gn__main-menu > *:last-child {
@@ -283,7 +283,7 @@ nano-badge {
   --color-focus: var(--nano-color-neutral-1400);
   --color: var(--nano-color-primary-1200);
 }
-.gn__search-viewall::part(label), .gn__search-viewall [part~="label"] {
+.gn__search-viewall::part(label) {
   justify-content: flex-end;
   text-decoration: underline;
 }
@@ -392,11 +392,11 @@ nano-badge {
   --header-spacing: var(--nano-spacing-md) 0;
   --footer-spacing: var(--nano-spacing-md);
 }
-.gn__drawer::part(title), .gn__drawer [part~="title"] {
+.gn__drawer::part(title) {
   display: flex;
   justify-content: flex-end;
 }
-.gn__drawer::part(header-actions), .gn__drawer [part~="header-actions"] {
+.gn__drawer::part(header-actions) {
   order: -1;
 }
 

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

@@ -61,9 +61,13 @@ export class GlobalNav {
     cartCount = 0;
     /** MyAccount un-read message count. */
     msgCount = 0;
-    /** Manually toggle open or close the overflow menu */
-    async toggleOverflowMenu() {
-        this.overflowOpen = !this.overflowOpen;
+    /** Manually open the overflow menu */
+    async openOverflowMenu() {
+        this.overflowOpen = true;
+    }
+    /** Manually close the overflow menu */
+    async closeOverflowMenu() {
+        this.overflowOpen = false;
     }
     /// MY-ACCOUNT - start ///
     /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
@@ -483,20 +487,20 @@ export class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: 'c968c75746e8b8211210b47c595cff25f0af8933', class: {
+        return (h(Host, { key: '184e0e7a9468ebb9d60cfac752d955358a4fe0fe', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'edeec7490c6a32e2a44f3a8109f5d3f18c9d6101', class: {
+            } }, h("div", { key: '8eaa12e98b9a38721b9f03e2d646d20add74b3e6', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '56df68664885f1ed133b75e7f290405eb32bed67', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'da5e97e862497b1af8f0d0b3ed67e0dd03761f28', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3336390377aba9b2f127a7e1056fb80ba7d1ec75', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'b874e6c5aa026ed4c266601c52d41859857f38b5', 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: '29e9160530cb0bfbc335cbae26a22a4a3fecdff7', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b09f539037bd906065f5cf2cc6e806173d97b66', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '8c29d087282917c213beeadf719840c44b0f5494', name: "overflow" }))), h("div", { key: '6f07398ab8cd7d5f5fadafdb1d1f29ee9917efc3', class: "gn__menu-bar-wrapper" }, h("div", { key: '58546b45ca7ba896a9f0e1c5e528e191602e64a8', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'dd3d1cf935f2231e280cb0c7697c55470887c949', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'aa31d9a9cc0e1ad0d4db76ca9f4add388cef95bd', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02abef6f7550594481eff44ae5e332d74ba61138', name: "logo" }, h("a", { key: '084b9f9f88c68933f0d038b655833c5ba0117498', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: '197989ea9849d9143024538c26b2678c6220e6d4', name: "overflow" }))), h("div", { key: 'ce2b19cb76ff12eda8c4589ac188749ba3684c9f', class: "gn__menu-bar-wrapper" }, h("div", { key: '11c7745248090f0163a2a505fb5a20f56fdd11d2', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'a797355c5204357100884bf865d5ffb58967028e', 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: '0bf6477cd3dac4dd6cb0f55dd3ff3a313b55fb84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '8dbb4a02f736efcddc019aa602953ff41c5eb15e', name: "logo" }, h("a", { key: '5d60a835f364ada7ae8d8ee7b608df9b75443c26', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '130b8ce4dfd708a8a884aa172a6b7c1a7defa204', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e4f69fca3d5a6700de16f8102dbf916a0b0e4d77', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '40033ff956c6f0b59ef5f569a00e56efc8e0f8df', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '32b4e3be46dae8578c4adf038bda844d3bf4b8b9', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '17ee6f5b011997b09148d8a09749931ae0e681f0', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '800b2d3b1343a6d09a8951b753742e6eb5731648', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'a8eb120a2268645e17935d5dd86e8cf9de550866', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                            (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: '4270c5dc3e334ca906debe763771acc1dc4dd82b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7f39cd0f1338a1124a6c59c18774c62d7b3e36e7', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '503d51cd5f72ad19203bab7939230f8f7a7f4bd3', 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: '0a82c9022cb41265d8cb969057404ad32d7179f2', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'ee9b0742d2e8e6c3e51d35de68141bedb3677081', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'df0da7c60f0ced0d52eeb84360a7215d7247a5e7', 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: '83bdee0aca807f594505c657a4b1aeaabdb8a3d0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
                 this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '33472cd1d86a17143253aed1a7924b05343614a7', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'f88f3bcef70a7a29410d77ba849862ffc9db6562', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '075a4615d1715d941bd2368db97375f614867477', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '5194af389122625d1209e25208de761fa15dd7e3' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '2f7a3e620d015b8d56044d048ed49ee6a6e29ba4', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '528da1d7293b7589ce34a00007e83cf00ac71547', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f1556946842927cd1aa65a97346bc3ce1886311e', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'b7d9e741bdbcde586cb1734961b628de31aca103' }, "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,
@@ -506,10 +510,10 @@ export class GlobalNav {
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: 'c9dec204a82019869cc9b8086f07cfbfdf309f15', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: '986773d6af8b1b50000db8c428c2f25f07298a3c', class: "gn__cart" }, h("nano-icon-button", { key: '0afee86e684d4136e729955d28444a6c8a27838f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6305ad69d802aeda9a132ca204baf8b7b3aa17be', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '88e617068d30bfa4ca09f6b122109d9a3539088b', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: 'acceaf54481ab87951bbd9384f079c9d37fa0663', class: "gn__cart" }, h("nano-icon-button", { key: '6bed2b6a26492c9e7e4fe205b9ef94845360327d', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '4034d7828876c1237b1869abeb977e258d55006b', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '7c8b5194019e9b8346f6e0e927cff22ccf8b3e2e', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '213396f31494cb46551fd6839b95bf4155982a57', part: "site-search-results" }, h("slot", { key: 'd9471b1379c08106453aef43c0e590cf272a425f' }))))));
+            : '', 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: 'f52e45cccc15b745f54978bc140816847dc66560', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '0dd16b2bb789a66f3ef5b214ea54609aedad3ae4', part: "site-search-results" }, h("slot", { key: '3a86b5ee10f5da29d3da8d06b2b6ad36f27e725c' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -915,7 +919,24 @@ export class GlobalNav {
     }
     static get methods() {
         return {
-            "toggleOverflowMenu": {
+            "openOverflowMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually open the overflow menu",
+                    "tags": []
+                }
+            },
+            "closeOverflowMenu": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -928,7 +949,7 @@ export class GlobalNav {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Manually toggle open or close the overflow menu",
+                    "text": "Manually close the overflow menu",
                     "tags": []
                 }
             },

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

@@ -40,9 +40,11 @@
   /**
   * @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
   */
   --grid-col-gap: var(--nano-spacing-medium, 16px);
   --grid-row-gap: var(--nano-spacing-medium, 16px);
+  --grid-align-items: start;
   --current-grid-size: "grid size: s";
   container-type: inline-size;
   display: block;
@@ -52,6 +54,7 @@
   gap: var(--grid-row-gap) var(--grid-col-gap);
   block-size: inherit;
   min-block-size: inherit;
+  align-items: var(--grid-align-items);
 }
 
 :host([show-helper]:not([show-helper=false])) {

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

@@ -63,20 +63,20 @@
   --btn-text-color: var(--color-text);
   border: none;
 }
-:host .details-wrapper::part(header), :host .details-wrapper [part~="header"] {
+:host .details-wrapper::part(header) {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-weight: var(--font-weight);
   letter-spacing: var(--letter-spacing);
   padding: var(--spacing-l2);
 }
-:host .details-wrapper[open]::part(header), :host .details-wrapper[open] [part~="header"] {
+:host .details-wrapper[open]::part(header) {
   background-color: var(--nano-color-primary-75);
 }
-:host .details-wrapper::part(content), :host .details-wrapper [part~="content"] {
+:host .details-wrapper::part(content) {
   padding: 0;
 }
-:host .details-wrapper::part(body), :host .details-wrapper [part~="body"] {
+:host .details-wrapper::part(body) {
   padding: 0;
 }
 :host .header {
@@ -113,7 +113,7 @@
 :host nav:has(.details-wrapper[open]) {
   box-shadow: var(--nano-shadow-l1);
 }
-:host .details-wrapper.sticky.stuck[open]::part(header), :host .details-wrapper.sticky.stuck[open] [part~="header"] {
+:host .details-wrapper.sticky.stuck[open]::part(header) {
   z-index: var(--nano-z-index-menubar);
   inset-block-start: 0;
   position: sticky;

package/dist/collection/components/intersection-observe/intersection-observe.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, } from "@stencil/core";
+import { Host, Build, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import { findScrollParent } from "../../utils/scroll";
 /**
@@ -42,11 +42,9 @@ export class IntersectionObserve {
      * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */
     root = 'auto';
     handleRootChange() {
-        if (!this.root) {
-            this._root = undefined;
-            this.removeIO();
+        this.removeIO();
+        if (!this.root)
             return;
-        }
         let newRoot;
         if (this.root === 'auto') {
             // try to find nearest scrolling parent
@@ -71,7 +69,7 @@ export class IntersectionObserve {
         if (newRoot === document.documentElement)
             newRoot = undefined;
         // if new root is what we already have - ignore
-        if (newRoot === this._root)
+        if (newRoot === this._root && this.io)
             return;
         // cache and setup io
         this._root = newRoot;
@@ -122,7 +120,7 @@ export class IntersectionObserve {
         this.addIO();
     };
     addIO() {
-        if (!window['IntersectionObserver'] || !this.elements?.length)
+        if (Build.isServer || !this.elements?.length)
             return;
         if (this.io)
             this.removeIO();
@@ -143,10 +141,9 @@ export class IntersectionObserve {
     }
     disconnectedCallback() {
         this.removeIO();
-        this.root = this._root = undefined;
     }
     render() {
-        return (h(Host, { key: '4bd6cf4cc8888421ec7879e22fc24886838bd091', class: "nano-intersection-observe" }, h("slot", { key: 'afc52867f75d9f3679470f016c49eb9c4af6f6db', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'abd4c2df3455d52b6c9df1fcec2ba6f715cca32d', class: "nano-intersection-observe" }, h("slot", { key: 'e91b2a33b11abfa42411b996a0ba2e71892ab5d1', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "nano-intersection-observe"; }
     static get encapsulation() { return "shadow"; }

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

@@ -159,8 +159,7 @@
 .onav--horizontal .onav__items {
   flex-direction: row;
 }
-.onnav--has-indicator .onav--horizontal .onav__items::before {
-  content: "";
+.onav--horizontal .onav__items::before {
   inline-size: 100%;
   block-size: var(--indicator-track-size);
   inset-block-end: 0;
@@ -186,6 +185,7 @@
 }
 .onav--vertical .onav__nav {
   max-block-size: 100%;
+  min-inline-size: 100%;
   display: flex;
 }
 .onav--vertical .onav__scroller {
@@ -220,8 +220,7 @@
   flex-direction: column;
   inline-size: fit-content;
 }
-.onnav--has-indicator .onav--vertical .onav__items::before {
-  content: "";
+.onav--vertical .onav__items::before {
   block-size: 100%;
   inline-size: var(--indicator-track-size);
   inset-inline-start: 0;

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

@@ -7,8 +7,10 @@ import { getDirectChildren, getOffset } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
 import { scrollIntoView } from "../../utils/scroll";
 /**
- * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
- * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+ * A container for content that can horizontally or vertically scroll
+ *
+ * @version 4.0.0
+ * @status stable
  *
  * @slot - Default slot to place items.
  *
@@ -325,7 +327,7 @@ export class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '95eee57fdc7f8527fbbe4b6d9fbf6f48d5764ac8', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'fb8fb3b5946a4ce7b8b144df89541012c44d9aff', part: "base", class: {
+        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: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -333,13 +335,13 @@ export class MaskedOverflow {
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
-                'onnav--hide-scrollbars': this.hideScrollbars,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '23da0af8abf895a7bb2b158965f9ef955e798e0c', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '28573455243fe42c090dbcdb569d376a7f9d5eb3', part: "scroll-button scroll-button-prev", class: {
+                '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: {
                 '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: 'b1c4626550336c2723ef68df1f4b5a3034c383d5', 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: 'c751fd48b83e957c156448841939df286dff0c37', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '059962178e1c122d95ebbcfb8b98114b0507d3df', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '6cc5fe32c97aa75700feea39cd6d77d18c968c80', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'fe8b6ee6f86a8d96a2ed8a79f2ebd292a6432e95', part: "scroll-button scroll-button-next", class: {
+                : '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: {
                 '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/menu.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, Build, } from "@stencil/core";
+import { Host, } from "@stencil/core";
 import { h, transformTag } from "../../utils/renderer";
 import { getActiveElement } from "../../utils/active-element";
 import { getDirectChildren } from "../../utils/dom";
@@ -220,8 +220,6 @@ export class Menu {
         }
     };
     handleSlotContent = () => {
-        if (!Build.isBrowser)
-            return;
         this._type = this.type || null;
         if (!this._type) {
             let linkCount, btnCount = 0;
@@ -262,11 +260,11 @@ export class Menu {
         this.handleSlotContent();
     }
     render() {
-        return (h(Host, { key: 'f3908b74fc21b630402f06fac95a75f5a6b2ff27', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '451b5fb6151135ab4cb73d9141086be43d9eaf93', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
+        return (h(Host, { key: 'f7c0e55c16e5607f25a4a75847c0defd4b860e17', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '3a19c91258abaa6b0a6333a35809172aabf4db43', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                 menu: true,
                 ['menu--' + this._type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '37f40b06d1dc66c46130468c3de79dfeeb38c29c', onSlotchange: this.handleSlotContent }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '75c213c4a744e7edd1826d88a8e391e16bdc091b', onSlotchange: this.handleSlotContent }))));
     }
     static get is() { return "nano-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/more-less/more-less.js

@@ -4,7 +4,10 @@
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
- * A simple component to show more or less elements.
+ * Show more or less from a collection of items.
+ *
+ * @version 6.0.0
+ * @status stable
  *
  * @slot less - a button displayed when all fewer are shown. When clicked will show elements
  * @slot more - a button displayed when all items are shown. When clicked will hide elements
@@ -62,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '7f46f40188321a9cd630f92e0722c386f8f150cd', class: "nano-more-less" }, h("slot", { key: 'f0cb809863400df4431e6781c1f119563fea95b6', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'fccb42c61cbef50e41ca19ec572bceb4cb3257be', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'ec04633371ae61f4a33131ab8bfe98a7e408150f', name: "less" }, h("button", { key: 'f7382a01305934711d7f6471369aa29523f99d9d', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '49834d5d379bcc71bfd228cbad3becf4343160ac', class: "nano-more-less" }, h("slot", { key: '4cbea5f74ddd512cacfc2c65c35ce0cd9fbfee00', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'd8b9b8135f3789705f18793dd8262bcebb38f2cb', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '564f67099d59d520fbf9a5c40f6f14e681346eff', name: "less" }, h("button", { key: 'a5aa9c0a0eda6b6dda1c72288b18668d4028eec5', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

package/dist/collection/components/slides/slides.js

@@ -529,7 +529,7 @@ export class Slides {
                 "mutable": true,
                 "complexType": {
                     "original": "FlickityOptions",
-                    "resolved": "FlickityOptions",
+                    "resolved": "Options & { fullscreen?: boolean; fade?: boolean; }",
                     "references": {
                         "FlickityOptions": {
                             "location": "import",

package/dist/collection/components/sortable/sortable.js

@@ -838,7 +838,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -869,7 +869,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -900,7 +900,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -931,7 +931,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -968,7 +968,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         },
                         "HTMLElement": {
                             "location": "global",

package/dist/collection/components/sticker/sticker.js

@@ -581,9 +581,6 @@ export class Sticker {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
         // this is all horrible.... shrug
-        document.documentElement.addEventListener('nanoComponentsReady', () => {
-            setTimeout((_) => this.bootstrapGurantor(), 200);
-        });
         setTimeout((_) => {
             if (!this.hasBootstrapped)
                 this.bootstrapGurantor();
@@ -602,12 +599,12 @@ export class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'cdcb7fdadde75c5f860cbc5d93ef7d6f58bc499b', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'fa8b5831edde3d5e39036681cc75a0c2c0e84ccf', class: {
+        return (h(Host, { key: '684a30435688dd24ba583b9ad18f262b00863220', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '1a27a9545b9e00e492efc809ef10ac291f13f421', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: '8ec62a7127c1823f5e2ab35b80617ec495fa4121', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '6206fa5ac74522b69e7c5a99b4147458399f3a5d' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '323a9081a4b7aec17c6bcc0cc85558fa54fa5253', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '9fc54c6354a8de64bebbaa54881fa4b21f116ba5' })))));
     }
     static get is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -227,12 +227,13 @@ export class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '61d6bc7ce049b636466f22e2ebec084752ecfd29', class: {
+        return (h(Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '0534fae03c985ea7f1247bce7abdb5deac889feb', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '8e911ddbf727b07c8cd56dab2d56568b73a745b2', class: "nano-table__overflow" }))), h("slot", { key: '2d57257dc468275502d1c1a1d2c07e32f8cfa881' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
     }
     static get is() { return "nano-table"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["table.scss"]

package/dist/collection/components/tabs/tab-group.css

@@ -71,7 +71,7 @@
   display: none;
 }
 
-.group__tabs::part(items), .group__tabs [part~="items"] {
+.group__tabs::part(items) {
   gap: var(--tab-spacing);
 }
 
@@ -81,7 +81,7 @@
 .group--top .group__tabs {
   --fade-size: 100px;
 }
-.group--top .group__tabs::part(items), .group--top .group__tabs [part~="items"] {
+.group--top .group__tabs::part(items) {
   align-items: flex-end;
 }
 .group--top .group__tabs-border {
@@ -99,7 +99,7 @@
 .group--start {
   flex-direction: row;
 }
-:host([equal-tab-size]) .group--start .group__tabs::part(items), :host([equal-tab-size]) .group--start .group__tabs [part~="items"] {
+:host([equal-tab-size]) .group--start .group__tabs::part(items) {
   display: grid;
   grid-auto-rows: 1fr;
 }

package/dist/collection/global/script/global.js

@@ -1,33 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-export default async () => {
-    if (globalThis.window &&
-        'MutationObserver' in globalThis.window &&
-        globalThis['document']) {
-        // fire global 'ready' event when everything is hydrated
-        const docEle = document.documentElement;
-        window.addEventListener('appload', () => {
-            docEle.classList.add('hydrated');
-        });
-        const docIsReady = () => {
-            if (!docEle.classList.contains('hydrated'))
-                return false;
-            docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));
-            return true;
-        };
-        if (!docIsReady()) {
-            let mutationO = new MutationObserver((_) => {
-                if (!docIsReady())
-                    return;
-                mutationO.disconnect();
-                mutationO = null;
-            });
-            mutationO.observe(docEle, {
-                childList: false,
-                subtree: false,
-                attributes: true,
-            });
-        }
-    }
-};
+export default async () => { };

package/dist/components/cta.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 
 const ctaCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
@@ -26,17 +26,18 @@ const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLEleme
     icon;
     /** Predefined styles when displaying a number of CTAs together */
     group;
-    internalButton = false;
     componentWillLoad() {
-        this.internalButton = !this.host.querySelector('button, a');
-    }
-    render() {
-        if (!this.internalButton)
-            return;
-        return (h("button", { type: "button", class: "nano-internal-cta" }, h("slot", null)));
+        if (!this.host.querySelector('button, a')) {
+            const button = document.createElement('button');
+            button.classList.add('nano-internal-cta');
+            this.host.childNodes.forEach((node) => {
+                button.appendChild(node);
+            });
+            this.host.appendChild(button);
+        }
     }
     static get style() { return ctaCss; }
-}, [4, "nano-cta", {
+}, [0, "nano-cta", {
         "theme": [513],
         "secondary": [516],
         "size": [513],