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

package/hydrate/index.js

@@ -8728,58 +8728,6 @@ class CheckboxGroup {
 }
 let grpIds = 0;
 
-let cachedCSStylesheet;
-/**
- * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
- * This is useful when shadow DOM enabled components:
- * - use css-only components
- * - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
- *
- * @param shadowRoot - The shadow root to add the stylesheet to
- */
-function addGlobalStylesheetToShadow(shadowRoot) {
-    if (!shadowRoot)
-        return;
-    if (cachedCSStylesheet) {
-        // we've already constructed the stylesheet
-        shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
-        return;
-    }
-    const globalStylesheets = document.styleSheets;
-    let stylesheet = null;
-    let rule = null;
-    let globalStylesheet = [];
-    for (stylesheet of globalStylesheets) {
-        if (!(stylesheet instanceof CSSStyleSheet))
-            continue;
-        for (rule of stylesheet.cssRules) {
-            // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
-            // this is a bit fragile but does the job
-            if (rule instanceof CSSLayerBlockRule &&
-                rule.cssText.indexOf('.nano-toast-stack') > -1) {
-                globalStylesheet.push(stylesheet);
-            }
-            if (rule instanceof CSSLayerBlockRule &&
-                rule.cssText.indexOf('.nano-theme') > -1) {
-                globalStylesheet.push(stylesheet);
-            }
-        }
-    }
-    if (globalStylesheet.length) {
-        // if we found the global stylesheet, add it to the shadow root
-        const sheet = new CSSStyleSheet();
-        for (const globalSheet of globalStylesheet) {
-            for (const rule of globalSheet.cssRules) {
-                sheet.insertRule(rule.cssText);
-            }
-        }
-        cachedCSStylesheet = sheet;
-        shadowRoot.adoptedStyleSheets.push(sheet);
-        return;
-    }
-    console.warn('No global stylesheet found');
-}
-
 const collapsibleComparisonCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).\n  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).\n  * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n  */\n}\n:host .collapsible-comparison {\n  background-color: var(--color-bg);\n  color: var(--nano-color-neutral-1400);\n  padding: var(--outer-spacing) 0;\n  container-type: inline-size;\n}\n:host .header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n  display: none;\n}\n@container (max-width: 400px) {\n  :host nano-cta {\n    display: none;\n  }\n  :host nano-icon-button {\n    --color: var(--nano-color-primary-1100);\n    display: block;\n    margin-inline-start: auto;\n    font-size: var(--nano-font-size-xl);\n    transition: 0.3s ease transform;\n  }\n  :host nano-icon-button.open {\n    transform: rotate(180deg);\n  }\n}";
 
 /**
@@ -8826,7 +8774,6 @@ class CollapsibleComparison {
         this.open = !this.open;
     };
     componentWillLoad() {
-        addGlobalStylesheetToShadow(this.el.shadowRoot);
     }
     componentDidLoad() {
         if (this.open) {
@@ -8836,7 +8783,7 @@ class CollapsibleComparison {
         }
     }
     render() {
-        return (h(Host, { key: 'b522b71cd7f9b9e793f1d1345563ee60b2fd76ed', class: "nano-collapsible-comparison" }, h("div", { key: '7a37b4880f5791455f03fb2b0a8b6f5ac1a79a56', class: "collapsible-comparison" }, h("div", { key: '2c90c230cd3b2b3417e642a6d31eff6f6920cb04', part: "header" }, h("div", { key: '36db63362337181821a7e58cba8fb346909228e7', class: "header" }, h("slot", { key: '29b0ca97e9dea363b4b41a5df393051db364f53c', name: "heading" }), h("nano-cta", { key: '33f265d889e154b943d68c7f42eae8056d6f7386', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '07e6a40182306df742e947ecfbc35ab4f9fe353b', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '116c3b24bb71628d1a64852699d988cfad57d287', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '492b3281c61c49be475483564e9e080d0512fa56', class: "headings" }, h("slot", { key: 'bb8d6afcb544ea4c9652bf94798c517e2062a2ed', name: "comparison-headings" }))), h("div", { key: 'd68d1a90c62bfe70d0e9074e3262c176f066e992', class: "content" }, h("slot", { key: 'd30b86a902b62d56d56adc92b88f246fe019a3fe', name: "content" })))));
+        return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"]
@@ -9070,7 +9017,7 @@ class DataList {
         writeTask(() => {
             if (this.open) {
                 const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
-                this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40) + 'px');
+                this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
             }
             this.nanoDropdown.open = this.open;
             if (this.connectedInput) {
@@ -9488,18 +9435,18 @@ class DataList {
         }
     }
     render() {
-        return (h(Host, { key: 'c869f626deae72020846edf761d0d8f1b59c34e7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '8fa52dc246705c9af636b1c96ee37df8b6bd746d', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '998896a220e3cf3f010bda3354bb530ac0cc9296', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8f585edd48ec29a847818d1e9af8baf0bc4b4ddf', name: "list-top" }), h("slot", { key: '3bdd8c0a51d63b6fcf3a25d630212db4ba7d8a9b' }), h("slot", { key: 'a7b997daebd6a1e25f1a4a97e4354b966ceeebd6', name: "internal-opts" }), h("slot", { key: '41ebc4da7244b1e4fb532a2fbb0356ea51eb865a', name: "list-bottom" })), h("nano-menu", { key: 'd5d360f4e8d3c78780477572d385daaa4bb12c15', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '3cc55519054da79e57dc70ecc936c0e67e7e3949', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '0662bfdc4056f2111647550d9aba6a331653d2f3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -14133,7 +14080,7 @@ class FieldValidator {
     }; }
 }
 
-const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled,.sc-nano-file-upload:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus,.button--focus).sc-nano-file-upload,.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
+const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";
 
 let fileInputIds = 0;
 let getDataTransfer = () => new DataTransfer();
@@ -14150,11 +14097,14 @@ catch {
     }
 }
 /**
- * A better UI experience for `input type="file"` form controls.
+ * Enables the selection of files for upload.
  *
- *   - Drag and Drop
- *   - Validation options
- *   - Preview and manage multiple files
+ * @version 1.0.0
+ * @status stable
+ *
+ * @slot label - A label for the file input. If not provided, the `label` prop will be used.
+ * @slot helper - A helper text to display below the input.
+ * @slot - The default slot can be used to add additional content, such as instructions or a message.
  */
 class FileUpload {
     constructor(hostRef) {
@@ -14198,12 +14148,18 @@ class FileUpload {
     capture;
     /** The maximum file size allowed per file (Megabytes) */
     maxFileSize = 1;
-    /** The maximum file size allowed per file (bytes).  */
+    /** The maximum number of files that can be selected. Defaults to 1 */
     maxFiles = 1;
+    _label = '';
     /** String to place within a label element. */
-    label;
+    get label() {
+        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+    }
+    set label(value) {
+        this._label = value;
+    }
     /** Placeholder only used within single file uploads. */
-    placeholder = 'Choose a file...';
+    placeholder = 'Choose a file';
     /** Visually hide the label - but make it accessible. */
     hideLabel = false;
     /** If `true`, the user must select a file to upload before submitting a form. */
@@ -14212,11 +14168,11 @@ class FileUpload {
     disabled = false;
     /** If `true`, a clear icon will appear in the input when there is a value.
      * Clicking it clears the input. Only used within single file uploads. */
-    clearInput = false;
+    clearable = false;
     /** Whether to show validation errors underneath input */
     showInlineError = true;
     /** When should the field perform validation */
-    validateOn = 'submit';
+    validateOn = 'submitThenDirty';
     /** The form element to associate with this input (its form owner). Must be the id of a form. */
     form;
     shouldValidate() {
@@ -14228,7 +14184,7 @@ class FileUpload {
                 this.showInlineValidation();
         });
     }
-    _invalid = false;
+    _invalid = null;
     /** This will be true when the control is in an invalid state.
      * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
     get invalid() {
@@ -14308,7 +14264,6 @@ class FileUpload {
     async showError(message) {
         if (this.inputEl) {
             this.inputEl.setCustomValidity(message);
-            this.validate();
             this.showInlineValidation();
         }
     }
@@ -14360,7 +14315,7 @@ class FileUpload {
     checkFileType(type) {
         if (!this.accept)
             return true;
-        return this.accept.match(type) && this.accept.match(type).length > 0;
+        return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
     }
     validate = () => {
         this.errorMessage = '';
@@ -14370,24 +14325,36 @@ class FileUpload {
             error = this.inputEl.validationMessage;
         }
         else {
-            this.fileList.forEach((fileItem) => {
-                error = null;
-                if (!this.checkFileSize(fileItem.file.size)) {
-                    error =
-                        'Maximum file size exceeded. Max file size is ' +
-                            this.maxFileSize +
-                            'Mb';
-                }
-                else if (!this.checkFileType(fileItem.file.type))
-                    error = `File type is not allowed (${this.accept})`;
-                fileItem.validationMessage = error;
-                fileItem.valid = !error;
-            });
-            if (this.fileList.length > this.maxFiles)
-                error = `Maxinum number of files exceeded (${this.maxFiles})`;
+            if (this.fileList.length > this.maxFiles) {
+                error = `Maximum number of files exceeded (${this.maxFiles})`;
+            }
+            else {
+                this.fileList.forEach((fileItem) => {
+                    let listeItemError = null;
+                    if (!this.checkFileSize(fileItem.file.size)) {
+                        listeItemError =
+                            'Maximum file size exceeded. Max file size is ' +
+                                this.maxFileSize +
+                                'Mb';
+                    }
+                    else if (!this.checkFileType(fileItem.file.type)) {
+                        listeItemError = `File type is not allowed (${this.accept})`;
+                    }
+                    fileItem.validationMessage = listeItemError;
+                    fileItem.valid = !listeItemError;
+                    if (listeItemError) {
+                        error = listeItemError;
+                    }
+                });
+            }
         }
-        if (error)
+        if (error) {
             this.inputEl.setCustomValidity(error);
+        }
+        else {
+            this.inputEl.setCustomValidity('');
+            this.errorMessage = '';
+        }
     };
     showInlineValidation(ev) {
         if (this.validateOn === 'submitThenDirty')
@@ -14503,9 +14470,10 @@ class FileUpload {
             h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
                     this.onDrop(e);
                     this.onDragStop(e);
-                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("div", { class: `file-upload__btn-content` }, h("nano-icon", { name: "regular/cloud-arrow-up" }), h("span", null, this.fileList.length
+                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
                 ? this.fileList[0].file.name
-                : this.placeholder), !!this.value && this.clearInput && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" })))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
+                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
+                (this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (this.canChangeFileList) {
                         this.publicInputEl = input;
                         return;
@@ -14532,11 +14500,12 @@ class FileUpload {
         ];
     };
     render() {
-        return (h(Host, { key: '2bd95bf5d3c725d84679a373eac2f87b491ae2bd', class: "nano-file-upload" }, h("div", { key: '026b77c3165ea04d5ed9a2f8536fd5089ed3ee8e', class: {
+        return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,
-                'file-upload--invalid': this._invalid,
+                'file-upload--invalid': this._invalid === true,
+                'file-upload--valid': this._invalid === false,
             } }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
     }
     static get watchers() { return {
@@ -14558,16 +14527,16 @@ class FileUpload {
             "capture": [1],
             "maxFileSize": [2, "max-file-size"],
             "maxFiles": [2, "max-files"],
-            "label": [1],
+            "label": [6145],
             "placeholder": [1],
             "hideLabel": [4, "hide-label"],
             "required": [4],
             "disabled": [516],
-            "clearInput": [4, "clear-input"],
+            "clearable": [4],
             "showInlineError": [516, "show-inline-error"],
             "validateOn": [1025, "validate-on"],
             "form": [1],
-            "invalid": [2564],
+            "invalid": [2568],
             "validityMessage": [2049, "validity-message"],
             "files": [6160],
             "value": [6145],
@@ -15063,7 +15032,6 @@ class GlobalNav {
         this.handleMyAccountUrl();
         this.initSearch();
         this.processUserData();
-        addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
     componentDidRender() {
         this.handleResize();
@@ -15119,20 +15087,20 @@ class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '184e0e7a9468ebb9d60cfac752d955358a4fe0fe', class: {
+        return (h(Host, { key: '66132ed8841605602bff8c2c750a657ec4d6d83a', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '8eaa12e98b9a38721b9f03e2d646d20add74b3e6', class: {
+            } }, h("div", { key: 'c8dfcf4b405c72a14f576fb7b14ce41e8ff49b83', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, 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
+            } }, h("nano-drawer", { key: '741e6dc6df0253450f65e792f45fe2a337bb007d', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'b8d197424ed2d4dff32234457b7836507d9777ba', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '36ef3c9a323078bfbf4f28682afd4b33475c6d1d', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', 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,
+            : '', h("slot", { key: '569277672e49d95702583537c90db8de51d89a35', name: "overflow" }))), h("div", { key: '367e4bfffe6a8359bf49e6a4ea7a69dfdd20e6af', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aca6cb95a4b03c46509cfd6d0a55e722976200e9', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8c56fcfde4d896b30a277a00f79de3dfb75d93ef', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'fb8ca915d6460ee871a0a357b8a25d2e720620ac', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '96962d7ccd0d55f5c054dae0e8480398e7ea1415', name: "logo" }, h("a", { key: 'dcfa5d446ef38afb07285172dd5c0269da604d44', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (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: '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) => {
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'c4e2a7166c5766eede74e6f9e5763e157c47ac74', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e6bb457db190019f21c1c712bb8c9bab5abec91b', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: 'd46c596a07189f129a1644118560590e70101a2b', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '00df8fe73a5c1e5b0e3263ee584549c1b450675f', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'b03a0c3f58a7a50939ec09258dda85a49157cf48', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '367ed61df9546497f9cef04d833e86f59389f48a', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'd8013a6f1cd8953bc63ba6f518367a4b278197bd', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
                 this.handleSearchTermChangeEvent(e.detail.value);
-            }, 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 && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'fe62a269a2f3ca318ad1e071404f693c9540317b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '87d39b1dc2be07a66b546ba53eea56351bb103ec', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'fade49b478eddeb181f332b8db31b0f88c98305f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e7c946dc5ec1ee76d115fd2575b1288f95d71c43' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
             this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
                     searchInsight.sendClick({
                         index: this.activeIndex.index,
@@ -15142,10 +15110,10 @@ class GlobalNav {
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            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
+            h("nano-option", { key: '74852e060130852064b4987f1de0c8f0fa2a395e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: 'e66b10d8ce1de533d772bfd66bf7c73511f338ff', class: "gn__cart" }, h("nano-icon-button", { key: '47b8fc7ad91f5ea1048a670407ad602d29eb347f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '75c8ffb6264bd4a390ad77d15c408105d6f77393', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? 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: 'f52e45cccc15b745f54978bc140816847dc66560', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '0dd16b2bb789a66f3ef5b214ea54609aedad3ae4', part: "site-search-results" }, h("slot", { key: '3a86b5ee10f5da29d3da8d06b2b6ad36f27e725c' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '798ee16df74983e3d5689639f3320198bd1fe14d', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: 'a51edbf9c6bc9b0e34e207e21b4341704032e82f', part: "site-search-results" }, h("slot", { key: '4ae65a7bc4d8897d95e43692b87830cf9f9d8a8f' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -16809,16 +16777,16 @@ class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("nano-skeleton", { key: 'a8872721a38b11951ca6950d567193ba16e1d348', class: "img__loader" }), !!this.background && (h("div", { key: 'd9c1fd739f4a4914a0cfe8c1eb8ef50832ecc35c', class: {
+        return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("div", { key: '7b3a0b8521888092effb1fc675b0c52bce7faa6f', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '1f4d59fc6ff3e0be42f18d1db4a099a32d099872', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: '750330595e7dc0e2127d8646616107154215e97b' }))), h("img", { key: 'c04ad33e34573482e701f4239e17a9a28fd98dd0', class: {
+            }, style: bgStyle }, h("slot", { key: 'd987180d13fa9ef34868c8e962344da9e0f6b876' }))), h("img", { key: 'f3d603cf35bf0c37c4e1eb530e9a9ea7d7e81beb', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '4d40e294ec3a56be5756aede03e91aaf3d629bf3', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: this.src , loading: this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: 'cf77dadeb8d5b01ef1afff5e6df5eb6aacad13e6', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],
@@ -18929,7 +18897,7 @@ class NanoBadge {
     }; }
 }
 
-const breadcrumbCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n}\n:host .breadcrumbs {\n  container-type: inline-size;\n  container-name: breadcrumbs;\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n:host ol,\n:host nano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n:host li,\n:host nano-nav-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n:host li:not(.return-only li)::after,\n:host nano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host a.link {\n  color: var(--text-color);\n}\n:host a:not(.link) {\n  color: var(--text-color-secondary);\n}\n:host a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n:host a.link:hover {\n  color: var(--text-color-hover);\n}\n:host a.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n:host nano-dropdown {\n  inline-size: 100%;\n  display: none;\n}\n:host nano-dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host nano-dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host .trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n:host .trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n:host .trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host .trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n:host .trigger-icon--open {\n  transform: rotate(180deg);\n}\n@container breadcrumbs (max-width: 768px) {\n  :host .main {\n    display: none;\n  }\n  :host nano-dropdown {\n    display: block;\n  }\n  :host nano-menu::part(base) {\n    flex-direction: column;\n  }\n  :host nano-nav-item::after {\n    display: none;\n  }\n  :host .trigger-button_label::after {\n    display: inline-block;\n  }\n  :host .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  }\n  :host nano-nav-item::part(trigger) {\n    text-decoration: none;\n    color: var(--text-color-secondary);\n  }\n}";
+const breadcrumbCss = ":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}}";
 
 /**
  * Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
@@ -18946,8 +18914,6 @@ class NanoBreadcrumb {
     breadcrumbs = [];
     isOpen = false;
     componentWillLoad() {
-        // add global styles to shadow DOM
-        addGlobalStylesheetToShadow(this.el?.shadowRoot);
     }
     render() {
         const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
@@ -19073,9 +19039,10 @@ class NanoCta {
     /** Predefined styles when displaying a number of CTAs together */
     group;
     componentWillLoad() {
-        if (!this.host.querySelector('button, a')) {
+        if (!this.host.querySelector('button, a, div')) {
             const button = document.createElement('button');
             button.classList.add('nano-internal-cta');
+            button.type = 'button';
             this.host.childNodes.forEach((node) => {
                 button.appendChild(node);
             });
@@ -20967,7 +20934,7 @@ class TablePinService {
     }
 }
 
-const tableCss$1 = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.nano-data-table {\n  /**\n   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`\n   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`\n   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`\n   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`\n   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`\n   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`\n   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;\n   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;\n   */\n  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n  --table-border-color: var(--nano-color-neutral-200);\n  --table-border-color-header: var(--nano-color-primary-1000);\n  --table-background: var(--nano-color-base-0);\n  --table-max-col-width: clamp(200px, 500px, 50vw);\n  --table-ordered-bg: var(--nano-color-neutral-100);\n  --table-wrapper-max-height: 80vh;\n  --table-wrapper-max-width: 100%;\n  display: block;\n  inline-size: 100%;\n  color: var(--nano-color-neutral-1400);\n  container-type: inline-size;\n  --isLtR: 1;\n}\n.nano-data-table:dir(rtl) {\n  --isLtR: -1;\n}\n.nano-data-table .nano-sortable__dragged {\n  background: var(--nano-color-base-0);\n  opacity: 0.9;\n  box-shadow: var(--nano-shadow-l0);\n  z-index: 10 !important;\n}\n\n.nano-tbl__wrap {\n  display: table;\n  min-inline-size: 100%;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {\n  max-inline-size: var(--table-wrapper-max-width);\n  max-block-size: var(--table-wrapper-max-height);\n  position: relative;\n  display: block;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {\n  margin-block-end: var(--nano-spacing-l);\n}\n\n.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {\n  --fade-size: 0;\n}\n\n.nano-tbl {\n  text-align: start;\n  inline-size: 100%;\n  border-spacing: 0 0;\n  border-collapse: separate;\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n}\n.nano-tbl__top-anchor {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n  position: relative;\n}\n.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg);\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__order-btn {\n  padding: 0;\n  border: none;\n  outline: none;\n  font: inherit;\n  background: none;\n  appearance: none;\n  color: inherit;\n  display: flex;\n  gap: var(--nano-spacing-sm);\n  align-items: center;\n  inline-size: 100%;\n}\n.nano-tbl__order-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n.nano-tbl__status-icons {\n  margin-inline: auto 10px;\n  display: flex;\n  gap: 10px;\n}\n.nano-tbl__progress-bar {\n  font-size: 0.2rem;\n  position: sticky;\n  inset-block-start: 0;\n  inset-inline: 0;\n  z-index: 10;\n  transition: scale 0.25s;\n  transform: scale(0);\n  inline-size: 100%;\n  block-size: 0;\n}\n.nano-tbl__progress-bar--show {\n  transform: scale(1);\n  block-size: auto;\n}\n.nano-tbl__caption--hide {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n.nano-tbl__td, .nano-tbl__th {\n  max-inline-size: var(--table-max-col-width);\n}\nthead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {\n  position: absolute;\n  inset-inline-end: 5px;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  background: white;\n  z-index: 10;\n}\n.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg) !important;\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nano-tbl__cell-content--no-result {\n  padding-block: var(--nano-spacing-md);\n}\n.nano-tbl__cell-content--wrap {\n  white-space: normal;\n  overflow: visible;\n}\n.nano-tbl tbody {\n  opacity: 1;\n  transition: 0.1s ease opacity;\n}\n.nano-tbl tbody.nano-tbl__loading {\n  z-index: -1;\n  position: relative;\n}\n.nano-tbl tbody.nano-tbl__inactive {\n  opacity: 0;\n}\n.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {\n  display: none;\n}\n.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {\n  display: none;\n}\n.nano-tbl th[scope=row] {\n  margin: 0;\n}\n.nano-tbl__tr {\n  --base-z: 0;\n}\n.nano-tbl__pin {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin--start {\n  position: sticky;\n  inset-inline-start: var(--pin-start, -1px);\n}\n.nano-tbl__pin--start::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-start-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--start .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 3) !important;\n}\n.nano-tbl__pin--end {\n  position: sticky;\n  inset-inline-end: var(--pin-end, -1px);\n  max-inline-size: min(50vw, 200px);\n}\n@container (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n@media (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n.nano-tbl__pin--end::after {\n  display: block;\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-end-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--end .nano-tbl__pin--end {\n  --z: calc(var(--base-z) + 2);\n}\n.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {\n  position: sticky;\n  inset-block-start: var(--pin-top, -1px);\n}\n.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--top.nano-tbl__pinned--top {\n  --base-z: 4;\n}\ntbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {\n  border-block-end: 1px solid var(--table-border-color-header);\n}\n.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {\n  position: sticky;\n  inset-block-end: var(--pin-bottom, -1px);\n}\n.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {\n  --base-z: 5;\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {\n  --base-z: 6;\n}\ntbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {\n  border-block-start: 1px solid var(--table-border-color-header);\n}\n.nano-tbl thead tr:last-of-type td,\n.nano-tbl thead tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n}\n.nano-tbl tfoot tr:first-of-type td,\n.nano-tbl tfoot tr:first-of-type th {\n  border-block-start: none;\n}\n.nano-tbl tfoot tr:last-of-type td,\n.nano-tbl tfoot tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n  border-block-start: 2px solid var(--table-border-color-header);\n}\n.nano-tbl .unlimited-width {\n  max-inline-size: none;\n}\n.nano-tbl__spinner {\n  font-size: 1.5rem;\n  transition: scale 0.25s;\n  scale: 0;\n  padding: 0.5rem;\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: calc(50% - 0.75rem);\n  z-index: 0;\n}\n.nano-tbl__spinner--show {\n  scale: 1;\n  position: sticky;\n}\n.nano-tbl .nano-skeleton {\n  line-height: var(--nano-line-height-normal);\n}";
+const tableCss$1 = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.nano-data-table {\n  /**\n   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`\n   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`\n   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`\n   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`\n   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`\n   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`\n   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;\n   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;\n   */\n  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n  --table-border-color: var(--nano-color-neutral-200);\n  --table-border-color-header: var(--nano-color-primary-1000);\n  --table-background: var(--nano-color-base-0);\n  --table-max-col-width: clamp(200px, 500px, 50vw);\n  --table-ordered-bg: var(--nano-color-neutral-100);\n  --table-wrapper-max-height: 80vh;\n  --table-wrapper-max-width: 100%;\n  display: block;\n  inline-size: 100%;\n  color: var(--nano-color-neutral-1400);\n  container-type: inline-size;\n  --isLtR: 1;\n}\n.nano-data-table:dir(rtl) {\n  --isLtR: -1;\n}\n.nano-data-table .nano-sortable__dragged {\n  background: var(--nano-color-base-0);\n  opacity: 0.9;\n  box-shadow: var(--nano-shadow-l0);\n  z-index: 10 !important;\n}\n\n.nano-tbl__wrap {\n  display: table;\n  min-inline-size: 100%;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {\n  max-inline-size: var(--table-wrapper-max-width);\n  max-block-size: var(--table-wrapper-max-height);\n  position: relative;\n  display: block;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {\n  margin-block-end: var(--nano-spacing-l);\n}\n\n.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {\n  --fade-size: 0;\n}\n\n.nano-tbl {\n  text-align: start;\n  inline-size: 100%;\n  border-spacing: 0 0;\n  border-collapse: separate;\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n}\n.nano-tbl__top-anchor {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n  position: relative;\n}\n.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg);\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__order-btn {\n  padding: 0;\n  border: none;\n  outline: none;\n  font: inherit;\n  background: none;\n  appearance: none;\n  color: inherit;\n  display: flex;\n  gap: var(--nano-spacing-sm);\n  align-items: center;\n  inline-size: 100%;\n}\n.nano-tbl__order-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n.nano-tbl__status-icons {\n  margin-inline: auto 10px;\n  display: flex;\n  gap: 10px;\n}\n.nano-tbl__progress-bar {\n  --height: 0.2125rem;\n  position: sticky;\n  inset-block-start: 0;\n  inset-inline: 0;\n  z-index: 10;\n  transition: transform 0.25s;\n  transform: scale(0);\n  inline-size: 100%;\n}\n.nano-tbl__progress-bar--show {\n  transform: scale(1);\n}\n.nano-tbl__caption--hide {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n.nano-tbl__td, .nano-tbl__th {\n  max-inline-size: var(--table-max-col-width);\n}\nthead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {\n  position: absolute;\n  inset-inline-end: 5px;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  background: white;\n  z-index: 10;\n}\n.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg) !important;\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nano-tbl__cell-content--no-result {\n  padding-block: var(--nano-spacing-md);\n}\n.nano-tbl__cell-content--wrap {\n  white-space: normal;\n  overflow: visible;\n}\n.nano-tbl tbody {\n  opacity: 1;\n  transition: 0.1s ease opacity;\n}\n.nano-tbl tbody.nano-tbl__loading {\n  z-index: -1;\n  position: relative;\n}\n.nano-tbl tbody.nano-tbl__inactive {\n  opacity: 0;\n}\n.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {\n  display: none;\n}\n.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {\n  display: none;\n}\n.nano-tbl th[scope=row] {\n  margin: 0;\n}\n.nano-tbl__tr {\n  --base-z: 0;\n}\n.nano-tbl__pin {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin--start {\n  position: sticky;\n  inset-inline-start: var(--pin-start, -1px);\n}\n.nano-tbl__pin--start::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-start-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--start .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 3) !important;\n}\n.nano-tbl__pin--end {\n  position: sticky;\n  inset-inline-end: var(--pin-end, -1px);\n  max-inline-size: min(50vw, 200px);\n}\n@container (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n@media (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n.nano-tbl__pin--end::after {\n  display: block;\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-end-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--end .nano-tbl__pin--end {\n  --z: calc(var(--base-z) + 2);\n}\n.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {\n  position: sticky;\n  inset-block-start: var(--pin-top, -1px);\n}\n.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--top.nano-tbl__pinned--top {\n  --base-z: 4;\n}\ntbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {\n  border-block-end: 1px solid var(--table-border-color-header);\n}\n.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {\n  position: sticky;\n  inset-block-end: var(--pin-bottom, -1px);\n}\n.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {\n  --base-z: 5;\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {\n  --base-z: 6;\n}\ntbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {\n  border-block-start: 1px solid var(--table-border-color-header);\n}\n.nano-tbl thead tr:last-of-type td,\n.nano-tbl thead tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n}\n.nano-tbl tfoot tr:first-of-type td,\n.nano-tbl tfoot tr:first-of-type th {\n  border-block-start: none;\n}\n.nano-tbl tfoot tr:last-of-type td,\n.nano-tbl tfoot tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n  border-block-start: 2px solid var(--table-border-color-header);\n}\n.nano-tbl .unlimited-width {\n  max-inline-size: none;\n}\n.nano-tbl__spinner {\n  font-size: 1.5rem;\n  transition: scale 0.25s;\n  scale: 0;\n  padding: 0.5rem;\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: calc(50% - 0.75rem);\n  z-index: 0;\n}\n.nano-tbl__spinner--show {\n  scale: 1;\n  position: sticky;\n}";
 
 let id$3 = 0;
 /**
@@ -21724,17 +21691,20 @@ class NanoDataTable {
         return (h(Host, { class: "nano-data-table" }, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { onNanoResize: () => {
                 if (this.tablePinnedService)
                     this.tablePinnedService.onResize();
-            } }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", { indeterminate: true, class: {
+            } }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
+            // indeterminate
+            class: {
                 [`${CSSNAMESPACE}__progress-bar`]: true,
                 [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h("caption", { class: {
+            }
+        }, h("progress", null)), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId, "aria-busy": this._loading || undefined }, h("caption", { class: {
                 [`${CSSNAMESPACE}__caption`]: true,
                 [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
             } }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
             h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("span", { class: "n-loader-skeleton" }, h("span", null, "Content loading")) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
@@ -22387,7 +22357,7 @@ class NanoDetails {
     }; }
 }
 
-const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  background-color: var(--nano-color-base-rgb-1000);\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-base-0);\n  color: var(--nano-color-base-1000);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 912px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
+const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 912px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
 
 /**
  * The footer is used to provide navigation, copyright info and links to social media platforms.
@@ -22411,10 +22381,9 @@ class NanoFooter {
     }
     get host() { return getElement(this); }
     componentWillLoad() {
-        addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
     render() {
-        return (hAsync("footer", { key: '6c5f9e943485a21b7c19a1c1173816151450a7a7', class: "footer" }, hAsync("div", { key: '4f412bbb7737f5f8225729e2109b688ccc800989', class: "upper" }, hAsync("div", { key: 'dd53490055399eafe7599aca856dd0ca79ba21fb', class: "top" }, hAsync("div", { key: 'c8103cf1bcd74ce025924fc975849573051368d0', class: "top-start" }, hAsync("slot", { key: '924b1f7d97a15e4afa0126f7c03fe525f97f92ba', name: "top-start_heading" }), hAsync("slot", { key: '3feb30f6395b9acbdd670cd656321ea751a4e81a', name: "top-start_content" })), hAsync("div", { key: '5dd035af59487992c2da47b7b61012da97cfeec4', class: "top-center" }, hAsync("slot", { key: 'aecc20ee6792c8912cd330724af3a75cfcd487af', name: "top-center_heading" }), hAsync("slot", { key: 'f30e4dae00d45df2afb7a419daf875843ad61a50', name: "top-center_content" })), hAsync("div", { key: '824feef5a5f50b461904096752bdb4aeefd84d99', class: "top-end" }, hAsync("slot", { key: '7f06ff962236e057b640460097881646e2d8b1b2', name: "top-end_heading" }), hAsync("slot", { key: '5e2412c74e444c570f5ea46b756d2e3369f12215', name: "top-end_content" })))), hAsync("div", { key: '77cb498fde6fb578e3c5a249ca6c3db5c88206d1', class: "lower nano-theme-dark" }, hAsync("div", { key: '7f2e8024df8f7470443d0048eefd8978d203f727', class: "middle" }, hAsync("div", { key: '18c334b18c07c0ee2416cb646c5f5287c091bdb3', class: "middle-start" }, hAsync("img", { key: 'be83911db58e7a75566a2d495b843427a7d1fa0a', src: "/nano-assets/img/ont-logo-light.svg", alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46" })), hAsync("div", { key: 'a7b84187146146325db5cb990d53650ebfaf5741', class: "middle-center" }, hAsync("a", { key: 'd2edfbc2e1034a9378be6291bf290af6d0e36119', href: "https://x.com/nanopore", target: "_blank" }, hAsync("nano-icon", { key: '8e8cb317194b2dd9277599c38b525128d94d69c0', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), hAsync("a", { key: '07091f28412bf31e853c5c51d6448631a7e47b33', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, hAsync("nano-icon", { key: '8e5f4e5b2d13ce77df193d4a38743d6225f667d6', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), hAsync("a", { key: '2561aa967f77b1ac0618c02fe1e78c270d8f82f7', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, hAsync("nano-icon", { key: '27ac4933b66ff7027c3f45bc001d0e311055cf0a', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), hAsync("a", { key: '2b46f3651b32439997c4f1020d89901bcf6679a8', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, hAsync("nano-icon", { key: '0f25dc9636ece933dbc00911d0e0c36735203666', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), hAsync("a", { key: '541bef691993ace5b8c270e82d08984baace7964', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, hAsync("nano-icon", { key: 'bb4a4104c3a39375d1f50c7c8aca1561a66d9c28', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), hAsync("a", { key: '4817a0798d5ab0586a20c40a14de73280ce749e3', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, hAsync("nano-icon", { key: 'dea3b9c4bc6100f73a3769999779ab4e6f343193', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), hAsync("div", { key: '151bbc03ca7c9fbdb14cf355dd4ff61c6fba1e36', class: "middle-end" }, hAsync("slot", { key: '241922e25dbe52e5a6e5b9b661c037f3faa004f5', name: "middle-end" }))), hAsync("div", { key: '08489f7cb75832e26fe862987d19bbdc03b8ff23', class: "bottom" }, hAsync("div", { key: '1e2cfb25bbb0f6a60399b344f83a091677d848d7', class: "bottom-start" }, hAsync("slot", { key: 'ce19389f907a75fb43a533a7ca200670b136ad86', name: "bottom-start" }, hAsync("p", { key: '5d6d5135e67276a81f290e91d7753b9b2b4964ce' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), hAsync("div", { key: 'db091f94e130553a106a71071988b2c591a943ab', class: "bottom-end" }, hAsync("slot", { key: '6b6642608e571e9d1690de419727476b27e1514f', name: "bottom-end" }))))));
+        return (hAsync("footer", { key: '7df3395d83480c2efaffd3a745dcb8486492ec8d', class: "footer" }, hAsync("div", { key: '2277f9b209312a0be9c503590f9871c3da7ab7c5', class: "upper" }, hAsync("div", { key: '43ca2ad3f23948f23d787c3179f6012021fe0786', class: "top" }, hAsync("div", { key: '05ee9cb69076053c9accbae4d188232d344e7bf0', class: "top-start" }, hAsync("slot", { key: 'a34bf50a87e10191e65d0be67f88c16abcf48304', name: "top-start_heading" }), hAsync("slot", { key: 'db386e86277ae22fa9b5e7723c78ec48b4ff5444', name: "top-start_content" })), hAsync("div", { key: '061fd17bfdb8ad8af11dce8cd3abac07d7c58290', class: "top-center" }, hAsync("slot", { key: '885c3acef88311528147a249ca29003ec64b10c0', name: "top-center_heading" }), hAsync("slot", { key: '8d4f513adfd5f24880ca76a214d2d2051d3b9ad7', name: "top-center_content" })), hAsync("div", { key: 'f6138faa2e07af7e9e46a20e1510708f58ddba27', class: "top-end" }, hAsync("slot", { key: 'aa7570bfa51e27ec2745b2563db6736c1b7def19', name: "top-end_heading" }), hAsync("slot", { key: '9dd64f4ad61d9a0d5dd1b305e9089c5190e89738', name: "top-end_content" })))), hAsync("div", { key: 'bbf554d8a85ee66cf0a38f82a8de608615510722', class: "lower nano-theme-dark" }, hAsync("div", { key: '4a46e9541cc2fa7b45cfa3fd3a8628e5aed47eae', class: "middle" }, hAsync("div", { key: 'ef13e5c2a35f64533bba7522fa34c964c4ee8acc', class: "middle-start" }, hAsync("img", { key: '2bf403ca600f0588be99898b4e0a42ee5f64f736', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46" })), hAsync("div", { key: 'c3796b77148a0ba37fba2a7d1f3583233294de22', class: "middle-center" }, hAsync("a", { key: 'abd8ff0fcbb1b3e7365090310c67ae0c29a8073f', href: "https://x.com/nanopore", target: "_blank" }, hAsync("nano-icon", { key: '78ec0f32afa4da8f87fce46f36c2958a61cadaef', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), hAsync("a", { key: '28315142cc17313a65d9039601b26bbe2400d715', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, hAsync("nano-icon", { key: '155bedeeea937afe7740c867f9780ad26dd6eadf', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), hAsync("a", { key: '4047f00cd32d045bd46660aaa9eb17536a5555f4', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, hAsync("nano-icon", { key: '63e9bb9f849a10b70b1a5cd32c1f9545587f8902', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), hAsync("a", { key: 'fd2f4d639c13c99523a9f026457414aa805171bc', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, hAsync("nano-icon", { key: '71a31a51945079e3419ce150a7908db2125a6523', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), hAsync("a", { key: '426b6c582345b1e32bbd0e6ca206a75cd56ed434', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, hAsync("nano-icon", { key: 'ec8256f6a70d0bb68beacab2a8c8adc381d26661', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), hAsync("a", { key: 'ddf5456cb764238fb5d932b2b44cf5466e82ad2f', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, hAsync("nano-icon", { key: '293464c660b8734f0bae8eb612c8377e763b8053', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), hAsync("div", { key: '6b7ed0e2ad110329ce9c5e4e085278d4e7dd4568', class: "middle-end" }, hAsync("slot", { key: '15c3d94e8f35ee98fafdc6f062d9639b0ac54b63', name: "middle-end" }))), hAsync("div", { key: 'a72b24bd18b825b160608a1b20e221b37c070bc4', class: "bottom" }, hAsync("div", { key: 'a63f935bacfc660dc1c45e0dcb43514272837fdd', class: "bottom-start" }, hAsync("slot", { key: '1fb95aa9e6da5ae676470cf532c47ecbe5ae0015', name: "bottom-start" }, hAsync("p", { key: 'd78582a9baa27c818155577a7a49ccbc6b0fe141' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), hAsync("div", { key: '08a48aaf322de5c4292e24803e8ca6da40e1e3c5', class: "bottom-end" }, hAsync("slot", { key: '81873c5375cc33b1f1b533354b960a66eadaf94b', name: "bottom-end" }))))));
     }
     static get style() { return footerCss; }
     static get cmpMeta() { return {
@@ -22712,12 +22681,12 @@ class NanoTab {
         }
     };
     render() {
-        return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '0a14c43ba8ab38ec19e63fff1b7569d9f10457f0', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'bff4ec7769d57b0b5b9e3f936c147023ff7b532c', 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,
-            } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: '797a1904ebaaa96585ff47bff275a9643d09a2b8', name: "start" }), h("div", { key: '588cb30e4c7dfa85c99c45ac231db0188cb56005', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '6ff03454d9735733007f430cdde78010717d8677' })), h("slot", { key: '959a2633b41acdd733aa29d43178ef15784a8652', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '02b6b8158044d7be61450b86774bbe9f63575062', 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 {
@@ -22763,10 +22732,10 @@ class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', 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: '35d8ae3c3bce8bdfbd59b24ac8d56b2b065121bf', 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: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
+            } }, h("div", { key: 'b12340e8aa22961ab261ebe58e150ea5b2434314', part: "base", class: "nano-tab-content" }, h("slot", { key: 'eea7e936ac8ebe2338720d5878e06372c222fda2' }))));
     }
     static get style() { return tabContentCss; }
     static get cmpMeta() { return {
@@ -23341,10 +23310,10 @@ class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
+        return (h(Host, { key: 'd3e5a8138e931cb62fefade6b995111d958ad0a5', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, 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' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6775e115264b8810584bfbaa573558d539a6c14d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '297a7ca1929ee780382132ef24ba25f8533c9140', class: "nano-table__overflow" }))), h("slot", { key: '0741a9939e245d5eea38641ed35fb46b4fecf4c5' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -23414,8 +23383,8 @@ class NanoTag {
     render() {
         return (this.closable &&
             !this.containsAnchor() && [
-            h("slot", { key: '0d6e99e16dc034266f43677f5dbb47b7a390d562' }),
-            h("nano-icon-button", { key: '08586a086598c37e6d4af76df6ff19ca1723b3d8', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
+            h("slot", { key: '2ef94e5651a0428b93d9d3619ad0440bf70587e2' }),
+            h("nano-icon-button", { key: '0ad6bfbe3fd9ab8a796bbe915c6d522986236f1d', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
         ]);
     }
     static get style() { return tagCss; }
@@ -23837,53 +23806,36 @@ class Option {
     }; }
 }
 
-const progressBarCss = ":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
+const progressBarCss = ":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}}nano-progress-bar{--indicator-color:var(--nano-color-primary-1000);--track-color:var(--nano-color-neutral-300);--border-radius:1.25rem;--height:0.625rem;display:grid;position:relative;overflow:clip;border-radius:var(--border-radius);height:var(--height);font-size:var(--height)}nano-progress-bar[size=small]{--height:0.3125rem}nano-progress-bar[size=large]{--height:0.9375rem}nano-progress-bar progress{appearance:none;width:100%;height:inherit;border-radius:var(--border-radius);background-color:var(--track-color);grid-area:1/1}nano-progress-bar>label{grid-area:1/1;position:absolute;inset:0}nano-progress-bar>label progress{position:absolute;inset:0}nano-progress-bar:has(progress:not([value]))::after{content:\"\";width:100%;inset:0;display:block;transform:translateZ(0);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);background-color:var(--indicator-color);grid-area:1/1;border-radius:none}nano-progress-bar progress:not([value])::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress:not([value])::-moz-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}nano-progress-bar progress[value]::-webkit-progress-bar{border-radius:var(--border-radius);background-color:var(--track-color)}nano-progress-bar progress[value]::-webkit-progress-value{background-color:var(--indicator-color);-webkit-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar progress[value]::-moz-progress-bar{background-color:var(--indicator-color);-moz-transition:inline-size var(--nano-transition-fast);transition:inline-size var(--nano-transition-fast)}nano-progress-bar[show-percent] progress[value]::before{content:attr(value) \"%\";position:absolute;inline-size:attr(value %);min-inline-size:6%;top:50%;translate:0 -50%;text-align:center;transition:inline-size var(--nano-transition-fast);font-size:0.75em;color:var(--nano-color-base-0)}";
 
 /**
  * Shows the status of an ongoing operation.
  *
- * @version 3.0.0
- * @status stable
- *
- * @slot - A label to show inside the indicator.
+ * @version 8.0.0
+ * @status new
+ * @type CSS Only
  *
- * @part base - The component's base wrapper.
- * @part indicator - The progress bar indicator.
- * @part label - The progress bar label.
+ * @slot - Used for mandatory `<progress>` element and optional `<label>`
  */
 class ProgressBar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    get host() { return getElement(this); }
-    /** The progress bar's percentage, 0 to 100. */
-    value = 0;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-    indeterminate = false;
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
-    render() {
-        return (h(Host, { key: '2d33cb1a93d9b155cef4ea64b1a36a275104ed5c', class: "nano-progress-bar" }, h("div", { key: '1477b01e971f00541af5501df4f42c2d69cb87d4', part: "base", class: {
-                'progress-bar': true,
-                'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
-                width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
-            ? `${this.value}%`
-            : ''))))));
-    }
+    /** The height of the progress-bar */
+    size = 'medium';
     static get style() { return progressBarCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 0,
         "$tagName$": "nano-progress-bar",
         "$members$": {
-            "value": [2],
-            "indeterminate": [4],
-            "showPercent": [4, "show-percent"]
+            "showPercent": [516, "show-percent"],
+            "size": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["showPercent", "show-percent"], ["size", "size"]]
     }; }
 }
 
@@ -24606,23 +24558,23 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'cecf5fdd43d5b48e55ddd4c69900e82c85c48bee', class: "nano-rating" }, h("div", { key: '87803596623dfc08370dd7e6f0a59bfaed8fcf4f', class: "rating-wrap" }, h("div", { key: '32da5e5a323bf552e5e04403e7594ecc57739b31', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', 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: 'cab05324ead1b6e539e6c162ab0a9f2488a3a801', 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: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', 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: 'd369b4d296ba7c763777422a7885a78d0175e0c8', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', 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,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: 'd1cfd5eeb33163a3c0f02cde0234bbf0ddbd2805', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
@@ -24883,7 +24835,7 @@ class ResizeObserve {
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: 'c18db95f590c660cc2c0e1dd1f2d2a0c66e63a54', class: "nano-resize-observe" }, h("slot", { key: '25cd2b6762d1bb05d5182fd817b758256ce6750a' }), !!this.notifyContentFit &&
+        return (h(Host, { key: '67ae39458d0f21c7100481c6aa68f9455e468d86', class: "nano-resize-observe" }, h("slot", { key: '503108cec78fcfda303a9e392e1903ec7acfc244' }), !!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" })),
@@ -25610,30 +25562,30 @@ class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'dd8d62d6064ca5bbca75c9b5b308ab2c8140c778', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', 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: '811e296732a794fe171b99ab8831fb8a9f014c43', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...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: '667499839b71ae46a1e8b8ee410e20334518a212', ...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: '3d4d2f085444d08bad5ea6893779d62eec37e4c1', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: 'e7354f6e04484f1f56f0a8adc1a83a1fd9217230', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'c751e574ade62cf7ec18b61b54f79e7066652236', 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: '800b2ba2ba4b397bf23e1e1f872dacf82fbac2c6', 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: '7571a30e6a3f0b231d9e0b7a6e2f662fe3bd8183', ...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: 'e92b079944fb81314da40799ba8f11f5644d5fa7', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '3fc66f07b7c9220e2c9d3eb02b1b268f52921a46', 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: '1737bc4d8e6267659ebbd981cd043e0a3f0e20e3', 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: '93149856e07a8b0be5b2ba6d7145c1ed37b7c876', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '9214159801d2b7f2a8bc2251a964d60980766dd6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '742e550ebb274935ea61f0ae01d34e696058b146' }))), h("select", { key: 'e56355bad1e009cb1a46ef727e8e16894c38d325', 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: '23a03a568fc87bd041b4c4e702afba215e637423', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'edd9ba1b076740baeaa34f62aa27f598bda7114d', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '80e401156f240faf7fa04fef7915aa982305abd3' }))), h("select", { key: 'ba8bc3b4d7149e249c26f82da6816afa1b25fabf', 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 &&
@@ -25735,39 +25687,6 @@ class Select {
     }; }
 }
 
-const skeletonCss = ":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{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";
-
-/**
- * Skeletons are used to show where content will eventually be drawn.
- *
- * @version 1.0.0
- * @status stable
- */
-class Skeleton {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** When `true`, the skeleton will animate. */
-    animated = true;
-    render() {
-        return (h(Host, { key: 'fcfda9d2eb69c98089f410f30087a5cc773b4dd7', class: "nano-skeleton" }, h("div", { key: '6f489367c6e9a366d8fc4290244141a8a0b1c4d8', class: {
-                skeleton: true,
-                animate: this.animated,
-            } }, h("div", { key: 'd54f326dd7e8d181702d6ab16ca08c6c88c654e0', class: "skeleton__indicator" }, "\u00A0"))));
-    }
-    static get style() { return skeletonCss; }
-    static get cmpMeta() { return {
-        "$flags$": 9,
-        "$tagName$": "nano-skeleton",
-        "$members$": {
-            "animated": [4]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
 const slideCss = ":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{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}:host(:not([ready])){flex:1 0 auto}";
 
 let Slide$2 = class Slide {
@@ -25801,7 +25720,7 @@ let Slide$2 = class Slide {
         });
     }
     render() {
-        return (h(Host, { key: '6d319ed9290a227544d3a2ad2e8ad42be30c73a6', class: "nano-slide" }, h("slot", { key: 'd8670dbaab37a0c50b5991136271e6b9b6b79e34' })));
+        return (h(Host, { key: 'f45a8a3b8232fdca227e7d53642f31206ff2a6e0', class: "nano-slide" }, h("slot", { key: '248bc7303404576301a477ed36449388190e8417' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -28821,15 +28740,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '778b37c200236cc6940c12f4ed28355c83804434', class: "nano-slides" }, h("div", { key: '29bb9128e4c2e13f754b15deb335d100a4bbd8cc', class: {
+        return (h(Host, { key: '0eecdd4b8054bfc79c414f92cc52208cc17030c9', class: "nano-slides" }, h("div", { key: '52d4f9e42fc545c9fbd955f497ff31911e2bae7e', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'bc5e82987d73da6ba47bcc0d6d85694660e63539', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'd41c00513b0f7a9a9cb05a5943f368b86af34bdf', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'a26b2ef0d1b133231dec665fd670bdfda1bca949' })), h("div", { key: 'e02f3971f707f6fedeae00d879be04d4b576119a', class: "ui-extras" }, h("slot", { key: '97cabadc46d2011e2ca41d8f5c7c26ef53e32b6a', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'bebd09c2b27bc7dbae72d5cab15b8fbd77af52a0' })), h("div", { key: '4e5b0c0385dcc3757f889004ec50f7550bc3bfe2', class: "ui-extras" }, h("slot", { key: '6481258c29c5f30c2a47b102e47e9ce75260c712', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -29608,7 +29527,7 @@ class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: '864871b13cc5f7a14e5b3a72c7776daec8f75bf0', class: "nano-sortable" }, h("div", { key: '9645cde622750e8d9476430712bb71ca090b6d0d', 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: '5083e13e75b08b68732fccc7181d2358e5a3198d' })));
+        return (h(Host, { key: '108dd7db53821adef114521be6a825561c974137', class: "nano-sortable" }, h("div", { key: '7b23e9a51e5cb366676fb61163b031c0ba693599', 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: 'a61fca55dd0de8a4dd1611ada70101ca19906528' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -29673,7 +29592,7 @@ class Spinner {
         this.hasText = !!this.el.childNodes.length;
     }
     render() {
-        return (h(Host, { key: 'dbc40d7788bbf362c854bb8e2edfec5eba74dab7', class: "nano-spinner" }, h("div", { key: '43ed7c0bc040a058f5ae2e667d060bc977ab1cd6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'e5b5e56150e94540cb10114ea50414fbfa388f9b', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'd710dd242b6f87267dd7e5e027e06970d50bf404', class: "spinner__dna" }, h("div", { key: '8a352a82329fab518e60016e02b6a8ed5acc2f09', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '11df9066edf3c1976e3a2389d01ec16db6351449', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '4b3491c97ff57acc3630e084965c22f4f2be21ac', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '539be4e37c8ef5942c96a9e956da72edaa85a717', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'cb819582c58208d071303faa623a6d1204eae265', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '852c3b793018c03021555321f9c10f5060a129f0', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: '915260775e7f710e9d54c80ebe66a4be9ffb4d56', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'bad113420011fbeff7421a347459060ea0e27c32', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: 'e2d6aee7635d1262116119240f4d4e7518b26fc6', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '0ccd6e6d73eca5bcc50073bd4502d88cdd1aaaeb', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '1046da948f271f9a8812e1795eca262a86eb5e77', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '65b4f08dd543597c477bf3bb3d1b01d2de29d897', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '7e6df709a6c943e14cafdbcff845a40aaedadca9', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '70e7baee2dea251a9413905a0f8df825ea8a1c9f', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'ca16ebfa9ab9932f67dbe542eacced2056644295', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'fa9e17f125e1f435f75538b24111cefbbce930c8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'c2ce2c01f09a02201a1247f9db1baae3afd62c55' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
+        return (h(Host, { key: '50440a7fb87c4e5b54d5b3ab1c5781a77dc580c9', class: "nano-spinner" }, h("div", { key: 'c4508214b1b17c54dadf15bf5d03128f560e99b8', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'ef7f2ac50d9c6f3d8565c692b67d991e175b674a', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: '269e356d7c35879d969b9308c00ece4bfa5fbc6b', class: "spinner__dna" }, h("div", { key: '727b7efd0f96663381e0634e3ce418c9c410f2fe', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '177cf194f19c2eee3a78b9e808637b5f1cd372dd', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1b4a7b46b153f26db496499cf383eb442213bbba', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'f2a0b517981107faa2ff467802a024f052247f42', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '9240ab7c633a21cc68e3c7848ac1c6a68b86353c', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '24a36e2fc04dfa727899e2fb0d31a0a6ac4d5ea3', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'c9560b3b7566f57c613483e28adae95de5154801', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: '9cc8b27ed18bb71b236d9714e74c97420ae102df', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '63e0ce5e9788e643303a8d99ad417a2d4ebf6ede', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'c23c129f65a6c8bc5f9e0fe7fdc7218d1359cb41', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '9f4def6d87deef4c6dcb19952966a73c6783f3b7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'cd66a00f3a954c6e87dd66d2701cadc2fb0ba847', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '0a445022fdbbd1701c2d1d950532aeec863699c5', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: 'd0e880fa837d3ac04dcae98932aff0b96521cdc9', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'f269a858d997cf7c6f9bb3d981cc9d3a5735a89b', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '16f2074c1aa97fe5a541cbcac45b76985c16de9e', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '2dd688af910babb15d020e14a9bde2228adfee98' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
     }
     static get style() { return spinnerCss; }
     static get cmpMeta() { return {
@@ -30613,12 +30532,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: '684a30435688dd24ba583b9ad18f262b00863220', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '1a27a9545b9e00e492efc809ef10ac291f13f421', class: {
+        return (h(Host, { key: 'e928d991c33b98de7844974084b955c3168b8766', 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: 'cfdaf007080976d6e556eb66e76e5d6f1bd5cdda', 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: '323a9081a4b7aec17c6bcc0cc85558fa54fa5253', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '9fc54c6354a8de64bebbaa54881fa4b21f116ba5' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'be64fd13b426ca2ecd2f0bc2b240271e0f64bdfc', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '83903ad04e5465798443ef86fe99ca78940bd45e' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -30907,10 +30826,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '46e02e20dbf3922cfd6accd2a1b458a7acc7f7d7', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'ab5a74099fab3ada3560426bea7ec8d2a646b9b3', onSlotchange: this.handleSlotChange }), h("div", { key: 'b3dbae1010de35f3583d5c74488ffef20d5e23bd', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'b2280419b506610603bbb3ce6db3e25c3a6fc12a', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '08c87af28b192ca65f9adf1d62dd83b7e75ae3b5', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'c132792e3f32e824735783e6284f1c12ea3c234a', onSlotchange: this.handleSlotChange }), h("div", { key: 'd27cc6ed095544d4f81680191647ead58ed2cc89', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'c002bf4ec9a19eb5631d120498df58956d81e9ba', 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: '86b3f1f338cbc8b37223253fde3e9588c9e43601', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8566c4ea2d7ebbb476de6b127f7d0750ec38c450', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '9f25b5ba1a2732bf2b6f6791bc47fb6c66e08bb6', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8d9e9b42fc0fb8e6491492b28019c184b7fc4fac', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],
@@ -30995,7 +30914,6 @@ registerComponents([
   Rating,
   ResizeObserve,
   Select,
-  Skeleton,
   Slide$2,
   Slides,
   Sortable,