@nanoporetech-digital/components 7.9.0 → 7.9.2

package/hydrate/index.js

@@ -7991,14 +7991,18 @@ class Checkbox {
         if (!this.input)
             return;
         this.input.checked = this.checked;
-        if (this.inputType === 'radio' && this.name && this.checked) {
+        if (this.inputType === 'radio' &&
+            this.name &&
+            this.checked &&
+            this.host.isConnected) {
             const form = this.host.closest('form');
+            const root = this.host.getRootNode();
             let ctrls;
             if (form) {
                 ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
             }
             else {
-                ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
+                ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
             }
             ctrls.map((el) => {
                 if (el !== this.host)
@@ -8177,14 +8181,14 @@ class Checkbox {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
+        return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
+            }, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
@@ -8724,7 +8728,7 @@ class DataList {
         // forceUpdate(this.host);
     }
     watchTypeChange() {
-        if (!this.connectedInput)
+        if (!this.connectedInput || this.disabled)
             return;
         let dwConfig = { closeOnSelect: false };
         let autocompleteType = 'both';
@@ -9067,18 +9071,18 @@ class DataList {
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (h(Host, { key: '967dd82369e855a7f9edf70cb17737d36efc1828', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'e6a6afd64373143835f8e12f9349e839abaf63e1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: 'd98ed992c76129d5f1a1b5cb3c2a7e4c0c385118', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'bd1a92afc347e6e3a9d63695bd56fb76b3a06464', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'b06ac3c64408a331819e3326fb72adfdf5c07b91', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '846d438e2314582af9a962289ab0f908857083fa', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: '58683fab717385e8dff20602683964327093f660', name: "list-top" }), h("slot", { key: '949fb5e02b13f878cde4d90a9848fcb18b35ea2c' }), h("slot", { key: 'ed9bccc1520dc103e1673fae32094b05245ab704', name: "internal-opts" }), h("slot", { key: 'aca33681c6282a17386c9934b93cfce6622c08e1', name: "list-bottom" })), h("nano-menu", { key: '4de595aded1e1f586a8d11d21bf6151758da9f9d', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: 'f306217f59daac3e67e41bd5dbbf2a3681d56007', name: "list-top" }), h("slot", { key: '0174164d6761691413ead34af1436ee370849d98' }), h("slot", { key: 'fdcaea628c1920017a4d250b125769d422d306dc', name: "internal-opts" }), h("slot", { key: 'bcb453282e86a98805fa0c8f357b389110764252', name: "list-bottom" })), h("nano-menu", { key: '61b91937f773707bd6369649d5761951459b7991', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '0da09df34253d8bd83bdd263e25f40b9075d30a7', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'ee9d3f67a82cc6a2e0c25efb0c79e031995d0587', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '433a4643f759e5391b13ee757628c6f196cb8060', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'caafff3ec17cba31fdc5092d96da166f64541776', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -9086,6 +9090,7 @@ class DataList {
         "options": ["handleOptionsChange"],
         "type": ["watchTypeChange"],
         "connectedInput": ["watchTypeChange", "manageInputEvents"],
+        "disabled": ["watchTypeChange"],
         "selected": ["watchActvOptChange"],
         "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
         "hasNoResult": ["manageCanOpen"],
@@ -22760,6 +22765,8 @@ class Select {
         this.inputSearchVal = '';
     };
     removeValue = (toFind) => {
+        if (this.readonly || this.disabled)
+            return;
         if (!this.multiple || !this.value.length)
             return;
         if (!toFind)
@@ -22992,7 +22999,7 @@ class Select {
             disabled,
             clearControl: this.clearSelect,
         }))(this);
-        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'a8b87fdaaa377377dc9a9c3a6b4937ae854f43bb', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 ...createColorClasses(this.color),
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
@@ -23004,15 +23011,13 @@ class Select {
                 'has-clr-btn': this.clearSelect,
                 masked: this.mask,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+            } }, h(FormControlWrap, { key: '6bb32ca83cc5d25f65510f938dbe79b43fa5c108', ...wrapOptions }, h(FormControl, { key: 'c66fc73cb316399ecd7cf26eb1f34d30b40b4692', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: '5b26becd4bea50f2bbbd6545490517520bf54bf2', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'b01c76ac8e10f63b7bba076799fb70583f8f0b8f', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'f030e89b72b594dde16b701c9ca07c65542162b2', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), h("nano-datalist", { key: '74dbc317d620eb13e4b3b82559fb8f19f6b3bda5', disabled: this.disabled || this.readonly, onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
-            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
-            this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { key: '3aba3b3160c0ab202782d54fbdb5c8fba8575319', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'fee57aeb5bcce9ad2c30d4e208c11cf7aaebabc6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '922baf9809f37affb5c956f74b85bf727c4e40f4' })), h("select", { key: '9cdfe75682e7c7f4e9cd56123f07f8c195d2d47c', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
@@ -23021,7 +23026,7 @@ class Select {
             }))));
     }
     multipleValues(labelId, moreId, helperEndId) {
-        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
+        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readonly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
         if (!this.value.length)
             return input;
         const toReturn = [];

package/hydrate/index.mjs

@@ -7987,14 +7987,18 @@ class Checkbox {
         if (!this.input)
             return;
         this.input.checked = this.checked;
-        if (this.inputType === 'radio' && this.name && this.checked) {
+        if (this.inputType === 'radio' &&
+            this.name &&
+            this.checked &&
+            this.host.isConnected) {
             const form = this.host.closest('form');
+            const root = this.host.getRootNode();
             let ctrls;
             if (form) {
                 ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
             }
             else {
-                ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
+                ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
             }
             ctrls.map((el) => {
                 if (el !== this.host)
@@ -8173,14 +8177,14 @@ class Checkbox {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
+        return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
+            }, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
@@ -8720,7 +8724,7 @@ class DataList {
         // forceUpdate(this.host);
     }
     watchTypeChange() {
-        if (!this.connectedInput)
+        if (!this.connectedInput || this.disabled)
             return;
         let dwConfig = { closeOnSelect: false };
         let autocompleteType = 'both';
@@ -9063,18 +9067,18 @@ class DataList {
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (h(Host, { key: '967dd82369e855a7f9edf70cb17737d36efc1828', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'e6a6afd64373143835f8e12f9349e839abaf63e1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: 'd98ed992c76129d5f1a1b5cb3c2a7e4c0c385118', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'bd1a92afc347e6e3a9d63695bd56fb76b3a06464', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'b06ac3c64408a331819e3326fb72adfdf5c07b91', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '846d438e2314582af9a962289ab0f908857083fa', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: '58683fab717385e8dff20602683964327093f660', name: "list-top" }), h("slot", { key: '949fb5e02b13f878cde4d90a9848fcb18b35ea2c' }), h("slot", { key: 'ed9bccc1520dc103e1673fae32094b05245ab704', name: "internal-opts" }), h("slot", { key: 'aca33681c6282a17386c9934b93cfce6622c08e1', name: "list-bottom" })), h("nano-menu", { key: '4de595aded1e1f586a8d11d21bf6151758da9f9d', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: 'f306217f59daac3e67e41bd5dbbf2a3681d56007', name: "list-top" }), h("slot", { key: '0174164d6761691413ead34af1436ee370849d98' }), h("slot", { key: 'fdcaea628c1920017a4d250b125769d422d306dc', name: "internal-opts" }), h("slot", { key: 'bcb453282e86a98805fa0c8f357b389110764252', name: "list-bottom" })), h("nano-menu", { key: '61b91937f773707bd6369649d5761951459b7991', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '0da09df34253d8bd83bdd263e25f40b9075d30a7', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'ee9d3f67a82cc6a2e0c25efb0c79e031995d0587', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '433a4643f759e5391b13ee757628c6f196cb8060', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'caafff3ec17cba31fdc5092d96da166f64541776', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -9082,6 +9086,7 @@ class DataList {
         "options": ["handleOptionsChange"],
         "type": ["watchTypeChange"],
         "connectedInput": ["watchTypeChange", "manageInputEvents"],
+        "disabled": ["watchTypeChange"],
         "selected": ["watchActvOptChange"],
         "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
         "hasNoResult": ["manageCanOpen"],
@@ -22756,6 +22761,8 @@ class Select {
         this.inputSearchVal = '';
     };
     removeValue = (toFind) => {
+        if (this.readonly || this.disabled)
+            return;
         if (!this.multiple || !this.value.length)
             return;
         if (!toFind)
@@ -22988,7 +22995,7 @@ class Select {
             disabled,
             clearControl: this.clearSelect,
         }))(this);
-        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'a8b87fdaaa377377dc9a9c3a6b4937ae854f43bb', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 ...createColorClasses(this.color),
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
@@ -23000,15 +23007,13 @@ class Select {
                 'has-clr-btn': this.clearSelect,
                 masked: this.mask,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+            } }, h(FormControlWrap, { key: '6bb32ca83cc5d25f65510f938dbe79b43fa5c108', ...wrapOptions }, h(FormControl, { key: 'c66fc73cb316399ecd7cf26eb1f34d30b40b4692', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: '5b26becd4bea50f2bbbd6545490517520bf54bf2', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'b01c76ac8e10f63b7bba076799fb70583f8f0b8f', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'f030e89b72b594dde16b701c9ca07c65542162b2', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), h("nano-datalist", { key: '74dbc317d620eb13e4b3b82559fb8f19f6b3bda5', disabled: this.disabled || this.readonly, onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
-            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
-            this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { key: '3aba3b3160c0ab202782d54fbdb5c8fba8575319', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'fee57aeb5bcce9ad2c30d4e208c11cf7aaebabc6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '922baf9809f37affb5c956f74b85bf727c4e40f4' })), h("select", { key: '9cdfe75682e7c7f4e9cd56123f07f8c195d2d47c', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
@@ -23017,7 +23022,7 @@ class Select {
             }))));
     }
     multipleValues(labelId, moreId, helperEndId) {
-        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
+        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readonly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
         if (!this.value.length)
             return input;
         const toReturn = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "7.9.0",
+  "version": "7.9.2",
   "sideEffects": false,
   "repository": {
     "type": "git",