@nanoporetech-digital/components 8.3.2 → 8.4.1

package/dist/components/nano-step-breadcrumb.js

@@ -0,0 +1,181 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { C as ConstructibleStyle } from './constructible-style.js';
+import { a as addGlobalStylesheetToShadow } from './style.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './menu.js';
+import { d as defineCustomElement$2 } from './nav-item.js';
+
+const stepBreadcrumbCss = ":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}}:host{display:block;--background:var(--nano-color-base-0)}.step-wrapper{container-type:inline-size}.step-list.desktop{display:flex;flex-direction:row;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0;position:relative;z-index:1}.step-list.desktop::before{content:\"\";display:block;flex-grow:1;block-size:1px;background-color:var(--nano-color-neutral-300);position:absolute;inset-block-start:50%;z-index:-1;inset-inline-start:0;inline-size:100%}.step-item-wrapper{flex:0 1 auto;display:inline-flex;align-items:center;cursor:pointer}.step-item-wrapper:last-of-type{flex:0 1 auto}.step-item-wrapper:last-of-type .step-item{padding-inline-end:0}.step-item-wrapper:first-of-type::before{display:none}.step-item-wrapper:first-of-type .step-item{padding-inline-start:0}.step-item-wrapper::before{content:\"\";grid-column:2;grid-row:1;inline-size:0.4rem;block-size:0.4rem;place-self:center end;inset-block-start:0.5px;position:relative;border-inline-end:1px solid var(--nano-color-neutral-300);border-block-end:1px solid var(--nano-color-neutral-300);rotate:-45deg}:dir(rtl) .step-item-wrapper::after{rotate:45deg}.step-item{all:unset;display:inline-flex;align-items:center;gap:var(--nano-spacing-sm);background-color:var(--background);padding:0 var(--nano-spacing-sm);position:relative}.step-item:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.step-item.step-item--disabled{cursor:not-allowed}.step-item.step-item--disabled>*{opacity:0.5}.step-item-icon{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;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-item--complete .step-item-icon{background-color:var(--nano-color-success-1000);color:var(--nano-color-base-0);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-primary-1000);color:var(--nano-color-base-0);border:none}.step-dropdown{inline-size:100%;min-inline-size:300px}.step-trigger{all:unset;display:inline-flex;gap:var(--nano-spacing-md);align-items:center;inline-size:100%;cursor:pointer}.step-trigger-text{display:flex;flex-direction:column}.step-trigger-now{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance;color:var(--nano-color-neutral-1400)}.step-trigger-next{font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--nano-color-neutral-1000)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-primary-1000);transition:var(--nano-transition-x-fast) rotate}[open] .step-trigger-icon{rotate:180deg}.step-progress-circle{--size:64px;--thickness:4px;inline-size:var(--size);min-inline-size:var(--size);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative}.step-progress-circle::before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);mask:radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%)}.step-progress-title{font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);font-weight:var(--nano-font-weight-bold);white-space:nowrap;color:var(--nano-color-neutral-1000)}.step-progress-title strong{color:var(--nano-color-neutral-1400)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NanoStepBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoStepBreadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nanoStepActive = createEvent(this, "nanoStepActive", 7);
+    }
+    get host() { return this; }
+    calculatedWidth;
+    cacheKey;
+    /** 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;
+            }
+        }
+    }
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive;
+    _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);
+        });
+    }
+    handleStepsChange() {
+        const numberOfSteps = this._steps.length;
+        const charLength = this._steps.reduce((acc, step) => acc + step.title.length, 0);
+        this.cacheKey = 'step-breadcrumb-' + numberOfSteps + charLength;
+        // text characters + icons (3 x 1.5rem) + arrows (2 x 1.875rem) + gaps (3 * 20px)
+        this.calculatedWidth = `calc(${charLength}ch + ${numberOfSteps * 1.5}rem + ${(numberOfSteps - 1) * 1.875}rem + ${numberOfSteps * 10}px)`;
+    }
+    styles = () => {
+        const css = /* css */ `@container (width > ${this.calculatedWidth}) {
+      .step-list.mobile.${this.cacheKey} { display: none; }
+      .step-list.desktop.${this.cacheKey} { display: flex; }
+    }
+    @container (width <= ${this.calculatedWidth}) {
+      .step-list.mobile.${this.cacheKey} { display: block; }
+      .step-list.desktop.${this.cacheKey} { display: none; }
+    }`;
+        return css;
+    };
+    componentWillLoad() {
+        this.handleStepsChange();
+        if (Build.isBrowser)
+            addGlobalStylesheetToShadow(this.host.shadowRoot);
+    }
+    ControlTag = ({ step, index, }) => {
+        const Tag = step.enabled ? (step.href ? 'A' : 'BUTTON') : 'SPAN';
+        return (h(Tag, { href: step.href || undefined, class: {
+                'step-item': true,
+                'step-item--active': index === this.activeStep,
+                'step-item--complete': step.complete,
+                'step-item--disabled': !step.enabled,
+            }, onClick: () => {
+                if (step.enabled) {
+                    this.activeStep = index;
+                }
+            } }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title)));
+    };
+    render() {
+        const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
+        return (h(Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, h("div", { key: '9d60be986e00fdd6814a910641cf94ef97fb2eed', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+                '--value': '' + (this.activeStep + 1),
+                '--max': '' + this.steps.length,
+            } }, h("span", { key: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
+                'step-item-mobile': true,
+                'step-item-mobile step-item--active': index === this.activeStep,
+                'step-item-mobile step-item--complete': step.complete,
+            }, disabled: !step.enabled, key: index, onClick: () => {
+                if (step.enabled) {
+                    this.activeStep = index;
+                }
+            } }, h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), h("span", { class: "step-item-title" }, step.title))))))))));
+    }
+    static get watchers() { return {
+        "activeStep": ["handleActiveStepChange"],
+        "steps": ["handleStepsChange"]
+    }; }
+    static get style() { return stepBreadcrumbCss; }
+}, [257, "nano-step-breadcrumb", {
+        "activeStep": [1026, "active-step"],
+        "steps": [6160],
+        "calculatedWidth": [32]
+    }, undefined, {
+        "activeStep": ["handleActiveStepChange"],
+        "steps": ["handleStepsChange"]
+    }]);
+__decorate([
+    ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
+    __metadata("design:type", Object)
+], NanoStepBreadcrumb$1.prototype, "styles", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-step-breadcrumb", "nano-dropdown", "nano-icon", "nano-menu", "nano-nav-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-step-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoStepBreadcrumb$1);
+            }
+            break;
+        case "nano-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nano-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-nav-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const NanoStepBreadcrumb = NanoStepBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoStepBreadcrumb, defineCustomElement };

