@nanoporetech-digital/components 9.1.3 → 9.1.4

package/hydrate/index.mjs

@@ -19127,12 +19127,15 @@ class Mdd {
     componentDidLoad() {
         this.syncAccordionProp();
     }
+    render() {
+        return (hAsync(Host, { key: '52a120df3f4a2e6f6864634567ee80261d709633' }, hAsync("slot", { key: 'a3016952c44b518bd751ba04ecc8684d23f6a393' })));
+    }
     static get watchers() { return {
         "accordion": ["accordionChanged"]
     }; }
     static get style() { return mddCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 260,
         "$tagName$": "nano-mdd",
         "$members$": {
             "accordion": [516]
@@ -19601,14 +19604,14 @@ class MenuDrawer {
     disconnectedCallback() {
     }
     render() {
-        return (h(Host, { key: 'bed821db8e5a30f26c3c9bad45b01321bdf4ca77', class: {
+        return (h(Host, { key: '97332b71914156fa113b0c731df25df9f865efac', class: {
                 open: this.open,
                 'secondary-open': this.secondaryOpen,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'e80fe18a73873359fc1d86ca93a06b8c6d3173c1', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'fe83b1858bacd94f3e0540ee3933d1018f7bfb9d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'bed3b6c253cf16f8a796393be71c2c1b9aebd266', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'a8ea363c51345c83fcbf8723a32627bd99c5a9cf', class: "head" }, h("button", { key: 'fa9765354704685582e64771ded73c30c88e0374', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '0489c46c0c76a72720daf6656e26c2946433bccc', name: "light/arrow-right-to-line" }), h("span", { key: '81b00aaf09a528d6137351df20e23149a5325bf0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7' }), this.slotCtrl.has('foot') && (h("div", { key: 'dbb8345173ee78b9685cc46c6dcde5c2d617a868', class: "foot" }, h("slot", { key: '93bfeb1493a1d5e9a420803a09e64dced877591b', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'dca06c232b7ea14a297e0dcb76af9aa1e4a8495d', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'cb7c8552ef987f62da0736843b1c3e831db67f24', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '4693b1febfbb2c0bd151a6eb92601c9d187ad8d3', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '08d0b661514899115b4e95e2e7f5e4b8c9b4b845', class: "head" }, h("button", { key: '614da037d05c06f21776cfa3bb3f83d4a4faf207', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: 'd2f6562f2e0fc7fb548dec8ea8db15fbaf4f6775', name: "light/arrow-right-to-line" }), h("span", { key: 'd9dbe44c1d25920f482e7729fb29ccebef3fc6d0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '789d41eef9551811c368692c20b6aefef60c0fa0' }), this.slotCtrl.has('foot') && (h("div", { key: '43ae2bbf32447b820a96e990812e6e0542a31f78', class: "foot" }, h("slot", { key: '6cff47313f5465c38f8272638bae793648238c26', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -23978,7 +23981,7 @@ class NanoStepAccordion {
         }
     }
     render() {
-        return (h("nano-accordion", { key: '1a977444388da596ff3fbf0559ac77a274efce11', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
+        return (h("nano-accordion", { key: 'dd04f4a4e9a0d3892342cb5fd0ca4ded7fa393cc', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
                 step: true,
                 'step--active': index === this.activeStep,
                 'step--complete': step.complete,
@@ -24107,10 +24110,10 @@ class NanoStepBreadcrumb {
     };
     render() {
         const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
-        return (h(Host, { key: 'c36aea91ff263fe145d0eebfe5ba34c3fb33c948' }, h(Wrapper, { key: '5399b604512fdc7254f01702b5f58fd1ab5725be', class: "step-wrapper" }, h("ul", { key: '42f2f8adddd37661873ed4b16559b558a4525af4', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'ab41697fed0c7d4282913f8492676008cee1ec63', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '73e5bba6d10f193c4e0b6b2ff43919e0b1589bcb', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '7054eb631e22d22ef7fbcb0c8320e77b288b381f', slot: "trigger", class: "step-trigger" }, h("div", { key: '8f0816402f31637a1402d1ee1e66bcd086ef6377', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+        return (h(Host, { key: '411b80e166d57b3d07b80ec28cad52fcf8a309c5' }, h(Wrapper, { key: '3c84726262a3830766f50779ee6cd3fec8da47d8', class: "step-wrapper" }, h("ul", { key: 'b62449d73c812731bb4ab0d53992fec1f18448ed', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'ef7a477f27f8c10efa6ad5309386a1c6bf0e38bb', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: 'b36fa485a490b0a6425c84ff8cdca9b12ceb1e2c', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '122a3616e538164c52feaf095e3227f1b5cbd7e5', slot: "trigger", class: "step-trigger" }, h("div", { key: '097c1fd6f3588d28b869b82d9f63de996d7c20dc', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                 '--value': '' + (this.activeStep + 1),
                 '--max': '' + this.steps.length,
-            } }, h("span", { key: '1ab7e9e69dc52d2761b2c1a2c7bdb19cc0cdad0f', class: "step-progress-text" }, h("strong", { key: 'e760c2e668e5930694a873448154e3f23bf03018' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: '0afdddcdfa767f2d250986360c5ce52a37adc868', class: "step-trigger-text" }, h("div", { key: '1c200ddd5ca41a6c003c4b4bfa6c6e188a8641ac', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: 'c600fd068470ea8ae187c74dc9616e8efb057c9e', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '053727621ffd9a19c39b9be0766c904391ede136', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '7a578be0c13a7e4edeb40500e30e58d47c917b8e' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
+            } }, h("span", { key: '3d90bccdae92dbecccf93f36b4325e6184d55bcc', class: "step-progress-text" }, h("strong", { key: '941be73db7a09546c823175ccf01519f3daf7d73' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: '52619f7a88712ace9b82e4a112784af57fc87ec1', class: "step-trigger-text" }, h("div", { key: 'f3fb2049434f2435836ee276fe0ac56d398a04b7', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '382916108875640ef59479bf259fe26662596720', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '18503355440a76daaa97abcbc1b5f53d783ac86d', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '91032f5d664af203643a27b62ff0d0749b467029' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
                 'step-item-mobile': true,
                 'step-item-mobile step-item--active': index === this.activeStep,
                 'step-item-mobile step-item--complete': step.complete,
@@ -24202,12 +24205,12 @@ class NanoTab {
     };
     render() {
         const Tag = this.href ? 'a' : 'div';
-        return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '3649794a7283da61c9659f2c639d00862a2116d1', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: '4a1cff12dce6edb0a13b1a1d997a8534132e617a', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            }, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            }, href: this.href, target: this.target }, h("slot", { key: 'f3b43c6b87ce86c945671b18598ed8844ec8e855', name: "start" }), h("div", { key: 'c9b508f82c5818b625e24b14ce1d9b61e47fd208', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '6c02486bf2f3640fd56fc188d0fdf2091f3da23c' })), h("slot", { key: 'bd9695255a1032294c9ff2f500e01aac2ba2b3e3', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '0f458dcada1ee1d05f4bbce6c24352d01ff1a68d', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
     static get cmpMeta() { return {
@@ -24255,10 +24258,10 @@ class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'd6b4670c20b4ba1434561d9ca12fa31da1a0e20d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '0a81893905932bca2ba694d0ecb27f28369f7606', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: 'c7c7a56f8942451a8a9beca4b9126c5f6533f9e3', part: "base", class: "nano-tab-content" }, h("slot", { key: '662b14c342f751f9d7a4bcbfecb82ae8207ee219' }))));
+            } }, h("div", { key: '74093ccac8983cba93c5bff5f06da2ab4ade4eed', part: "base", class: "nano-tab-content" }, h("slot", { key: '9c0922b3463cec891cf542ebf2232c9f4870845d' }))));
     }
     static get style() { return tabContentCss; }
     static get cmpMeta() { return {
@@ -24824,10 +24827,10 @@ class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'fa8f3bb2dfffee9a213d372282b5902ed56c5a2b', class: {
+        return (h(Host, { key: 'ebbfd8421e422255664184552b1f0eda8072fd89', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: 'da0d773c42fb2c1b9f694fa4b2c307c2c070d67d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83f36ec8ff79fa21fb1ae03f1746ccc544ffa7f3', class: "nano-table__overflow" }))), h("slot", { key: '57821514111245364971a5f85c6ff95309590eb3' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '89df303f6187fed245e1883420c913e765a625fc', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'e9c9da86bd1ff153587dbcc56dd79d661dcb0cbc', class: "nano-table__overflow" }))), h("slot", { key: 'ce06e9466b6700c9c3c489d5751a28da1af5952f' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -25941,8 +25944,8 @@ let Rating$1 = class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'e8c428a7adfceaa5a7e427ec824341e8b6867d7a', class: "nano-more-less" }, h("slot", { key: '1f77ecd99f6d9dc2717a25066bc5baa332781096', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '63e70b0dd2b343ad2e887186063526d3f3f3c7fd', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '926db7914efeac71f6e3fbfe7df53e61ca5dfad4', name: "less" }, h("button", { key: '5a693e3684cae91a70e8dc6714542ea2b5cc73e6', 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, ")")))) : (''),
         ]));
     }
@@ -26163,20 +26166,20 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: '3011ba88cafed0ec3c79d823a3abac433f68b5d1', class: "nano-rating" }, h("label", { key: 'ea6a01bc5a7f8e7fecbb16a905c472b5e1c62328', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '22e31eeaed0aca337a71c1bbb39c238413f1c00c', name: "label" }, this.label)), h("input", { key: '265bd0055cbd05911611e0a5e45828d4dab7ac8c', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (h(Host, { key: 'ca9f8614ee480fe918ea02b0d76e86ee46011ccd', class: "nano-rating" }, h("label", { key: '15115ed7a3fb89a94ad83fd21585f217765d5a62', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '74a550e0f50a541c1d202a170d51c26ba20ead68', name: "label" }, this.label)), h("input", { key: 'f9dc6fe605ef4d9c8f8720892a94eec1769cb04d', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), h("div", { key: '4c0af619c68c230a5994871efdf5608870fb83e0', class: "rating-wrap" }, h("div", { key: 'e6f94c258bc04b6a4a6aad66c9364c1c811f859a', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: 'bf0b7849d8bed8732b172a12a45d287e1827f9a7', class: "rating-wrap" }, h("div", { key: '392f8d2c6cb93c7d0765371875ad2aa273d20874', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd514ae0f85be4d59ab6a2ae4496357c5d6601ba9', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '6a18e58e85a13da490e931002f633bbd9a2c0279', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '0caf2f0561d3b74e6891e6c2a4b970fef53298f3', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'b7ee9e2ba25a05d701728e5280c00759a5c967d7', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
@@ -26448,13 +26451,13 @@ class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: 'a2c57218f65a9af2297e6662c29d3a7c853092df', class: {
+        return (h(Host, { key: '5c2c1a5a1187493cb89fe5c581d5b4b1250f5009', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, h("slot", { key: 'cf0faa31f7c1daa08238555a46699c1b731e13b8' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: '24c3b65283fe59e533b68618188a4ff2dedb1b91' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
@@ -27185,30 +27188,30 @@ class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'a2c56f43fef750f8e336a1612644761293b19bd4', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'e16c3ad617a9efd302fccd9f3f66a989e8bfb2d0', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: '632d901cdff60d36ae1a410f6c252c671eac8e63', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '3b6f2796221b941871b5e42e3345cc668b1792a9', ...wrapOptions, class: {
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
                 'has-helper': this.hasHelperSlot,
                 'is-open': this.hasOpened,
                 masked: this.mask,
-            } }, h(FormControl, { key: '387a55518ed1c74ea944008c750a0ca42a6bbbe8', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '660b70b098520471d4f7653af5cc50388625cd1c', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '44f53317d26f2f8b85b5c8b397ccfd68a26eebb5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: '04f3935c7f759e3767f32faecb9e6ef81a36c777', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'aae86b85c3bd2c2c562468f2a33e52c7036ad69b', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, h(FormControl, { key: 'f15f55785786c1831ea1983a76ac44e3107b12c6', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '33bbe0bf20b03138fbe5edc597dcae69d2c3c2f8', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'ce7ad6a1d92ac5ee1fe890f4d406c38d9e6c3e7b', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '71dbac3723511da106d0ec4c2c1dca15861fb942', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'eedb7c8d2e72177ca794ca2c87c9272c1b0747fc', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
             // @ts-expect-error - this bubbles from the nano-dropdown
             onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: 'cf744eb6bbad3ce2d8d05354d5edaf3eab07a207', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '990e00208c403d92d1586fb0b2c4618768f5fda5', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '54fce41f95c01e0b2ff1619209ebb15a28383677' }))), h("select", { key: '1c5ff40ac84be25c6b7075ef031b29f2b6f9b007', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: '1042e4403ae2e187f19d179cb9abf1641e381e53', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '2c3fcf73eb8d5a7a7894567a7069d3a87deaf82e', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '9b2ae27ac6a6c04207495d378c1b4493be38817a' }))), h("select", { key: '13a280aa59b88260a4677d2387c69dff8283610f', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
@@ -27351,7 +27354,7 @@ let Slide$2 = class Slide {
         });
     }
     render() {
-        return (h(Host, { key: '3de94ff45cb6dddcca7f0097f3376361c2666f7e', class: "nano-slide" }, h("slot", { key: '9998d9102bdc69eecd28752b4a2c130497b34d06' })));
+        return (h(Host, { key: '4682e74f51d787ef7e2a5481b39f8c8e3a87fa1e', class: "nano-slide" }, h("slot", { key: '12d3315aeabf35aaf0c86c7239c0ef1cf19b60b5' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -30350,15 +30353,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '51c5bac1a4200ebf02c679237e39b6f62f37424e', class: "nano-slides" }, h("div", { key: '94633663fd3ad69b4c1bc98c4749c048f57617cf', class: {
+        return (h(Host, { key: '42548f40ddb58bd17ba72b0f4d8eae4e80830896', class: "nano-slides" }, h("div", { key: 'd8f2236b6bca970b42b3d1d8f9ab0a6b109d36a1', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '056922cbc6ff858bc237a9ec45ebbb281f4b4002', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '8fbdcaad01037ae236438aedb5a50fcc00f44830', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: '064767dbec8679ae75f783629737454832821ad4', onSlotchange: () => this.update() })), h("div", { key: '2628c6d3411307f5f42a04986e77839cc9f4a5cd', class: "ui-extras" }, h("slot", { key: '7d1df51cbe0f20db37e266779ea7e63b4b136070', name: "ui" })), this.pageCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '96023f86df7c1cfb7250f9b348a71f7f5b66b7f8', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: 'bcf85a09b3210ba78ff19592b991fe3873ce2b75', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: 'c4d0bcf5fb2b963dd36481dbbd2e229d44ac02e4', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '004f8f5b4513e55240d9703e641c5e59184c3af1', name: "previous-icon" })))), this.pager && (h("div", { key: 'd8ae45a8b450e5870a566cf986460a649a887df9', class: "flickity-page-dots" }, Array.from({ length: this.pageCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: 'daf0eb9a2fda8304dad8575205bcd03db6974212', onSlotchange: () => this.update() })), h("div", { key: 'd319f84ee4c616c591133613b304df11b171975c', class: "ui-extras" }, h("slot", { key: 'c3bcea25c38aa569a78b51f415f29b520f9b3f86', name: "ui" })), this.pageCount > 1 && (this.pager || this.navbtns) && (h("div", { key: 'e6fa9bba0a67ec190cb8461a21d32ca74d3a0b88', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: '3539c40d3505d629ed8ff83a56abaa990dc46857', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: 'ca7f5d2b8dc29e5c0fee0e7d74ac26be8dcd74f6', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '3eab4f9542746d4bc1bdd5f69aa2ff89beafba00', name: "previous-icon" })))), this.pager && (h("div", { key: '762f7a3601918ebd6cb8a2bf8bbf4f3ee359f8bc', class: "flickity-page-dots" }, Array.from({ length: this.pageCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),
@@ -30367,8 +30370,8 @@ class Slides {
                 if (this.isActive(index))
                     return;
                 this.slideTo(index);
-            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '65592f3e81fadad36aa20be8738b9fd94d4d9ca5', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
-                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: '0a0cca0e3e66648009861c3dd2474a0882c3c5bb', class: "button-icon", part: "navigation-icon" }, h("slot", { key: '2b709b10a39ca707ec622983e83e4ba79e9989ee', name: "next-icon" })))))))));
+            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '4a9bcddd7133c0a150e2e046e82bf76a97534926', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
+                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: 'de509817e85cff853beba46b0ae5d19e14b8f81d', class: "button-icon", part: "navigation-icon" }, h("slot", { key: '89ffb6c06f1b03feb2065808222c14be70b66949', name: "next-icon" })))))))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -31127,7 +31130,7 @@ class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: '845be657a2bbfb42718ee9e8d4672ff31756fcc3', class: "nano-sortable" }, h("div", { key: '9c603a11407cb62ffe50bb6cfd89b47994df21e9', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '36a5e7111ed26a7714206c449ffc7be1a46337d1' })));
+        return (h(Host, { key: '92da39ca4300baebfafa0dbbde2b969a94c153a1', class: "nano-sortable" }, h("div", { key: 'f36ee8930fe09db42e4eb3d23bc9c9a41cee78c3', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'b5aadf78950111c71866655c087fd188ff310414' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -32126,12 +32129,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: '9760c52934c0b3d6459598dfa3a197927cf7e878', 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: 'abbbd0a9b785792f00a75d411fbc3b882f605032', class: {
+        return (h(Host, { key: '60adae6e59e66c467f2bc893bfce5fec6f9840b3', 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: 'd07aa4d91346877330985751dc07e77ade6641f1', 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: 'de9552b69657aad9f2015dfa1470a197d490520c', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'baafb74a16688cd9e1839eb617ceb46fb7e2b23f' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '2e9e03afcef0357ada094e4518c9bfd84947e676', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '21c51e2ea322f7d39528633072d93cfe8ebb94de' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -32420,10 +32423,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '79951f5782653b519fabd8345c2ec0af5cf86f2d', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '6698cb226357c92807393c1fe2f73991c13ead07', onSlotchange: this.handleSlotChange }), h("div", { key: 'dbb8bda886e15850c17c06dca8d9f8924cb62486', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '9b1f5692d592331470c0159229aab8fbcb091b21', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '085c79dbd9df2889a6aa7d88c41646e5a5a99fa9', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '8936b4cbb36ae5d085ca6531730b3ca698896186', onSlotchange: this.handleSlotChange }), h("div", { key: 'b0cbe2bd129018ae3694fec63d2e5699ad4bd7ff', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'a3bacf2ca0ca83af15cebfe3ce45132c66bfe348', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1e6f35227072b696e2cea3cbf93eea26285b20cf', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: 'dab2de407dae223b4ac229283d9dedb8a69e4919', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '70b83683ad7457bd801b1853683047da757305cc', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '2e61880754b5165c17f6ce93a8b1a62266109c09', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "9.1.3",
+  "version": "9.1.4",
   "sideEffects": false,
   "description": "A collection of Oxford Nanopore corporate / digital webcomponents",
   "type": "module",
@@ -56,7 +56,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "9.1.3"
+    "@nanoporetech-digital/style": "9.1.4"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

package/dist/nano-components/lazyload-ClpqVun1.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{F as t,u as i}from"./nano-slides-WDFCFgZL.js";import"./index-RXFO3HxS.js";import"./renderer-B_wACs4w.js";t.createMethods.push("_createLazyload");const s=t.prototype;function a(t,i){this.img=t,this.flickity=i,this.load()}s._createLazyload=function(){this.on("select",this.lazyLoad)},s.lazyLoad=function(){const t=this.options.lazyLoad;if(!t)return;const s=this.getAdjacentCellElements("number"==typeof t?t:0);let l=[];s.forEach((function(t){const s=function(t){if("IMG"==t.nodeName){const i=t.getAttribute("data-flickity-lazyload"),s=t.getAttribute("data-flickity-lazyload-src"),a=t.getAttribute("data-flickity-lazyload-srcset");if(i||s||a)return[t]}const s=t.querySelectorAll("img[data-flickity-lazyload], img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]");return i.makeArray(s)}(t);l=l.concat(s)})),l.forEach((function(t){new a(t,this)}),this)},a.prototype.handleEvent=i.handleEvent,a.prototype.load=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this);const t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src"),i=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t,i&&this.img.setAttribute("srcset",i),this.img.removeAttribute("data-flickity-lazyload"),this.img.removeAttribute("data-flickity-lazyload-src"),this.img.removeAttribute("data-flickity-lazyload-srcset")},a.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")},a.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")},a.prototype.complete=function(t,i){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this);const s=this.flickity.getParentCell(this.img),a=s&&s.element;this.flickity.cellSizeChange(a),this.img.classList.add(i),this.flickity.dispatchEvent("lazyLoad",t,a)},t.LazyLoader=a;