@nanoporetech-digital/components 8.3.2 → 8.4.0

package/dist/cjs/nano-step-accordion.cjs.entry.js

@@ -0,0 +1,101 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DGttnXif.js');
+var renderer = require('./renderer-B9M1kXq8.js');
+
+const stepAccordionCss = ":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}.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)}";
+
+const NanoStepAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.nanoStepActive = index.createEvent(this, "nanoStepActive", 7);
+    }
+    get host() { return index.getElement(this); }
+    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;
+            index.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 (renderer.h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
+                step: true,
+                'step--active': index$1 === 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) }, renderer.h("span", { class: "step-icon", slot: "icon-start" }, index$1 + 1), renderer.h("div", { class: "step-header", slot: "label" }, renderer.h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (renderer.h(index.Fragment, null, renderer.h("span", null, " - "), renderer.h("span", { class: "step-change" }, "Change")))), renderer.h("span", { slot: "icon-end" }), renderer.h("div", { class: "step-content" }, renderer.h("slot", { name: `step-${index$1}` })))))));
+    }
+    static get watchers() { return {
+        "activeStep": ["handleActiveStepChange"]
+    }; }
+};
+NanoStepAccordion.style = stepAccordionCss;
+
+exports.nano_step_accordion = NanoStepAccordion;

package/dist/cjs/nano-step-breadcrumb.cjs.entry.js

@@ -0,0 +1,133 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DGttnXif.js');
+var renderer = require('./renderer-B9M1kXq8.js');
+var constructibleStyle = require('./constructible-style-BsHBb9au.js');
+var style = require('./style-Du-L-qMa.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.nanoStepActive = index.createEvent(this, "nanoStepActive", 7);
+    }
+    get host() { return index.getElement(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;
+            index.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();
+        style.addGlobalStylesheetToShadow(this.host.shadowRoot);
+    }
+    ControlTag = ({ step, index, }) => {
+        const Tag = step.enabled ? (step.href ? 'A' : 'BUTTON') : 'SPAN';
+        return (renderer.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;
+                }
+            } }, renderer.h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), renderer.h("span", { class: "step-item-title" }, step.title)));
+    };
+    render() {
+        const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
+        return (renderer.h(index.Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, renderer.h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, renderer.h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, renderer.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,
+            } }, renderer.h("span", { key: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, renderer.h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, renderer.h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, this.steps.map((step, index) => (renderer.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;
+                }
+            } }, renderer.h("span", { class: "step-item-icon", slot: "icon-start" }, index + 1), renderer.h("span", { class: "step-item-title" }, step.title))))))))));
+    }
+    static get watchers() { return {
+        "activeStep": ["handleActiveStepChange"],
+        "steps": ["handleStepsChange"]
+    }; }
+};
+__decorate([
+    constructibleStyle.ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
+    __metadata("design:type", Object)
+], NanoStepBreadcrumb.prototype, "styles", void 0);
+NanoStepBreadcrumb.style = stepBreadcrumbCss;
+
+exports.nano_step_breadcrumb = NanoStepBreadcrumb;

package/dist/cjs/nano-sticker.cjs.entry.js

@@ -607,12 +607,12 @@ const Sticker = class {
         this.hasBootstrapped = false;
     }
     render() {
-        return (renderer.h(index.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" }, renderer.h("div", { key: 'db32b41390349cec6975dfad25b6b99ddadf5758', class: {
+        return (renderer.h(index.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" }, renderer.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) }, renderer.h("div", { key: 'b1e54c375552b7460fb6991f1c476bf9f73c997f', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'a2ee69ba9e39d796d832340777f61deb21c2f5d1' })))));
+            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],

package/dist/cjs/nano-tab-content.cjs.entry.js

@@ -24,10 +24,10 @@ const NanoTabContent = class {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (renderer.h(index.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 (renderer.h(index.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,
-            } }, renderer.h("div", { key: '47b383859162b6a64518273a9057464de1d37479', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '3f908fec081c956f9ffd8d7de5e0f45b5e193a8c' }))));
+            } }, renderer.h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
     }
 };
 NanoTabContent.style = tabContentCss;

package/dist/cjs/nano-tab.cjs.entry.js

@@ -46,12 +46,12 @@ const NanoTab = class {
         }
     };
     render() {
-        return (renderer.h(index.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" }, renderer.h("div", { key: 'fca6ace8b5fc9c0142fcd04d70cb475323d8ef9d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (renderer.h(index.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" }, renderer.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,
-            } }, renderer.h("slot", { key: '3693ff8719b24c34db9018941daab7c840434502', name: "start" }), renderer.h("div", { key: 'c792fce22a28175e32f7e0b23a1a62f799016c76', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '76b725cd050993d377bf5c7208ce5b7fdf224136' })), renderer.h("slot", { key: 'f7bd50a43bb64b67b2ce181bf9215ada4c0ccd12', name: "end" }), this.closable && !this.disabled && (renderer.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" })))));
+            } }, renderer.h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), renderer.h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), renderer.h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (renderer.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" })))));
     }
 };
 NanoTab.style = tabCss;

package/dist/cjs/nano-table.cjs.entry.js

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

package/dist/cjs/{page-dots-Clb2QknR.js → page-dots-BLPta5z5.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-C576PTmo.js');
+var nanoSlides_entry = require('./nano-slides-C73bSG0h.js');
 require('./index-DGttnXif.js');
 require('./renderer-B9M1kXq8.js');
 

package/dist/cjs/{table.worker-DxRLPmU9.js → table.worker-BeE8kdSf.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-DFEflpc4.js');
+var nanoDataTable_entry = require('./nano-data-table-BHQIpW0N.js');
 require('./index-DGttnXif.js');
 require('./renderer-B9M1kXq8.js');
 require('./math-DIjJ3V87.js');

package/dist/collection/collection-manifest.json

@@ -59,6 +59,8 @@
     "components/sortable/sortable.js",
     "components/spinner/spinner.js",
     "components/split-pane/split-pane.js",
+    "components/step-accordion/step-accordion.js",
+    "components/step-breadcrumb/step-breadcrumb.js",
     "components/sticker/sticker.js",
     "components/table/table.js",
     "components/tabs/tab-content.js",

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

@@ -7,31 +7,50 @@ import { getDirectChildren } from "../../utils/dom";
  * @status stable
  */
 export class NanoAccordion {
-    itemOpened;
+    indexOpened;
+    elementOpened;
     el;
+    /** Force one details element to always be open */
+    alwaysOpen = false;
     /** Fires when accordion elements toggle */
     nanoToggle;
     onToggleHandler(event) {
         if (event.target?.tagName !== 'NANO-DETAILS')
             return;
         event.stopPropagation();
-        const items = getDirectChildren(this.el, transformTag('nano-details')) ||
-            this.el.querySelectorAll(transformTag('nano-details'));
+        const items = getDirectChildren(this.el, transformTag('nano-details'));
         items.forEach((item, i) => {
             if (item !== event.target)
                 item.open = false;
-            else
-                this.itemOpened = i;
+            else if (item === event.target) {
+                this.indexOpened = i;
+            }
         });
-        this.nanoToggle.emit(event.target);
+        this.nanoToggle.emit({ element: event.target, index: this.indexOpened });
     }
     onClosedHandler(event) {
         event.stopPropagation();
-        this.itemOpened = null;
-        this.nanoToggle.emit();
+        if (this.alwaysOpen) {
+            let foundOpen;
+            const items = getDirectChildren(this.el, transformTag('nano-details'));
+            items.forEach((item) => {
+                if (item !== event.target && item.open) {
+                    foundOpen = true;
+                }
+            });
+            if (!foundOpen) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (this.elementOpened === event.target) {
+            this.elementOpened = null;
+            this.indexOpened = null;
+            this.nanoToggle.emit();
+        }
     }
     render() {
-        return h("slot", { key: 'ec9331ce0686c1234021e58af9a456aa267e9247' });
+        return h("slot", { key: 'a16b340b9312672847ee022b2beb6767fc0dfb86' });
     }
     static get is() { return "nano-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -45,9 +64,28 @@ export class NanoAccordion {
             "$": ["accordion.css"]
         };
     }
-    static get states() {
+    static get properties() {
         return {
-            "itemOpened": {}
+            "alwaysOpen": {
+                "type": "boolean",
+                "attribute": "always-open",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force one details element to always be open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
         };
     }
     static get events() {
@@ -62,8 +100,8 @@ export class NanoAccordion {
                     "text": "Fires when accordion elements toggle"
                 },
                 "complexType": {
-                    "original": "HTMLNanoDetailsElement",
-                    "resolved": "HTMLNanoDetailsElement",
+                    "original": "{\n    element: HTMLNanoDetailsElement;\n    index: number;\n  }",
+                    "resolved": "{ element: HTMLNanoDetailsElement; index: number; }",
                     "references": {
                         "HTMLNanoDetailsElement": {
                             "location": "global",

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "references": {
                         "Breadcrumb": {
                             "location": "local",
-                            "path": "/builds/x6knoJK1/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/FKs_t1C_/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

package/dist/collection/components/data-table/table.js

@@ -6,6 +6,7 @@ import { h, transformTag } from "../../utils/renderer";
 import { cyrb53 } from "../../utils/math";
 import { debounce } from "../../utils/throttle";
 import { findScrollParent, isInViewport } from "../../utils/scroll";
+import { perMark } from "../../utils/performance";
 import { TableColHead } from "./table.header";
 import { TableRow, TableHeadFootRow } from "./table.row";
 import { TableCell } from "./table.cell";
@@ -13,19 +14,6 @@ import { CSSNAMESPACE } from "./table.constants";
 import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from "./table.store";
 import { TablePinService } from "./table.pin-service";
 const measurePerf = false;
-function perMark(name, end = false) {
-    if (!performance || !measurePerf)
-        return;
-    if (end) {
-        performance?.mark('end' + name);
-        performance?.measure(name, 'start' + name, 'end' + name);
-        const entries = performance?.getEntriesByName(name);
-        console.info(entries[entries.length ? entries.length - 1 : 0]);
-    }
-    else {
-        performance?.mark('start' + name);
-    }
-}
 let id = 0;
 /**
  * Enables the search, filter and sort of tabular data.

package/dist/collection/components/details/details.js

@@ -24,8 +24,9 @@ import { HasSlotController } from "../../utils/slot";
  * @part icon - the wrapper around both start and end icons
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
- * @part body - the wrapper around content
- * @part content - the main content wrapper
+ * @part body - the main body block
+ * @part content-wrapper - the wrapper around the content
+ * @part content - the main content
  */
 export class NanoDetails {
     mo;
@@ -141,7 +142,9 @@ export class NanoDetails {
             if (this.stateChanging)
                 return;
             for (const change of changes) {
-                if (change.type === 'attributes' && change.attributeName === 'open') {
+                if (change.type === 'attributes' &&
+                    change.attributeName === 'open' &&
+                    !this.disabled) {
                     this.open = this.detailsEl.open;
                 }
             }
@@ -169,13 +172,13 @@ export class NanoDetails {
         }
     }
     render() {
-        return (h(Host, { key: '4109b3670c8ccd41ddac5eb03e799e1c149ad7c8', class: "nano-details" }, h("details", { key: '6af0af31042e2bb156e835604b4f79edad79b7ce', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: '1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480', class: "nano-details" }, h("details", { key: '22659218ba7d1ec936523ff33c7ed2a1efb2af74', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 disabled: this.disabled,
-            } }, h("summary", { key: '6589a9dd56e93246177f8c7b6f5e46f279e661c1', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '7d794f0724f7c43bf4747edd1e402be32ec28129', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '4e55292c3018d9bbcb4b65e2f69002bf0cb5ae43', name: "icon-start" }))), h("div", { key: 'd3ab36f253ae4f062fe2aa998c483648b382b7ca', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '6bd0a9630c2d657915811164bdcbf0696609d4e5', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'b38f81f25f6d224da5afa1d701621993dba3d723', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            } }, h("summary", { key: '3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '4a8de08dca34823e162019e2d4dddef2ed2c123d', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: 'cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a', name: "icon-start" }))), h("div", { key: '0b11c544cfbb5852dfeae66b482154f1780a2569', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '5470af7891318c513870c473a8ad1f501174f51b', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '45960716eeec5d5ad08b63fd536608fcd33ab8f2', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
             !this.slotCtrl.has('icon-end') &&
             !this.slotCtrl.has('icon-expand') &&
-            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'be8d56737badde36a3a88f797f411065e5a59ae4', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: '90d0bba50dc77e45c5861ac74188aba8005980fc', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'ecc6e416fb9bc20d0d2feb99c7ed899104338c1e', class: "content-wrapper" }, h("div", { key: '18115d6264604535817c700ab7eea7265f4d7b3b', part: "content", class: "content", id: "content" }, h("slot", { key: 'bfdb6bda88ba909bbedec0e000b6fef5c1d1895c' })))))));
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '5357b61cb197dc4a1ceccf415a34defdfeb6b290', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'aa7f850c8415c2cd40fd7a965fba8eb98fca62b5', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'e98e6a68e4c15525b4377d4229fb4a1855650732', part: "content-wrapper", class: "content-wrapper" }, h("div", { key: '6710e302f7e2a5987ccd6703ea3c6cc0bf705d23', part: "content", class: "content", id: "content" }, h("slot", { key: '891525e66383979e621787f766bcfbcea78a9630' })))))));
     }
     static get is() { return "nano-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-validator/field-validator.js

@@ -507,7 +507,9 @@ export class FieldValidator {
             this._valid = this.activeForm.checkValidity();
             this.internalValidate = false;
         }
-        this.nanoPayloadChange.emit(this._store.state);
+        setTimeout(() => {
+            this.nanoPayloadChange.emit(this._store.state);
+        }, 20);
     };
     /**
      * Handles nano field value changes and passes to store
@@ -600,7 +602,7 @@ export class FieldValidator {
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (h(Host, { key: '145b307561c5a2a35d5b6b6d88d03c88ba8a41b4', class: "nano-field-validator" }, this.userForm && h("slot", { key: '2a16d6a8f32afe2c22522e240e117ccf8446edc5' }), !this.userForm && (h("form", { key: 'c72a5b25d958c97d28c78279b05fa7a3643a994e', ref: (f) => (this.activeForm = f) }, h("slot", { key: '7983e9fc33115b5448b980cbcba0940163521db8' })))));
+        return (h(Host, { key: 'bb60437392e410d528560b9a8a63c58b13f25495', class: "nano-field-validator" }, this.userForm && h("slot", { key: '7e9ff598dce291e80b53638453a8544398382cdd' }), !this.userForm && (h("form", { key: '68241c190268172ff742839ff57a5ac1ff66ca8e', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'e89427bf668eb47217accdb2844d14cb4c3abd36' })))));
     }
     static get is() { return "nano-field-validator"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/footer/footer.css

@@ -104,13 +104,13 @@
   padding-inline: var(--horizontal-padding);
   padding-block-end: var(--vertical-padding);
 }
-:host .middle-center a {
+:host .middle-centre a {
   color: inherit;
 }
-:host .middle-center a:hover {
+:host .middle-centre a:hover {
   color: var(--nano-color-primary-1000);
 }
-:host .middle-center a:focus-visible {
+:host .middle-centre a:focus-visible {
   outline: var(--nano-focus-ring);
   outline-offset: var(--nano-focus-ring-offset);
 }
@@ -120,7 +120,7 @@
   flex-direction: column;
 }
 :host .middle-start,
-:host .middle-center,
+:host .middle-centre,
 :host .middle-end {
   align-items: center;
 }
@@ -128,7 +128,7 @@
   display: flex;
   justify-content: flex-start;
 }
-:host .middle-center {
+:host .middle-centre {
   display: flex;
   justify-content: center;
   gap: var(--icon-gap-md);
@@ -179,7 +179,7 @@
     display: flex;
     flex-direction: column;
   }
-  :host .middle-center {
+  :host .middle-centre {
     flex-wrap: wrap;
   }
   :host .middle-end {
@@ -191,7 +191,7 @@
     align-items: center;
   }
   :host .middle-start,
-  :host .middle-center,
+  :host .middle-centre,
   :host .middle-end {
     justify-content: center;
   }