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

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/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);
 }

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

@@ -1,40 +1,18 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { Host } from "@stencil/core";
-import { h } from "../../utils/renderer";
 /**
  * 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>`
  */
 export class ProgressBar {
-    host;
-    /** 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 is() { return "nano-progress-bar"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["progress-bar.scss"]
@@ -47,29 +25,9 @@ export class ProgressBar {
     }
     static get properties() {
         return {
-            "value": {
-                "type": "number",
-                "attribute": "value",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The progress bar's percentage, 0 to 100."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "0"
-            },
-            "indeterminate": {
+            "showPercent": {
                 "type": "boolean",
-                "attribute": "indeterminate",
+                "attribute": "show-percent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -80,34 +38,33 @@ export class ProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+                    "text": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
-            "showPercent": {
-                "type": "boolean",
-                "attribute": "show-percent",
+            "size": {
+                "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot."
+                    "text": "The height of the progress-bar"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": true,
+                "defaultValue": "'medium'"
             }
         };
     }
-    static get elementRef() { return "host"; }
 }

package/dist/collection/components/rating/rating.js

@@ -166,23 +166,23 @@ export 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 is() { return "nano-rating"; }
     static get encapsulation() { return "scoped"; }

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

@@ -227,7 +227,7 @@ export 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" })),