@nanoporetech-digital/components 8.3.2 → 8.4.1

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

@@ -0,0 +1,231 @@
+: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 {
+  /**
+  * @prop --background: the background color of the step breadcrumb. Defaults to var(--nano-color-base-0).
+  */
+  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);
+}

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

@@ -0,0 +1,222 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+var __decorate = (this && this.__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 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { forceUpdate, Host, Build, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+import { ConstructibleStyle } from "../../utils/constructible-style";
+import { addGlobalStylesheetToShadow } from "../../utils/style";
+/**
+ * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ */
+export class NanoStepBreadcrumb {
+    host;
+    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 is() { return "nano-step-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step-breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step-breadcrumb.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 {
+            "calculatedWidth": {}
+        };
+    }
+    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": "{\n    step: Step;\n    index: number;\n  }",
+                    "resolved": "{ step: Step; index: number; }",
+                    "references": {
+                        "Step": {
+                            "location": "global",
+                            "id": "global::Step"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStepChange"
+            }, {
+                "propName": "steps",
+                "methodName": "handleStepsChange"
+            }];
+    }
+}
+__decorate([
+    ConstructibleStyle({ cacheKeyProperty: 'calculatedWidth' }),
+    __metadata("design:type", Object)
+], NanoStepBreadcrumb.prototype, "styles", void 0);

package/dist/collection/components/sticker/sticker.js

@@ -603,12 +603,12 @@ export class Sticker {
         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 is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -227,10 +227,10 @@ export class NanoTable {
         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 is() { return "nano-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tab-content.js

@@ -24,10 +24,10 @@ export class NanoTabContent {
         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 is() { return "nano-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab.js

@@ -51,12 +51,12 @@ export class NanoTab {
         }
     };
     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 is() { return "nano-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -227,10 +227,10 @@ export class Tooltip {
             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 is() { return "nano-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/constructible-style.js

@@ -33,9 +33,8 @@ export function ConstructibleStyle(opts = {}) {
             opts.cacheKeyProperty = propertyKey;
         }
         const { componentWillLoad, render, componentWillRender } = target;
-        if (!componentWillLoad)
-            console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
         if (supportsConstructibleStylesheets && !Build.isServer) {
+            // adds a constructible stylesheet to the component
             const addStylesheet = (instance) => {
                 if (!instance[opts.cacheKeyProperty] ||
                     (cacheKeys.get(instance) &&
@@ -64,6 +63,7 @@ export function ConstructibleStyle(opts = {}) {
             };
         }
         else {
+            // adds a style element to the component
             target.render = function () {
                 const cssText = typeof this[propertyKey] === 'function'
                     ? this[propertyKey]()

package/dist/collection/utils/performance.js

@@ -0,0 +1,17 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+const measurePerf = true;
+export 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);
+    }
+}

package/dist/components/accordion.js

@@ -0,0 +1,80 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { t as transformTag, h } from './renderer.js';
+import { g as getDirectChildren } from './dom.js';
+
+const accordionCss = ":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:contents}";
+
+const NanoAccordion = /*@__PURE__*/ proxyCustomElement(class NanoAccordion extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nanoToggle = createEvent(this, "nanoToggle", 7);
+    }
+    indexOpened;
+    elementOpened;
+    get el() { return this; }
+    /** 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'));
+        items.forEach((item, i) => {
+            if (item !== event.target)
+                item.open = false;
+            else if (item === event.target) {
+                this.indexOpened = i;
+            }
+        });
+        this.nanoToggle.emit({ element: event.target, index: this.indexOpened });
+    }
+    onClosedHandler(event) {
+        event.stopPropagation();
+        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: 'a16b340b9312672847ee022b2beb6767fc0dfb86' });
+    }
+    static get style() { return accordionCss; }
+}, [257, "nano-accordion", {
+        "alwaysOpen": [4, "always-open"]
+    }, [[0, "nanoOpen", "onToggleHandler"], [0, "nanoClose", "onClosedHandler"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoAccordion);
+            }
+            break;
+    } });
+}
+
+export { NanoAccordion as N, defineCustomElement as d };