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

package/dist/cjs/nano-table.cjs.entry.js

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-B76C6Tm9.js');
+var index = require('./index-IR1lkhwT.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-Z8wHFL4e.js');
+var renderer = require('./renderer-h0yo23iy.js');
 
-const tableCss = ":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}}";
+const tableCss = ".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
 const NanoTable = class {
     get host() { return index.getElement(this); }
@@ -224,10 +224,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: '61d6bc7ce049b636466f22e2ebec084752ecfd29', class: {
+        return (renderer.h(index.Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '0534fae03c985ea7f1247bce7abdb5deac889feb', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '8e911ddbf727b07c8cd56dab2d56568b73a745b2', class: "nano-table__overflow" }))), renderer.h("slot", { key: '2d57257dc468275502d1c1a1d2c07e32f8cfa881' })));
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), renderer.h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/cjs/{page-dots-E6b7S4vs.js → page-dots-DHz-mQDL.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-Cj4figHV.js');
-require('./index-B76C6Tm9.js');
-require('./renderer-Z8wHFL4e.js');
+var nanoSlides_entry = require('./nano-slides-B3-XISfn.js');
+require('./index-IR1lkhwT.js');
+require('./renderer-h0yo23iy.js');
 
 // -------------------------- PageDots -------------------------- //
 function PageDots(parent) {

package/dist/cjs/{renderer-Z8wHFL4e.js → renderer-h0yo23iy.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B76C6Tm9.js');
+var index = require('./index-IR1lkhwT.js');
 
 /* eslint-disable @typescript-eslint/no-namespace */
 // css only components cannot be transformed because their static css relies on the tag name

package/dist/cjs/{scroll-DspYj7mY.js → scroll-_aiH0KkA.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dom = require('./dom-CvQQBdol.js');
+var dom = require('./dom-3kyE_RMm.js');
 
 /**
  * @returns the width of the document's scrollbar

package/dist/cjs/{slot-B4QUWT-c.js → slot-Hlplqf1Z.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B76C6Tm9.js');
+var index = require('./index-IR1lkhwT.js');
 
 /**
  * Given an element (which can either be within a shadowRoot or not) find it's innerText

package/dist/cjs/{tabbable-YPytg5sg.js → tabbable-CkzmpQhq.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-B76C6Tm9.js');
+require('./index-IR1lkhwT.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-bFxUCos7.js → table.worker-NnDnfSFs.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-BNwDI1rg.js');
-require('./index-B76C6Tm9.js');
-require('./renderer-Z8wHFL4e.js');
+var nanoDataTable_entry = require('./nano-data-table-BkyqQiTG.js');
+require('./index-IR1lkhwT.js');
+require('./renderer-h0yo23iy.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-DspYj7mY.js');
-require('./dom-CvQQBdol.js');
-require('./index-ChTXweZN.js');
+require('./scroll-_aiH0KkA.js');
+require('./dom-3kyE_RMm.js');
+require('./index-yq5hsIxW.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/collection-manifest.json

@@ -67,7 +67,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1750418634.dcb189d",
+    "version": "4.35.1-dev.1750682262.1ce9541",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/animation/animation.js

@@ -8,6 +8,9 @@ import { animations, easings } from "./animations";
  * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
  * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
  *
+ * @version 6.0.0
+ * @status stable
+ *
  * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.
  */
 export class NanoAnimation {
@@ -161,7 +164,7 @@ export class NanoAnimation {
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: 'c5bd8b75985fd99981340c3cd20c74f99ac8dd3c', class: "nano-animation" }, h("slot", { key: '989677365d344809aa575626b3253ab888822171', ref: (slot) => {
+        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }

package/dist/collection/components/checkbox/checkbox.js

@@ -21,7 +21,7 @@ export class Checkbox {
     }
     set slotWrapper(value) {
         this._slotWrapper = value;
-        this.hasLabel = !!value.querySelectorAll('*').length || !!this.label;
+        this.hasLabel = !!value?.querySelectorAll('*').length || !!this.label;
     }
     host;
     inputType = 'checkbox';
@@ -229,7 +229,7 @@ export class Checkbox {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: 'ca41f256a304b8ec19dba81fbe0dcd30eefd63fe' }, h("label", { key: '31254b867b036d7703939e7b19f4f483f00af844', class: {
+        return (h(Host, { key: 'd1c462c6850bad6dd37696c1edc61d1413613908' }, h("label", { key: 'e45bce2bffd58378e79606d848b8dc4b2a023fb2', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
@@ -237,11 +237,11 @@ export class Checkbox {
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
                 ['nanocb__' + this.type]: true,
-            }, htmlFor: this.inputId }, h("input", { key: 'd46202d25ee15a0274766d845510608ed5af88f4', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0f3c9134ab08ce653a58d71d681495349536e211', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'e4315662f387dc17f3406f22931535061756cca6', id: labelId, class: {
+            }, htmlFor: this.inputId }, h("input", { key: '732c982c1613eed2075857fff33a869378ce2356', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '7299bc0cca8ea4230d4317ad1a5e9ec5c72fd58d', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'daa0fd8b2b63796e96ea40e843390ca62c41c968', id: labelId, class: {
                 nanocb__label: true,
                 [`nanocb__label--${this.type}`]: true,
                 'nanocb__label--hidden': this.hideLabel,
-            } }, this.label && !!this.label.length && h("span", { key: '05716b3189e0a489c530c2539944eaaae74e0e08' }, this.label), h("span", { key: '026a9bbb2f50332d184a29a03a58e6cb287d7f8c', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: '62b0ab184d32167780d52aa90dddcdc25977548c' })))))));
+            } }, this.label && !!this.label.length && h("span", { key: 'cdcdf9528ee8f39f22ddd9f61c490d4c02f910e4' }, this.label), h("span", { key: '021ecfc889a1bc89df711343cad337d847d93191', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: 'da6bb8cfd800f4f423aaa7be538b1e33af73f5bc' })))))));
     }
     static get is() { return "nano-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/cta/cta.js

@@ -1,7 +1,3 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { h } from "@stencil/core";
 /**
  * CTAs (Call To Actions) invite the user to take action.
  * They are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.
@@ -27,14 +23,15 @@ export class NanoCta {
     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 is() { return "nano-cta"; }
     static get originalStyleUrls() {

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.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/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/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/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/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],

package/dist/components/form-control.js

@@ -35,7 +35,7 @@ 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 }) : '',

package/dist/components/masked-overflow.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const maskedOverflowCss = ":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}}:host{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onnav--has-indicator .onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onnav--has-indicator .onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+const maskedOverflowCss = ":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}}:host{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;min-inline-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
 
 const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow extends HTMLElement {
     // public surface
@@ -320,7 +320,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
         }
     }
     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,
@@ -328,13 +328,13 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
                 '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/components/nano-animation.js

@@ -1212,7 +1212,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: 'c5bd8b75985fd99981340c3cd20c74f99ac8dd3c', class: "nano-animation" }, h("slot", { key: '989677365d344809aa575626b3253ab888822171', ref: (slot) => {
+        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }