@nanoporetech-digital/components 8.0.0-alpha.1 → 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/form-control/form-control.js

@@ -22,7 +22,7 @@ export const FormControlWrap = (props, children) => {
             'has-float-label': label !== null && floatLabel,
             'has-helper-end': hasHelperEndSlot,
             rtl,
-            [props.class]: true,
+            [props.class]: !!props.class,
         } }, h("div", { class: "form-ctrl__wrapper" }, !floatLabel ? renderLabel({ ...props }) : '', h("div", { class: {
             'form-ctrl__input': true,
             'form-ctrl__textarea': type === 'textarea',

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

@@ -61,9 +61,13 @@ export class GlobalNav {
     cartCount = 0;
     /** MyAccount un-read message count. */
     msgCount = 0;
-    /** Manually toggle open or close the overflow menu */
-    async toggleOverflowMenu() {
-        this.overflowOpen = !this.overflowOpen;
+    /** Manually open the overflow menu */
+    async openOverflowMenu() {
+        this.overflowOpen = true;
+    }
+    /** Manually close the overflow menu */
+    async closeOverflowMenu() {
+        this.overflowOpen = false;
     }
     /// MY-ACCOUNT - start ///
     /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
@@ -483,20 +487,20 @@ export class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: 'c968c75746e8b8211210b47c595cff25f0af8933', class: {
+        return (h(Host, { key: '184e0e7a9468ebb9d60cfac752d955358a4fe0fe', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'edeec7490c6a32e2a44f3a8109f5d3f18c9d6101', class: {
+            } }, h("div", { key: '8eaa12e98b9a38721b9f03e2d646d20add74b3e6', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '56df68664885f1ed133b75e7f290405eb32bed67', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'da5e97e862497b1af8f0d0b3ed67e0dd03761f28', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3336390377aba9b2f127a7e1056fb80ba7d1ec75', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'b874e6c5aa026ed4c266601c52d41859857f38b5', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '29e9160530cb0bfbc335cbae26a22a4a3fecdff7', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b09f539037bd906065f5cf2cc6e806173d97b66', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '8c29d087282917c213beeadf719840c44b0f5494', name: "overflow" }))), h("div", { key: '6f07398ab8cd7d5f5fadafdb1d1f29ee9917efc3', class: "gn__menu-bar-wrapper" }, h("div", { key: '58546b45ca7ba896a9f0e1c5e528e191602e64a8', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'dd3d1cf935f2231e280cb0c7697c55470887c949', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'aa31d9a9cc0e1ad0d4db76ca9f4add388cef95bd', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '02abef6f7550594481eff44ae5e332d74ba61138', name: "logo" }, h("a", { key: '084b9f9f88c68933f0d038b655833c5ba0117498', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: '197989ea9849d9143024538c26b2678c6220e6d4', name: "overflow" }))), h("div", { key: 'ce2b19cb76ff12eda8c4589ac188749ba3684c9f', class: "gn__menu-bar-wrapper" }, h("div", { key: '11c7745248090f0163a2a505fb5a20f56fdd11d2', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'a797355c5204357100884bf865d5ffb58967028e', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '0bf6477cd3dac4dd6cb0f55dd3ff3a313b55fb84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '8dbb4a02f736efcddc019aa602953ff41c5eb15e', name: "logo" }, h("a", { key: '5d60a835f364ada7ae8d8ee7b608df9b75443c26', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '130b8ce4dfd708a8a884aa172a6b7c1a7defa204', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e4f69fca3d5a6700de16f8102dbf916a0b0e4d77', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '40033ff956c6f0b59ef5f569a00e56efc8e0f8df', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '32b4e3be46dae8578c4adf038bda844d3bf4b8b9', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '17ee6f5b011997b09148d8a09749931ae0e681f0', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '800b2d3b1343a6d09a8951b753742e6eb5731648', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'a8eb120a2268645e17935d5dd86e8cf9de550866', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '4270c5dc3e334ca906debe763771acc1dc4dd82b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7f39cd0f1338a1124a6c59c18774c62d7b3e36e7', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '503d51cd5f72ad19203bab7939230f8f7a7f4bd3', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '0a82c9022cb41265d8cb969057404ad32d7179f2', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'ee9b0742d2e8e6c3e51d35de68141bedb3677081', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'df0da7c60f0ced0d52eeb84360a7215d7247a5e7', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '83bdee0aca807f594505c657a4b1aeaabdb8a3d0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
                 this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '33472cd1d86a17143253aed1a7924b05343614a7', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'f88f3bcef70a7a29410d77ba849862ffc9db6562', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '075a4615d1715d941bd2368db97375f614867477', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '5194af389122625d1209e25208de761fa15dd7e3' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '2f7a3e620d015b8d56044d048ed49ee6a6e29ba4', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '528da1d7293b7589ce34a00007e83cf00ac71547', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f1556946842927cd1aa65a97346bc3ce1886311e', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'b7d9e741bdbcde586cb1734961b628de31aca103' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
             this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
                     searchInsight.sendClick({
                         index: this.activeIndex.index,
@@ -506,10 +510,10 @@ export class GlobalNav {
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: 'c9dec204a82019869cc9b8086f07cfbfdf309f15', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: '986773d6af8b1b50000db8c428c2f25f07298a3c', class: "gn__cart" }, h("nano-icon-button", { key: '0afee86e684d4136e729955d28444a6c8a27838f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6305ad69d802aeda9a132ca204baf8b7b3aa17be', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '88e617068d30bfa4ca09f6b122109d9a3539088b', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: 'acceaf54481ab87951bbd9384f079c9d37fa0663', class: "gn__cart" }, h("nano-icon-button", { key: '6bed2b6a26492c9e7e4fe205b9ef94845360327d', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '4034d7828876c1237b1869abeb977e258d55006b', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '7c8b5194019e9b8346f6e0e927cff22ccf8b3e2e', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '213396f31494cb46551fd6839b95bf4155982a57', part: "site-search-results" }, h("slot", { key: 'd9471b1379c08106453aef43c0e590cf272a425f' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: 'f52e45cccc15b745f54978bc140816847dc66560', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '0dd16b2bb789a66f3ef5b214ea54609aedad3ae4', part: "site-search-results" }, h("slot", { key: '3a86b5ee10f5da29d3da8d06b2b6ad36f27e725c' }))))));
     }
     static get is() { return "nano-global-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -915,7 +919,24 @@ export class GlobalNav {
     }
     static get methods() {
         return {
-            "toggleOverflowMenu": {
+            "openOverflowMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually open the overflow menu",
+                    "tags": []
+                }
+            },
+            "closeOverflowMenu": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -928,7 +949,7 @@ export class GlobalNav {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Manually toggle open or close the overflow menu",
+                    "text": "Manually close the overflow menu",
                     "tags": []
                 }
             },

package/dist/collection/components/masked-overflow/masked-overflow.css

@@ -159,8 +159,7 @@
 .onav--horizontal .onav__items {
   flex-direction: row;
 }
-.onnav--has-indicator .onav--horizontal .onav__items::before {
-  content: "";
+.onav--horizontal .onav__items::before {
   inline-size: 100%;
   block-size: var(--indicator-track-size);
   inset-block-end: 0;
@@ -186,6 +185,7 @@
 }
 .onav--vertical .onav__nav {
   max-block-size: 100%;
+  min-inline-size: 100%;
   display: flex;
 }
 .onav--vertical .onav__scroller {
@@ -220,8 +220,7 @@
   flex-direction: column;
   inline-size: fit-content;
 }
-.onnav--has-indicator .onav--vertical .onav__items::before {
-  content: "";
+.onav--vertical .onav__items::before {
   block-size: 100%;
   inline-size: var(--indicator-track-size);
   inset-inline-start: 0;

package/dist/collection/components/masked-overflow/masked-overflow.js

@@ -7,8 +7,10 @@ import { getDirectChildren, getOffset } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
 import { scrollIntoView } from "../../utils/scroll";
 /**
- * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
- * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+ * A container for content that can horizontally or vertically scroll
+ *
+ * @version 4.0.0
+ * @status stable
  *
  * @slot - Default slot to place items.
  *
@@ -325,7 +327,7 @@ export class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '95eee57fdc7f8527fbbe4b6d9fbf6f48d5764ac8', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'fb8fb3b5946a4ce7b8b144df89541012c44d9aff', part: "base", class: {
+        return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -333,13 +335,13 @@ export class MaskedOverflow {
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
-                'onnav--hide-scrollbars': this.hideScrollbars,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '23da0af8abf895a7bb2b158965f9ef955e798e0c', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '28573455243fe42c090dbcdb569d376a7f9d5eb3', part: "scroll-button scroll-button-prev", class: {
+                'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: 'b1c4626550336c2723ef68df1f4b5a3034c383d5', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'c751fd48b83e957c156448841939df286dff0c37', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '059962178e1c122d95ebbcfb8b98114b0507d3df', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '6cc5fe32c97aa75700feea39cd6d77d18c968c80', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'fe8b6ee6f86a8d96a2ed8a79f2ebd292a6432e95', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/collection/components/more-less/more-less.js

@@ -4,7 +4,10 @@
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
- * A simple component to show more or less elements.
+ * Show more or less from a collection of items.
+ *
+ * @version 6.0.0
+ * @status stable
  *
  * @slot less - a button displayed when all fewer are shown. When clicked will show elements
  * @slot more - a button displayed when all items are shown. When clicked will hide elements
@@ -62,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '7f46f40188321a9cd630f92e0722c386f8f150cd', class: "nano-more-less" }, h("slot", { key: 'f0cb809863400df4431e6781c1f119563fea95b6', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'fccb42c61cbef50e41ca19ec572bceb4cb3257be', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'ec04633371ae61f4a33131ab8bfe98a7e408150f', name: "less" }, h("button", { key: 'f7382a01305934711d7f6471369aa29523f99d9d', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '49834d5d379bcc71bfd228cbad3becf4343160ac', class: "nano-more-less" }, h("slot", { key: '4cbea5f74ddd512cacfc2c65c35ce0cd9fbfee00', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'd8b9b8135f3789705f18793dd8262bcebb38f2cb', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '564f67099d59d520fbf9a5c40f6f14e681346eff', name: "less" }, h("button", { key: 'a5aa9c0a0eda6b6dda1c72288b18668d4028eec5', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }