npm - @nanoporetech-digital/components - Versions diffs - 7.9.2 → 8.0.0-alpha.0 - Mend

@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1783) hide show

package/dist/components/nano-accordion.js CHANGED Viewed

@@ -1,15 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
 import { g as getDirectChildren } from './dom.js';
-import { c as createColorClasses } from './theme.js';
-const accordionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";
-const NanoAccordionStyle0 = accordionCss;
+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 Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
+const NanoAccordion$1 = /*@__PURE__*/ proxyCustomElement(class NanoAccordion extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -18,15 +16,11 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
     }
     itemOpened;
     get el() { return this; }
-    /**
-     * Fires when accordion elements toggle
-     */
+    /** Fires when accordion elements toggle */
     nanoToggle;
-    /**
-     * Color to use from the color palette.
-     */
-    color;
     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'));
@@ -36,7 +30,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             else
                 this.itemOpened = i;
         });
-        this.nanoToggle.emit();
+        this.nanoToggle.emit(event.target);
     }
     onClosedHandler(event) {
         event.stopPropagation();
@@ -44,17 +38,12 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.nanoToggle.emit();
     }
     render() {
-        return (h(Host, { key: '60b444ced7959370455b575616c5e0cfe45ae85d', class: {
-                ...createColorClasses(this.color),
-                [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number',
-                'nano-accordion': true,
-            } }, h("slot", { key: '53cb7e62571e9bc8e88a958a4b1a62550c4d797c' })));
+        return h("slot", { key: 'ec9331ce0686c1234021e58af9a456aa267e9247' });
     }
-    static get style() { return NanoAccordionStyle0; }
+    static get style() { return accordionCss; }
 }, [1, "nano-accordion", {
-        "color": [1],
         "itemOpened": [32]
-    }, [[0, "nanoOpened", "onToggleHandler"], [0, "nanoClosed", "onClosedHandler"]]]);
+    }, [[0, "nanoOpen", "onToggleHandler"], [0, "nanoClose", "onClosedHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
@@ -63,15 +52,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "nano-accordion":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, Accordion);
+                customElements.define(tagName, NanoAccordion$1);
             }
             break;
     } });
 }
-const NanoAccordion = Accordion;
+const NanoAccordion = NanoAccordion$1;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAccordion, defineCustomElement };
-//# sourceMappingURL=nano-accordion.js.map

package/dist/components/nano-alert.js CHANGED Viewed

@@ -1,17 +1,17 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { M as Modal } from './modal.js';
 import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll.js';
-import { c as createColorClasses } from './theme.js';
 import { h, t as transformTag } from './renderer.js';
+import { b as blurActiveElement } from './active-element.js';
+import { H as HasSlotController } from './slot.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
-const alertCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*),.alert__icon::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";
-const NanoAlertStyle0 = alertCss;
+const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
 let toastStackTr;
 let toastStackTl;
@@ -41,13 +41,17 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.nanoHide = createEvent(this, "nanoHide", 7);
         this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
     }
-    autoHideTimeout;
     panel;
     overlay;
     modal;
     originalTrigger;
     goingToHide = false;
     goingToShow = false;
+    autoHideTimeout;
+    remainingTimeInterval;
+    countdownAnimation;
+    countdownElement;
+    slotCtrl = new HasSlotController(this, '[default]', 'heading', 'title', 'footer');
     isModal = false;
     isToast = false;
     isShowing = false;
@@ -64,13 +68,19 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     }
     /** Set to true to make the alert closable. */
     closable = false;
-    /** The color to use from the application's color palette. */
+    /**
+     * The color to use from the application's color palette.
+     * @deprecated Use `theme` instead.
+     */
     color;
+    /** The color to use from the application's color palette.  */
+    theme;
     /**
      * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
      * alert before it closes (e.g. moves the mouse over it), the timer will restart.
      */
     duration = Infinity;
