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

package/dist/collection/components/file-upload/file-upload.js

@@ -18,11 +18,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.
  */
 export class FileUpload {
     inputEl;
@@ -59,12 +62,18 @@ export 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. */
@@ -73,11 +82,11 @@ export 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() {
@@ -89,7 +98,7 @@ export 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() {
@@ -169,7 +178,6 @@ export class FileUpload {
     async showError(message) {
         if (this.inputEl) {
             this.inputEl.setCustomValidity(message);
-            this.validate();
             this.showInlineValidation();
         }
     }
@@ -221,7 +229,7 @@ export 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 = '';
@@ -231,24 +239,36 @@ export 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')
@@ -364,9 +384,10 @@ export 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;
@@ -393,11 +414,12 @@ export 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 is() { return "nano-file-upload"; }
@@ -504,7 +526,7 @@ export class FileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum file size allowed per file (bytes)."
+                    "text": "The maximum number of files that can be selected. Defaults to 1"
                 },
                 "getter": false,
                 "setter": false,
@@ -520,14 +542,14 @@ export class FileUpload {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "String to place within a label element."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": false
             },
             "placeholder": {
@@ -548,7 +570,7 @@ export class FileUpload {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'Choose a file...'"
+                "defaultValue": "'Choose a file'"
             },
             "hideLabel": {
                 "type": "boolean",
@@ -610,9 +632,9 @@ export class FileUpload {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "clearInput": {
+            "clearable": {
                 "type": "boolean",
-                "attribute": "clear-input",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -668,7 +690,7 @@ export class FileUpload {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'submit'"
+                "defaultValue": "'submitThenDirty'"
             },
             "form": {
                 "type": "string",
@@ -690,12 +712,12 @@ export class FileUpload {
                 "reflect": false
             },
             "invalid": {
-                "type": "boolean",
+                "type": "any",
                 "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -710,7 +732,7 @@ export class FileUpload {
                 "getter": true,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "null"
             },
             "validityMessage": {
                 "type": "string",

package/dist/collection/components/footer/footer.css

@@ -80,12 +80,11 @@
   }
 }
 :host .upper {
-  background-color: var(--nano-color-base-rgb-1000);
   border-block-start: 1px solid var(--nano-color-neutral-200);
 }
 :host .lower {
-  background-color: var(--nano-color-base-0);
-  color: var(--nano-color-base-1000);
+  background-color: var(--nano-color-basic-black);
+  color: var(--nano-color-basic-white);
 }
 :host .top,
 :host .middle,

package/dist/collection/components/footer/footer.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h } from "@stencil/core";
+import { h, Build, getAssetPath } from "@stencil/core";
 import { addGlobalStylesheetToShadow } from "../../utils/style";
 /**
  * The footer is used to provide navigation, copyright info and links to social media platforms.
@@ -22,10 +22,11 @@ import { addGlobalStylesheetToShadow } from "../../utils/style";
 export class NanoFooter {
     host;
     componentWillLoad() {
-        addGlobalStylesheetToShadow(this.host.shadowRoot);
+        if (Build.isBrowser)
+            addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
     render() {
-        return (h("footer", { key: '6c5f9e943485a21b7c19a1c1173816151450a7a7', class: "footer" }, h("div", { key: '4f412bbb7737f5f8225729e2109b688ccc800989', class: "upper" }, h("div", { key: 'dd53490055399eafe7599aca856dd0ca79ba21fb', class: "top" }, h("div", { key: 'c8103cf1bcd74ce025924fc975849573051368d0', class: "top-start" }, h("slot", { key: '924b1f7d97a15e4afa0126f7c03fe525f97f92ba', name: "top-start_heading" }), h("slot", { key: '3feb30f6395b9acbdd670cd656321ea751a4e81a', name: "top-start_content" })), h("div", { key: '5dd035af59487992c2da47b7b61012da97cfeec4', class: "top-center" }, h("slot", { key: 'aecc20ee6792c8912cd330724af3a75cfcd487af', name: "top-center_heading" }), h("slot", { key: 'f30e4dae00d45df2afb7a419daf875843ad61a50', name: "top-center_content" })), h("div", { key: '824feef5a5f50b461904096752bdb4aeefd84d99', class: "top-end" }, h("slot", { key: '7f06ff962236e057b640460097881646e2d8b1b2', name: "top-end_heading" }), h("slot", { key: '5e2412c74e444c570f5ea46b756d2e3369f12215', name: "top-end_content" })))), h("div", { key: '77cb498fde6fb578e3c5a249ca6c3db5c88206d1', class: "lower nano-theme-dark" }, h("div", { key: '7f2e8024df8f7470443d0048eefd8978d203f727', class: "middle" }, h("div", { key: '18c334b18c07c0ee2416cb646c5f5287c091bdb3', class: "middle-start" }, h("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" })), h("div", { key: 'a7b84187146146325db5cb990d53650ebfaf5741', class: "middle-center" }, h("a", { key: 'd2edfbc2e1034a9378be6291bf290af6d0e36119', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: '8e8cb317194b2dd9277599c38b525128d94d69c0', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '07091f28412bf31e853c5c51d6448631a7e47b33', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '8e5f4e5b2d13ce77df193d4a38743d6225f667d6', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '2561aa967f77b1ac0618c02fe1e78c270d8f82f7', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: '27ac4933b66ff7027c3f45bc001d0e311055cf0a', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: '2b46f3651b32439997c4f1020d89901bcf6679a8', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: '0f25dc9636ece933dbc00911d0e0c36735203666', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: '541bef691993ace5b8c270e82d08984baace7964', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: 'bb4a4104c3a39375d1f50c7c8aca1561a66d9c28', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: '4817a0798d5ab0586a20c40a14de73280ce749e3', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: 'dea3b9c4bc6100f73a3769999779ab4e6f343193', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), h("div", { key: '151bbc03ca7c9fbdb14cf355dd4ff61c6fba1e36', class: "middle-end" }, h("slot", { key: '241922e25dbe52e5a6e5b9b661c037f3faa004f5', name: "middle-end" }))), h("div", { key: '08489f7cb75832e26fe862987d19bbdc03b8ff23', class: "bottom" }, h("div", { key: '1e2cfb25bbb0f6a60399b344f83a091677d848d7', class: "bottom-start" }, h("slot", { key: 'ce19389f907a75fb43a533a7ca200670b136ad86', name: "bottom-start" }, h("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."))), h("div", { key: 'db091f94e130553a106a71071988b2c591a943ab', class: "bottom-end" }, h("slot", { key: '6b6642608e571e9d1690de419727476b27e1514f', name: "bottom-end" }))))));
+        return (h("footer", { key: '7df3395d83480c2efaffd3a745dcb8486492ec8d', class: "footer" }, h("div", { key: '2277f9b209312a0be9c503590f9871c3da7ab7c5', class: "upper" }, h("div", { key: '43ca2ad3f23948f23d787c3179f6012021fe0786', class: "top" }, h("div", { key: '05ee9cb69076053c9accbae4d188232d344e7bf0', class: "top-start" }, h("slot", { key: 'a34bf50a87e10191e65d0be67f88c16abcf48304', name: "top-start_heading" }), h("slot", { key: 'db386e86277ae22fa9b5e7723c78ec48b4ff5444', name: "top-start_content" })), h("div", { key: '061fd17bfdb8ad8af11dce8cd3abac07d7c58290', class: "top-center" }, h("slot", { key: '885c3acef88311528147a249ca29003ec64b10c0', name: "top-center_heading" }), h("slot", { key: '8d4f513adfd5f24880ca76a214d2d2051d3b9ad7', name: "top-center_content" })), h("div", { key: 'f6138faa2e07af7e9e46a20e1510708f58ddba27', class: "top-end" }, h("slot", { key: 'aa7570bfa51e27ec2745b2563db6736c1b7def19', name: "top-end_heading" }), h("slot", { key: '9dd64f4ad61d9a0d5dd1b305e9089c5190e89738', name: "top-end_content" })))), h("div", { key: 'bbf554d8a85ee66cf0a38f82a8de608615510722', class: "lower nano-theme-dark" }, h("div", { key: '4a46e9541cc2fa7b45cfa3fd3a8628e5aed47eae', class: "middle" }, h("div", { key: 'ef13e5c2a35f64533bba7522fa34c964c4ee8acc', class: "middle-start" }, h("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" })), h("div", { key: 'c3796b77148a0ba37fba2a7d1f3583233294de22', class: "middle-center" }, h("a", { key: 'abd8ff0fcbb1b3e7365090310c67ae0c29a8073f', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: '78ec0f32afa4da8f87fce46f36c2958a61cadaef', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '28315142cc17313a65d9039601b26bbe2400d715', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '155bedeeea937afe7740c867f9780ad26dd6eadf', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '4047f00cd32d045bd46660aaa9eb17536a5555f4', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: '63e9bb9f849a10b70b1a5cd32c1f9545587f8902', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: 'fd2f4d639c13c99523a9f026457414aa805171bc', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: '71a31a51945079e3419ce150a7908db2125a6523', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: '426b6c582345b1e32bbd0e6ca206a75cd56ed434', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: 'ec8256f6a70d0bb68beacab2a8c8adc381d26661', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: 'ddf5456cb764238fb5d932b2b44cf5466e82ad2f', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: '293464c660b8734f0bae8eb612c8377e763b8053', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), h("div", { key: '6b7ed0e2ad110329ce9c5e4e085278d4e7dd4568', class: "middle-end" }, h("slot", { key: '15c3d94e8f35ee98fafdc6f062d9639b0ac54b63', name: "middle-end" }))), h("div", { key: 'a72b24bd18b825b160608a1b20e221b37c070bc4', class: "bottom" }, h("div", { key: 'a63f935bacfc660dc1c45e0dcb43514272837fdd', class: "bottom-start" }, h("slot", { key: '1fb95aa9e6da5ae676470cf532c47ecbe5ae0015', name: "bottom-start" }, h("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."))), h("div", { key: '08a48aaf322de5c4292e24803e8ca6da40e1e3c5', class: "bottom-end" }, h("slot", { key: '81873c5375cc33b1f1b533354b960a66eadaf94b', name: "bottom-end" }))))));
     }
     static get is() { return "nano-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, getAssetPath, } from "@stencil/core";
+import { Host, getAssetPath, Build, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import algoliaSearch from "algoliasearch/dist/algoliasearch-lite.esm.browser";
 import { debounce } from "../../utils/throttle";
@@ -431,7 +431,8 @@ export class GlobalNav {
         this.handleMyAccountUrl();
         this.initSearch();
         this.processUserData();
-        addGlobalStylesheetToShadow(this.host.shadowRoot);
+        if (Build.isBrowser)
+            addGlobalStylesheetToShadow(this.host.shadowRoot);
     }
     componentDidRender() {
         this.handleResize();
@@ -487,20 +488,20 @@ export 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,
@@ -510,10 +511,10 @@ export 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 is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/img/img.js

@@ -134,16 +134,16 @@ export 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: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && 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: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && 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 is() { return "nano-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -37,46 +37,65 @@
       scroll-behavior: auto !important;
     }
   }/**
- * @prop --height: The progress bar's height. Default 1em
- * @prop --track-color: The track color. Default rgb(var(--nano-track-rgb, 228 230 232) / 100%);
- * @prop --indicator-color: The indicator color. Default rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);
- * @prop --label-color: The label color. Default var(--nano-color-white, white);
+ * @prop --indicator-color: Color of the progress indicator. Defaults to var(--nano-color-primary-1000);
+ * @prop --track-color: Color of the progress track. Defaults to var(--nano-color-neutral-300);
+ * @prop --border-radius: Border radius of the progress bar. Defaults to 1.25rem;
+ * @prop --height: Height of the progress bar. Defaults to 0.625rem;
  */
-: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 {
+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);
-  block-size: var(--height);
-  border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-  overflow: hidden;
+  grid-area: 1/1;
 }
-
-.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;
+nano-progress-bar > label {
+  grid-area: 1/1;
+  position: absolute;
+  inset: 0;
+}
+nano-progress-bar > label progress {
+  position: absolute;
+  inset: 0;
 }
-
-.progress-bar--indeterminate .progress-bar__indicator {
+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;
@@ -86,4 +105,30 @@
     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);
 }