@nanoporetech-digital/components 8.3.2 → 8.4.1

package/dist/collection/components/menu-drawer/menu-drawer.js

@@ -147,14 +147,14 @@ export class MenuDrawer {
         }
     }
     render() {
-        return (h(Host, { key: '39da1804ff710702cacbbadf0d8bb1d47c2d732b', class: {
+        return (h(Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', class: {
                 open: this.open,
                 'secondary-open': this.secondaryOpen,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '90b0e1a831d49af7d81fe5ca2da977a697c08ee7', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: '37d6443befe1a93169e15a8becbefe974c8a8d1c', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '7373abf5ec1ef567407abedc4b786ae3d51c9e93', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '6f243a3de7b59072d43fac86c1d9c8acd62ec9d4', class: "head" }, h("button", { key: '6bf443330190314bf84583fc540cd2cb821f4f53', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '87025c0165c2e61bd51724ef15e8e1b110ded3e4', name: "light/arrow-right-to-line" }), h("span", { key: '6bfd0162936fc4ce0546194a227960ce9dd718a1', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '07039af321133321dedceaaff462472bd22b4f12' }), this.slotCtrl.has('foot') && (h("div", { key: '252fe22caae99dc7ba850207a92f9390665bf3c0', class: "foot" }, h("slot", { key: 'f142bd0852c6fa01fcc3fba2de5528d1d96d03b7', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
     }
     static get is() { return "nano-menu-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'fbb60961810fe863ebebc729cbe4ecb955608c82', class: "nano-more-less" }, h("slot", { key: '6823f661e722640622d421c96244cd4a0eee1953', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: '134fadd869470a34cbd21b06d9cc2c85fc4e614c', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '62544d207ac12171da4905e3006e26113b1b0189', name: "less" }, h("button", { key: '54badba3d736faf5b2b686ec989998a4319c5001', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', 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, ")")))) : (''),
         ]));
     }

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

@@ -192,20 +192,20 @@ export class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'df7dc8a018d6d786e47134a2b9896a4cf2e87074', class: "nano-rating" }, h("label", { key: '7d9861c77bd39e075b1d9f75b24a5390efcbb42e', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'f2406ae04779c885c9968513d4e33d1b00ca8bde', name: "label" }, this.label)), h("input", { key: '50b8e5c1ef6b55ae88b48e4cf3d3ef83bb6a33f6', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (h(Host, { key: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), h("div", { key: '1089a70fecbf338efbf3b2f5a8624c2c3c5ce56c', class: "rating-wrap" }, h("div", { key: '6552b5f9466c1ec0df3e69d9543d693fa90829d4', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', 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: '1a741e52552009d9fe705aac22abbfa63b49e196', 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: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', 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: 'd6368fb64cac9837f38bc00a06b63f2ef3ad3a74', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', 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,

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

@@ -230,13 +230,13 @@ export class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: 'e5019ccd47c55fddcffd4fa5ff151b0d1db5465f', class: {
+        return (h(Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, h("slot", { key: '6117c97943bf1ca7368946dd17e356e2d866bbf3' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!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" })),

package/dist/collection/components/select/select.js

@@ -705,30 +705,30 @@ export class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '83841b192717e301d098e3886cb3d44f7c517232', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '0648eef02c3e5fc9891e3aee3baa81eae2fc2b5e', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: 'c0a938ef46d167bbe5351913b1a73fcc39659b1d', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '36dcb0e4ef701eaf17ddf03f8f64cf83dee35b07', ...wrapOptions, class: {
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
                 'has-helper': this.hasHelperSlot,
                 'is-open': this.hasOpened,
                 masked: this.mask,
-            } }, h(FormControl, { key: '704c73a69c5a3f661ed8926fc8980b952b9169be', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'ef05cb7727be6b7c0ab67c7e9ebb8d1387903eb3', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '3a58835bf8f059658238a717a8f71b896fe0b599', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'b74a7cedd698e6739ff3c81b4ef12710726b1a4d', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'e7469592db6a1248d8cf32f2c8fd36364045ac49', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, h(FormControl, { key: '6adbd4bf79d59de4a8d8f20c6dc287b9f70c9e5c', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'eaf182a6e691f3490a2e26522be8daef9f3c0e58', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'd08b3d345fde15bd92a9d3237c9f0265b39a1cbb', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '29eb562d57d5af570132b502652fbf0109563481', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'c7135aca51ac7e0b3f23fc63b8e8fef3d5d0d4a8', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
             // @ts-expect-error - this bubbles from the nano-dropdown
             onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '50c0203767871b9a1dcf87d9b6e51a98cf62c72f', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'bfd78ea1f905f6d512e36f43c0e7bf417769d7ba', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '67b82a4e86e472fb9bcf5c4173a9b202ea9402c5' }))), h("select", { key: 'e9a9ab79d35f38e1a20e98594ee1c0d11945eb1f', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: 'c1bfe32d20443e5be164a400e5553e30488f26be', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'aad3f8699ac6e9538055437e30d040ba686b0c46', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: 'bbbc2b303f78dcdc9aaf19c78279099b389159c4' }))), h("select", { key: '87e9d612386dc3b0baf0a79b6de750d22043c967', 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 &&

package/dist/collection/components/slides/slide.js

@@ -38,7 +38,7 @@ export class Slide {
         });
     }
     render() {
-        return (h(Host, { key: 'a426e75ad5b607ac12e53db8183e08f89a10057a', class: "nano-slide" }, h("slot", { key: '792f06fe463ae49d981d7beceb68e4b7b49beff3' })));
+        return (h(Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
     }
     static get is() { return "nano-slide"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slides/slides.js

@@ -502,15 +502,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '25fe656149129885383046b7f2cb81ecc965db13', class: "nano-slides" }, h("div", { key: '84d9f878b91454a12311ffc5203d49a243fb9c66', class: {
+        return (h(Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'b975dcadc6d7b7b5b7e915980527eba3bf740165', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'a9b13e8e0c8808617c694953e3fef74a57d719a8' })), h("div", { key: '9caacd27973cc67740145365ab7a10c75ab44219', class: "ui-extras" }, h("slot", { key: 'ad80afb5ddbcc54b10310a4e115403fee8dda215', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sortable/sortable.js

@@ -732,7 +732,7 @@ export class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: 'd6d4f0ad6adf2a3f5e1d36b757e116b58e5b55b4', class: "nano-sortable" }, h("div", { key: 'd2cfcad28acfb052acbc6093dddfc247f5369bcf', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '079bc29ba8c2f26163b7e3a23f0107f78db7b3fb' })));
+        return (h(Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
     }
     static get is() { return "nano-sortable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/step-accordion/step-accordion.css

@@ -0,0 +1,138 @@
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }/** Typography */
+:host {
+  display: block;
+}
+
+.nano-details {
+  --padding: 0;
+  --btn-bg-color--hover: transparent;
+  --btn-bg-color--active: transparent;
+  border: none;
+  margin-block-end: var(--nano-spacing-sm);
+}
+.nano-details::part(base) {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 1fr;
+  gap: var(--nano-spacing-sm) 1.625rem;
+}
+.nano-details.step--grid-working::part(base)::before {
+  content: "";
+  display: block;
+  grid-column: 1;
+  grid-row: 2;
+  inline-size: 1rem;
+  min-block-size: 1rem;
+  border-inline-end: 2px solid var(--nano-color-neutral-300);
+}
+.nano-details.step--grid-working::part(base)::after {
+  content: "";
+  grid-column: 1;
+  grid-row: 2;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  place-self: end end;
+  translate: -50% 0;
+  inset-inline-start: calc(50% - 2.5px);
+  position: relative;
+  border-inline-end: 2px solid var(--nano-color-neutral-300);
+  border-block-end: 2px solid var(--nano-color-neutral-300);
+  rotate: 45deg;
+}
+.nano-details:last-of-type::part(base)::before {
+  min-block-size: 0;
+}
+.nano-details:last-of-type::part(base)::after {
+  display: none;
+}
+.nano-details::part(header) {
+  grid-column: 1/-1;
+  grid-row: 1;
+  display: inline-flex;
+  gap: var(--nano-spacing-sm);
+}
+.nano-details::part(body) {
+  grid-column: 2;
+  grid-row: 2;
+}
+.nano-details::part(content-wrapper) {
+  padding: 1px;
+}
+.nano-details.step--grid-not-working::part(header) {
+  padding-block-end: var(--nano-spacing-sm);
+}
+.nano-details.step--grid-not-working::part(body) {
+  padding: 0 0 0 2.5625rem;
+}
+
+.step .step-header {
+  display: inline-flex;
+  gap: var(--nano-spacing-sm);
+  align-items: center;
+}
+.step .step-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border-radius: var(--nano-border-radius-circle);
+  background-color: transparent;
+  color: var(--nano-color-neutral-1400);
+  border: 1px solid var(--nano-color-neutral-300);
+}
+.step.step--complete .step-icon {
+  background-color: var(--nano-color-success-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+.step[open] .step-icon {
+  background-color: var(--nano-color-primary-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+.step .step-change {
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-loose);
+  text-decoration: underline;
+  color: var(--nano-color-primary-1200);
+}

package/dist/collection/components/step-accordion/step-accordion.js

@@ -0,0 +1,190 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Fragment, forceUpdate, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+/**
+ * Presents an accordion interface for a multi-step process,
+ * allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ *
+ * @slot - Dynamic slots. Use `slot="step-0"`, `slot="step-1"`, etc. for each step.
+ */
+export class NanoStepAccordion {
+    host;
+    nanoDetails;
+    gridWorking = true;
+    /** The currently active step, zero-based index */
+    activeStep = 0;
+    handleActiveStepChange(newValue, oldValue) {
+        if (!this.steps[newValue]?.enabled)
+            this.activeStep = oldValue;
+        else {
+            const event = this.nanoStepActive.emit({
+                index: newValue,
+                step: this.steps[newValue],
+            });
+            if (event.defaultPrevented) {
+                this.activeStep = oldValue;
+            }
+        }
+    }
+    _steps = [];
+    stepProxyHandler = {
+        set: (target, prop, value) => {
+            target[prop] = value;
+            forceUpdate(this.host);
+            return true;
+        },
+    };
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps() {
+        return this._steps;
+    }
+    set steps(value) {
+        this._steps = [];
+        // improved devX - use a proxy to re-render when step properties change
+        value.forEach((step) => {
+            const proxyStep = new Proxy(step, this.stepProxyHandler);
+            this._steps.push(proxyStep);
+        });
+    }
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive;
+    handleToggle(event) {
+        if (event.detail.index === this.activeStep)
+            return;
+        this.activeStep = event.detail.index;
+    }
+    // A dirty great hack for Firefox - it doesn't support grid layout in `<details>`
+    // so we use this to apply different styles based on whether grid is working or not
+    isDetailsGridWorking(detailsEl) {
+        // Create a test element with explicit grid placement
+        const testEl = document.createElement('div');
+        testEl.style.gridColumn = '2';
+        testEl.style.height = '1px';
+        testEl.style.width = '1px';
+        testEl.style.visibility = 'hidden';
+        detailsEl.appendChild(testEl);
+        const parentX = detailsEl.getBoundingClientRect().x;
+        const testX = testEl.getBoundingClientRect().x;
+        detailsEl.removeChild(testEl);
+        // If testEl moved horizontally, grid is in effect
+        return Math.abs(testX - parentX) > 1;
+    }
+    componentDidLoad() {
+        if (!this.nanoDetails)
+            return;
+        const detailsEl = this.nanoDetails.shadowRoot.querySelector('details');
+        if (detailsEl) {
+            this.gridWorking = this.isDetailsGridWorking(detailsEl);
+        }
+    }
+    render() {
+        return (h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
+                step: true,
+                'step--active': index === this.activeStep,
+                'step--complete': step.complete,
+                'step--grid-working': this.gridWorking,
+                'step--grid-not-working': !this.gridWorking,
+                'step--disabled': !step.enabled,
+            }, ref: (el) => (this.nanoDetails = el) }, h("span", { class: "step-icon", slot: "icon-start" }, index + 1), h("div", { class: "step-header", slot: "label" }, h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (h(Fragment, null, h("span", null, " - "), h("span", { class: "step-change" }, "Change")))), h("span", { slot: "icon-end" }), h("div", { class: "step-content" }, h("slot", { name: `step-${index}` })))))));
+    }
+    static get is() { return "nano-step-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeStep": {
+                "type": "number",
+                "attribute": "active-step",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently active step, zero-based index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "steps": {
+                "type": "unknown",
+                "attribute": "steps",
+                "mutable": false,
+                "complexType": {
+                    "original": "Step[]",
+                    "resolved": "Step[]",
+                    "references": {
+                        "Step": {
+                            "location": "global",
+                            "id": "global::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of steps, each with a title, completion status, and enabled state"
+                },
+                "getter": true,
+                "setter": true,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "gridWorking": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nanoStepActive",
+                "name": "nanoStepActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active step changes. Prevent default to cancel the change"
+                },
+                "complexType": {
+                    "original": "{ index: number; step: Step }",
+                    "resolved": "{ index: number; step: Step; }",
+                    "references": {
+                        "Step": {
+                            "location": "global",
+                            "id": "global::Step"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStepChange"
+            }];
+    }
+}