+    remainingTime = this.duration;
     handleDurationChange() {
         this.restartAutoHide();
     }
@@ -85,6 +95,11 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             return;
         document.body.prepend(this.host);
     }
+    /**
+     * Enables a countdown that indicates the remaining time the alert will be displayed.
+     * Typically used to indicate the remaining time before a whole app refresh.
+     */
+    countdown = true;
     /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */
     nanoShow;
     /** Emitted after the alert opens and all transitions are complete. */
@@ -119,8 +134,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             this.goingToShow = false;
         }
         if (this.duration < Infinity) {
-            clearTimeout(this.autoHideTimeout);
-            this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+            this.restartAutoHide();
         }
     }
     /**
@@ -138,8 +152,10 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         }
         this.goingToHide = true;
         this.open = false;
+        blurActiveElement(this.host);
         requestAnimationFrame(() => (this.goingToHide = false));
         clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
     }
     /**
      * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
@@ -152,6 +168,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     async toast(position = 'tr') {
         this.isToast = true;
         return new Promise((resolve) => {
+            this.handleCountdownChange();
             let toastStack;
             switch (position) {
                 case 'tl':
@@ -167,7 +184,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
                     toastStack = toastStackTr;
                     break;
             }
-            if (!toastStack.parentElement) {
+            if (!toastStack.isConnected) {
                 document.body.appendChild(toastStack);
             }
             toastStack.appendChild(this.host);
@@ -194,8 +211,14 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.isModal = true;
         this.label = label;
         return new Promise((resolve) => {
-            if (!document.body.contains(this.host)) {
-                document.body.appendChild(this.host);
+            let foundHoisted = false;
+            for (const child of document.body.children) {
+                if (child.tagName === 'NANO-ALERT' && child === this.host) {
+                    foundHoisted = true;
+                }
+            }
+            if (!foundHoisted) {
+                document.body.append(this.host);
             }
             this.modal.activate();
             lockBodyScrolling(this.host);
@@ -226,8 +249,41 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             });
         });
     }
-    handleMouseMove = () => {
-        this.restartAutoHide();
+    handleCountdownChange() {
+        if (this.open && this.duration < Infinity && this.countdown) {
+            const start = '100%';
+            const end = '0';
+            this.countdownAnimation = this.countdownElement.animate([{ width: start }, { width: end }], {
+                duration: this.duration,
+                easing: 'linear',
+            });
+        }
+    }
+    restartAutoHide() {
+        this.handleCountdownChange();
+        clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
+        if (this.open && this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+            this.remainingTime = this.duration;
+            this.remainingTimeInterval = window.setInterval(() => {
+                this.remainingTime -= 100;
+            }, 100);
+        }
+    }
+    handleMouseEnter = () => {
+        this.countdownAnimation?.pause();
+        clearTimeout(this.autoHideTimeout);
+        clearInterval(this.remainingTimeInterval);
+    };
+    handleMouseLeave = () => {
+        if (this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
+            this.remainingTimeInterval = window.setInterval(() => {
+                this.remainingTime -= 100;
+            }, 100);
+            this.countdownAnimation?.play();
+        }
     };
     handleCloseClick = () => {
         this.hide();
@@ -249,12 +305,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')
             this.hide();
     };
-    restartAutoHide = () => {
-        clearTimeout(this.autoHideTimeout);
-        if (this.open && this.duration < Infinity) {
-            this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
-        }
-    };
     connectedCallback() {
         this.modal = new Modal(this.host);
         this.handleHoistChange();
@@ -279,39 +329,45 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
                 'alert--modal': !!this.isModal,
                 'alert--showing': this.isShowing,
                 'alert--nodismiss': this.noDismiss,
-            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__content" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("div", { class: "alert__close" }, h("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), h("div", { class: "alert__footer" }, h("slot", { name: "footer" }))));
+            }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__main", part: "main" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "content", class: "alert__content", "aria-live": this.isModal ? 'assertive' : 'polite' }, this.slotCtrl.has('heading') && (h("div", { class: "alert__heading" }, h("slot", { name: "heading" }))), this.slotCtrl.has('title') && (h("div", { class: "alert__title" }, h("slot", { name: "title" }))), this.slotCtrl.has('[default]') && (h("div", { class: "alert__body" }, h("slot", null))), this.slotCtrl.has('footer') && (h("div", { part: "footer", class: "alert__footer" }, h("slot", { name: "footer" })))), this.closable && (h("div", { class: "alert__close", part: "close" }, h("nano-icon-button", { iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), this.duration < Infinity && [
+            h("div", { role: "timer", class: "alert__timer" }, this.remainingTime),
+            this.countdown ? (h("div", { class: "alert__countdown" }, h("div", { ref: (e) => (this.countdownElement = e), class: "alert__countdown-elapsed" }))) : (''),
+        ]));
     };
     render() {
-        return (h(Host, { key: '0279c18aae2396ad177089cc75566e883d90e13c', class: { ...createColorClasses(this.color), 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
-            h("div", { key: 'bf3e853b342bdd95fa760ce9318c280fc7763ac6', part: "overlay", class: {
+        return (h(Host, { key: '5e937f25c5029d3e2ec86f0d240b5f4336de9a51', class: { 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
+            h("div", { key: 'b21cc499555d44cde911efa637662363cb296c71', part: "overlay", class: {
                     alert__overlay: true,
                     'alert__overlay--open': this.open,
                 }, ref: (div) => (this.overlay = div) }),
-            h("div", { key: 'e1834c979a55eff1022d7c768d5d1f698afcfade', class: "alert__modal-wrap", onClick: (e) => {
+            h("div", { key: '6e3a1c5b34abc9324a3802927dc95a66ade63b18', class: "alert__modal-wrap", onClick: (e) => {
                     if (!e.target.classList.contains('alert__modal-wrap'))
                         return;
                     this.noDismiss = true;
                     setTimeout(() => (this.noDismiss = false), 250);
-                } }, h(this.Panel, { key: 'd30e62e22c1ea9b97b57590d9fe926bb0623b893' })),
-        ], !this.isModal && h(this.Panel, { key: 'cd72c23c11e27ea221ca7ab3327288f34cd8a597' })));
+                } }, h(this.Panel, { key: 'ca7f6ae3565e6a4249ccef33d868a166141b01e0' })),
+        ], !this.isModal && h(this.Panel, { key: 'f401f5e740a3af18c298b8ad4492b872b611a1f2' })));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
         "duration": ["handleDurationChange"],
         "hoist": ["handleHoistChange"]
     }; }
-    static get style() { return NanoAlertStyle0; }
+    static get style() { return alertCss; }
 }, [1, "nano-alert", {
         "open": [1540],
         "closable": [516],
         "color": [513],
+        "theme": [513],
         "duration": [2],
         "hoist": [4],
+        "countdown": [516],
         "isModal": [32],
         "isToast": [32],
         "isShowing": [32],
         "label": [32],
         "noDismiss": [32],
+        "remainingTime": [32],
         "show": [64],
         "hide": [64],
         "toast": [64],
@@ -354,5 +410,3 @@ const NanoAlert = Alert;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAlert, defineCustomElement };
-//# sourceMappingURL=nano-alert.js.map

package/dist/components/nano-algolia-filter.js CHANGED Viewed

@@ -1,13 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, Host } from '@stencil/core/internal/client';
 import { C as ComponentStore } from './component-store.js';
 import { h } from './renderer.js';
 import { W as Wormhole } from './algolia-data.js';
-const algoliaFilterCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";
-const NanoAlgoliaFilterStyle0 = algoliaFilterCss;
+const algoliaFilterCss = ":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:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";
 const AlgoliaFilter = /*@__PURE__*/ proxyCustomElement(class AlgoliaFilter extends HTMLElement {
     constructor() {
@@ -282,10 +281,10 @@ const AlgoliaFilter = /*@__PURE__*/ proxyCustomElement(class AlgoliaFilter exten
             this.showFilter = true;
     }
     render() {
-        return (h(Host, { key: '81d343828cf739b8e85cab7f56fa48ad1c3fc34e', class: {
+        return (h(Host, { key: 'c1d229a764c08c92c4f25093d98bf51e1b4f6bcf', class: {
                 'show-filter': this.showFilter,
                 'nano-filter': true,
-            } }, h("div", { key: '909831f2c2e4605163227a188df31b3b130fd7d1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '854cff616358aaee8cb6594db55a4a49d4322b74', name: "output" }))));
+            } }, h("div", { key: '21f66d2dcd03e19aa46face1220459dce136ccd1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '3ec8e00ee477c651e48e96db7888f0a751573a3e', name: "output" }))));
     }
     static get watchers() { return {
         "value": ["valueSet"],
@@ -294,7 +293,7 @@ const AlgoliaFilter = /*@__PURE__*/ proxyCustomElement(class AlgoliaFilter exten
         "tplRenderFn": ["tplUpdate"],
         "indexResults": ["handleFilterChange"]
     }; }
-    static get style() { return NanoAlgoliaFilterStyle0; }
+    static get style() { return algoliaFilterCss; }
 }, [1, "nano-algolia-filter", {
         "filterName": [1, "filter-name"],
         "value": [1025],
@@ -343,5 +342,3 @@ const NanoAlgoliaFilter = AlgoliaFilter;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAlgoliaFilter, defineCustomElement };
-//# sourceMappingURL=nano-algolia-filter.js.map

package/dist/components/nano-algolia-pagination.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { W as Wormhole } from './algolia-data.js';
@@ -59,9 +59,9 @@ const AlgoliaPagination = /*@__PURE__*/ proxyCustomElement(class AlgoliaPaginati
         this.updateContent();
     }
     render() {
-        return (h(Host, { key: '12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8', class: {
+        return (h(Host, { key: '488332e371953208f90e754ebdceff321795177c', class: {
                 'show-pagination': this.show,
-            } }, h("div", { key: '70dc4683c476084346dc69246acb2092719d0b60', ref: (div) => (this.outputEle = div) }, h("slot", { key: '04f51858db37f6a25cae5fead48c5016a4159944', name: "output" }))));
+            } }, h("div", { key: '9f24519df07b4f022297a5e6f1ace601efc71e2b', ref: (div) => (this.outputEle = div) }, h("slot", { key: '363d87eb251ba2db6e6c3346e32f5dcb8b8d3a0c', name: "output" }))));
     }
     static get watchers() { return {
         "currentPage": ["currentPageChange"],
@@ -107,5 +107,3 @@ const NanoAlgoliaPagination = AlgoliaPagination;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAlgoliaPagination, defineCustomElement };
-//# sourceMappingURL=nano-algolia-pagination.js.map

package/dist/components/nano-algolia-results.js CHANGED Viewed

@@ -1,9 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, readTask, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
-import { S as SearchChangeEvent, W as Wormhole } from './algolia-data.js';
+import { W as Wormhole, S as SearchChangeEvent } from './algolia-data.js';
 const AlgoliaResults = /*@__PURE__*/ proxyCustomElement(class AlgoliaResults extends HTMLElement {
     constructor() {
@@ -197,10 +197,10 @@ const AlgoliaResults = /*@__PURE__*/ proxyCustomElement(class AlgoliaResults ext
         }
     }
     render() {
-        return (h(Host, { key: 'e5124d09c5619d77f6debca38bd5059ecfb9dce5', class: {
+        return (h(Host, { key: '14939adaa742d13214faf5375692737010467a7c', class: {
                 'show-results': this.showResults,
                 'nano-results': true,
-            } }, h("div", { key: '773924ac30cd4e8c57d6767f96a8c9173d6e9ec6', class: "default" }, h("slot", { key: '5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d' })), h("div", { key: '3a716202a7364efa1eeb90ea525670c4da5fc7e1', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'af5860bd4dc7e2472d18f1b86175f5772bac426b', name: "start-output" }), h("slot", { key: '7b57ec404897b71f60a06ca661558624d5db1ac0', name: "result-output" }), h("div", { key: 'cff39c4ed229e1081f9160d8a447d56841209b4e', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: '79c19d45895d5f7a285e0beb640f84251d37b558', name: "end-output" }))));
+            } }, h("div", { key: '8153995d81af56df593694ca7902e93f6efb0565', class: "default" }, h("slot", { key: '60e2c4a10cdf5f6fbd609972114be5d04ccfe3f0' })), h("div", { key: 'cf589b852a52ffc84b8d9dd48c193603e733f02e', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'aad8bfb81edca4af57503bc80b4eac5cbe69a97e', name: "start-output" }), h("slot", { key: '30e848bcf8b1d0f03d57b65cb805abcca87aefd5', name: "result-output" }), h("div", { key: '8663b935facbe62a5b30d4e6446cc978083369d7', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: 'b8652a198cd7fefe5a127b8bc9387305971be922', name: "end-output" }))));
     }
     static get watchers() { return {
         "results": ["addContentIndex", "resultsChange"],
@@ -258,5 +258,3 @@ const NanoAlgoliaResults = AlgoliaResults;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAlgoliaResults, defineCustomElement };
-//# sourceMappingURL=nano-algolia-results.js.map

package/dist/components/nano-algolia.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { A as Algolia, d as defineCustomElement$1 } from './algolia.js';
@@ -7,5 +7,3 @@ const NanoAlgolia = Algolia;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAlgolia, defineCustomElement };
-//# sourceMappingURL=nano-algolia.js.map

package/dist/components/nano-animation.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
@@ -1212,7 +1212,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: '72df233f997594e16f18fbe6009d5bc3849e8248', class: "nano-animation" }, h("slot", { key: 'cc651438b3697408a642e28369b77efe7c781716', ref: (slot) => {
+        return (h(Host, { key: '69ede16e4ecb0155cdfc63a56e04ca38c5e56412', class: "nano-animation" }, h("slot", { key: '73a9ec636c4fe8b72570906bce645529b4343606', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }
@@ -1282,5 +1282,3 @@ const NanoAnimation = NanoAnimation$1;
 const defineCustomElement = defineCustomElement$1;
 export { NanoAnimation, defineCustomElement };
-//# sourceMappingURL=nano-animation.js.map

package/dist/components/nano-avatar.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NanoAvatar extends Components.NanoAvatar, HTMLElement {}
+export const NanoAvatar: {
+    prototype: NanoAvatar;
+    new (): NanoAvatar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-avatar.js ADDED Viewed

@@ -0,0 +1,9 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { N as NanoAvatar$1, d as defineCustomElement$1 } from './avatar.js';
+const NanoAvatar = NanoAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+export { NanoAvatar, defineCustomElement };

package/dist/components/nano-badge.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NanoBadge extends Components.NanoBadge, HTMLElement {}
+export const NanoBadge: {
+    prototype: NanoBadge;
+    new (): NanoBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-badge.js ADDED Viewed

@@ -0,0 +1,9 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { N as NanoBadge$1, d as defineCustomElement$1 } from './badge.js';
+const NanoBadge = NanoBadge$1;
+const defineCustomElement = defineCustomElement$1;
+export { NanoBadge, defineCustomElement };

package/dist/components/nano-breadcrumb.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NanoBreadcrumb extends Components.NanoBreadcrumb, HTMLElement {}
+export const NanoBreadcrumb: {
+    prototype: NanoBreadcrumb;
+    new (): NanoBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;