package/dist/components/nano-tab-content.js

@@ -24,10 +24,10 @@ const NanoTabContent$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabContent e
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'f182a99dab031220a40b2c5125d3229b8bacca1c', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: '47b383859162b6a64518273a9057464de1d37479', part: "base", class: "nano-tab-content" }, h("slot", { key: '3f908fec081c956f9ffd8d7de5e0f45b5e193a8c' }))));
+            } }, h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
     }
     static get style() { return tabContentCss; }
 }, [257, "nano-tab-content", {

package/dist/components/nano-tab.js

@@ -49,12 +49,12 @@ const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLEle
         }
     };
     render() {
-        return (h(Host, { key: '7eca94a330509cbd3c6d232444fbcde422b755a6', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'fca6ace8b5fc9c0142fcd04d70cb475323d8ef9d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            } }, h("slot", { key: '3693ff8719b24c34db9018941daab7c840434502', name: "start" }), h("div", { key: 'c792fce22a28175e32f7e0b23a1a62f799016c76', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '76b725cd050993d377bf5c7208ce5b7fdf224136' })), h("slot", { key: 'f7bd50a43bb64b67b2ce181bf9215ada4c0ccd12', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '96f6bddd3dee12d2e8adeb7a59f98d0cfe8b9c82', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
 }, [257, "nano-tab", {

package/dist/components/nano-table.js

@@ -229,10 +229,10 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: '61967ae8d9228be1374d9a4ee4e08b286cd4dd57', class: {
+        return (h(Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: 'eca1991383ebca49f6032066078f02b62c839d6c', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'f3bcb6830439858393c1eda96d68c2c5ccadd15a', class: "nano-table__overflow" }))), h("slot", { key: '7662741dcb672f75bae03c16b5745ff4946f12f7' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/components/resize-observe.js

@@ -228,13 +228,13 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class ResizeObserve exten
         }
     }
     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/components/select.js

@@ -711,30 +711,30 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             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/components/slides.js

@@ -2961,15 +2961,15 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class Slides extends HTMLElement
         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 watchers() { return {
         "options": ["optionsChanged"],

package/dist/components/sticker.js

@@ -607,12 +607,12 @@ const Sticker = /*@__PURE__*/ proxyCustomElement(class Sticker extends HTMLEleme
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'f087d54cf3135fa7ba3d089f112157797efedaf2', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'db32b41390349cec6975dfad25b6b99ddadf5758', class: {
+        return (h(Host, { key: 'd0e4e1b0cc7c63db0389ee67b999c30347f7e16b', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '6f9852e2cfeb2e203e5dde6f71e7a042a996dd86', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'b1e54c375552b7460fb6991f1c476bf9f73c997f', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'a2ee69ba9e39d796d832340777f61deb21c2f5d1' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],

package/dist/components/tooltip.js

@@ -230,10 +230,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '88500e56b7cc79e344604bfb9ffc54f2c7884c16', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '6ff00a2034648eb7cde6bb7e7ba1bc0dcf611238', onSlotchange: this.handleSlotChange }), h("div", { key: 'e278b67db89953ef0a174b50f5aa28e101e8e83d', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '226bc518e38502e1a864c26a265abb01cfdb918e', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '94758bb18228b14884cf2be79228e554de84013f', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '45589386e68d89c21abbb50513678152e8bce9d1', onSlotchange: this.handleSlotChange }), h("div", { key: '6a76c101c35d45458f0a680753a381cc95631b87', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'd3b2cc9c9018c9a0a5dc4cef256c8b9c568cd0b4', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '6245d2904946b690c9c3ea4e902fa5d789473110', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8ddc4c34d70107ade21b7b53827d3c37e6744d2e', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1c51cdc6a7ec88107e3290b0b9750198e7176c20', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '00f090eee000e6bba713dc21a1d53c348eb94a76', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],

package/dist/esm/constructible-style-B2_GfhhS.js

@@ -0,0 +1,131 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { h, a as Host, g as getElement } from './index-BM3Om9WE.js';
+
+// import type { VNode, HTMLStencilElement } from "@stencil/core";
+const supportsConstructibleStylesheets = (() => {
+    try {
+        return !!new CSSStyleSheet();
+    }
+    catch (_e) {
+        return false;
+    }
+})();
+const cacheKeys = new WeakMap();
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+function ConstructibleStyle(opts = {}) {
+    return (target, propertyKey) => {
+        if (!opts.cacheKeyProperty) {
+            opts.cacheKeyProperty = propertyKey;
+        }
+        const { componentWillLoad, render, componentWillRender } = target;
+        if (supportsConstructibleStylesheets && true) {
+            // adds a constructible stylesheet to the component
+            const addStylesheet = (instance) => {
+                if (!instance[opts.cacheKeyProperty] ||
+                    (cacheKeys.get(instance) &&
+                        cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
+                    return;
+                cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
+                const host = getElement(instance);
+                const cssText = typeof instance[propertyKey] === 'function'
+                    ? instance[propertyKey]()
+                    : instance[propertyKey];
+                const root = (host.shadowRoot || document);
+                root.adoptedStyleSheets = [
+                    ...(root.adoptedStyleSheets || []),
+                    getOrCreateStylesheet(instance, target, cssText, opts),
+                ];
+            };
+            target.componentWillLoad = function () {
+                const willLoadResult = componentWillLoad && componentWillLoad.call(this);
+                addStylesheet(this);
+                return willLoadResult;
+            };
+            target.componentWillRender = function () {
+                const willRenderResult = componentWillRender && componentWillRender.call(this);
+                addStylesheet(this);
+                return willRenderResult;
+            };
+        }
+        else {
+            // adds a style element to the component
+            target.render = function () {
+                const cssText = typeof this[propertyKey] === 'function'
+                    ? this[propertyKey]()
+                    : this[propertyKey];
+                let renderedNode = render.call(this);
+                if (isHost(renderedNode)) {
+                    appendStyleToHost(renderedNode, target.constructor.name, cssText);
+                }
+                else {
+                    renderedNode = h(Host, null, renderedNode);
+                    if (!('attachShadow' in HTMLElement.prototype)) {
+                        appendStyleToHost(renderedNode, target.constructor.name, cssText);
+                    }
+                    else {
+                        if (!target.__constructableStyle) {
+                            const style = document.createElement('style');
+                            style.setAttribute('type', 'text/css');
+                            style.setAttribute('constructible-style', target.constructor.name);
+                            style.innerHTML = cssText;
+                            target.__constructableStyle = style;
+                            document.head.appendChild(style);
+                        }
+                    }
+                }
+                return renderedNode;
+            };
+        }
+    };
+}
+function appendStyleToHost(node, targetName, cssText) {
+    (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
+}
+function getOrCreateStylesheet(instance, target, cssText, opts) {
+    if (!target.__constructableStyle) {
+        target.__constructableStyle = {};
+    }
+    const key = instance[opts.cacheKeyProperty];
+    if (!target.__constructableStyle[key]) {
+        target.__constructableStyle[key] = new CSSStyleSheet();
+        target.__constructableStyle[key].replace(cssText);
+    }
+    return target.__constructableStyle[key];
+}
+function isHost(node) {
+    for (const prop in node) {
+        if (prop in node) {
+            if (node[prop] === Host) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function getHostChildren(node) {
+    for (const prop in node) {
+        if (prop in node) {
+            if (Array.isArray(node[prop])) {
+                return node[prop];
+            }
+        }
+    }
+}
+
+export { ConstructibleStyle as C };

package/dist/esm/{fade-D4P3XGVa.js → fade-C0NluV0K.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DcJWApi6.js';
+import { F as Flickity, u as utils } from './nano-slides-BiPGpe5F.js';
 import './index-BM3Om9WE.js';
 import './renderer-BaP2L8CT.js';
 

package/dist/esm/{fullscreen-Cfl6LvH2.js → fullscreen-Ck_w6MCZ.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity } from './nano-slides-DcJWApi6.js';
+import { F as Flickity } from './nano-slides-BiPGpe5F.js';
 import './index-BM3Om9WE.js';
 import './renderer-BaP2L8CT.js';
 

package/dist/esm/index-BM3Om9WE.js

@@ -119,10 +119,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'nano-accordion':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './nano-accordion.entry.js').then(processMod, consoleError);
                 case 'nano-alert':
                     return import(
                       /* webpackMode: "lazy" */
@@ -255,6 +251,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-split-pane.entry.js').then(processMod, consoleError);
+                case 'nano-step-accordion':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nano-step-accordion.entry.js').then(processMod, consoleError);
+                case 'nano-step-breadcrumb':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nano-step-breadcrumb.entry.js').then(processMod, consoleError);
                 case 'nano-tab':
                     return import(
                       /* webpackMode: "lazy" */
@@ -271,22 +275,18 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-table.entry.js').then(processMod, consoleError);
-                case 'nano-avatar_5':
+                case 'nano-accordion':
                     return import(
                       /* webpackMode: "lazy" */
-                      './nano-avatar_5.entry.js').then(processMod, consoleError);
-                case 'nano-details':
+                      './nano-accordion.entry.js').then(processMod, consoleError);
+                case 'nano-avatar_5':
                     return import(
                       /* webpackMode: "lazy" */
-                      './nano-details.entry.js').then(processMod, consoleError);
+                      './nano-avatar_5.entry.js').then(processMod, consoleError);
                 case 'nano-grid_2':
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-grid_2.entry.js').then(processMod, consoleError);
-                case 'nano-nav-item':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './nano-nav-item.entry.js').then(processMod, consoleError);
                 case 'nano-progress-bar':
                     return import(
                       /* webpackMode: "lazy" */
@@ -299,10 +299,18 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-datalist_3.entry.js').then(processMod, consoleError);
+                case 'nano-details':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nano-details.entry.js').then(processMod, consoleError);
                 case 'nano-date-picker_2':
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-date-picker_2.entry.js').then(processMod, consoleError);
+                case 'nano-nav-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nano-nav-item.entry.js').then(processMod, consoleError);
                 case 'nano-cta':
                     return import(
                       /* webpackMode: "lazy" */
@@ -319,18 +327,22 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-sticker.entry.js').then(processMod, consoleError);
+                case 'nano-spinner':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './nano-spinner.entry.js').then(processMod, consoleError);
                 case 'nano-dropdown_2':
                     return import(
                       /* webpackMode: "lazy" */
                       './nano-dropdown_2.entry.js').then(processMod, consoleError);
-                case 'nano-spinner':
+                case 'nano-icon-button_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './nano-spinner.entry.js').then(processMod, consoleError);
-                case 'nano-icon_3':
+                      './nano-icon-button_2.entry.js').then(processMod, consoleError);
+                case 'nano-icon':
                     return import(
                       /* webpackMode: "lazy" */
-                      './nano-icon_3.entry.js').then(processMod, consoleError);
+                      './nano-icon.entry.js').then(processMod, consoleError);
                 case 'nano-data-table':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/{lazyload-CQYknGN2.js → lazyload-DddTyM-A.js}

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils } from './nano-slides-DcJWApi6.js';
+import { F as Flickity, u as utils } from './nano-slides-BiPGpe5F.js';
 import './index-BM3Om9WE.js';
 import './renderer-BaP2L8CT.js';