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

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

@@ -1,20 +1,18 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var modal = require('./modal-lJ_KdrUQ.js');
+var scroll = require('./scroll-DXjC771e.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var activeElement = require('./active-element-DB7WRcF-.js');
+var slot = require('./slot-CBvkJee9.js');
+require('./tabbable-M9OUrhLE.js');
+require('./dom-a3wgHxbn.js');
 
-const index = require('./index-615cdb64.js');
-const modal = require('./modal-ff47c677.js');
-const scroll = require('./scroll-a3e5c6c6.js');
-const theme = require('./theme-a2f7ddf8.js');
-const renderer = require('./renderer-cd8b6098.js');
-require('./tabbable-619dc959.js');
-require('./dom-b99a1aec.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;
@@ -42,13 +40,17 @@ const Alert = class {
         this.nanoHide = index.createEvent(this, "nanoHide", 7);
         this.nanoAfterHide = index.createEvent(this, "nanoAfterHide", 7);
     }
-    autoHideTimeout;
     panel;
     overlay;
     modal;
     originalTrigger;
     goingToHide = false;
     goingToShow = false;
+    autoHideTimeout;
+    remainingTimeInterval;
+    countdownAnimation;
+    countdownElement;
+    slotCtrl = new slot.HasSlotController(this, '[default]', 'heading', 'title', 'footer');
     isModal = false;
     isToast = false;
     isShowing = false;
@@ -65,13 +67,19 @@ const Alert = class {
     }
     /** 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();
     }
@@ -86,6 +94,11 @@ const Alert = class {
             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. */
@@ -116,8 +129,7 @@ const Alert = class {
             });
         }
         if (this.duration < Infinity) {
-            clearTimeout(this.autoHideTimeout);
-            this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+            this.restartAutoHide();
         }
     }
     /**
@@ -135,8 +147,10 @@ const Alert = class {
         }
         this.goingToHide = true;
         this.open = false;
+        activeElement.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
@@ -149,6 +163,7 @@ const Alert = class {
     async toast(position = 'tr') {
         this.isToast = true;
         return new Promise((resolve) => {
+            this.handleCountdownChange();
             let toastStack;
             switch (position) {
                 case 'tl':
@@ -164,7 +179,7 @@ const Alert = class {
                     toastStack = toastStackTr;
                     break;
             }
-            if (!toastStack.parentElement) {
+            if (!toastStack.isConnected) {
                 document.body.appendChild(toastStack);
             }
             toastStack.appendChild(this.host);
@@ -191,8 +206,14 @@ const Alert = class {
         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();
             scroll.lockBodyScrolling(this.host);
@@ -223,8 +244,41 @@ const Alert = class {
             });
         });
     }
-    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();
@@ -246,12 +300,6 @@ const Alert = class {
         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.Modal(this.host);
         this.handleHoistChange();
@@ -276,21 +324,24 @@ const Alert = class {
                 '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 }, renderer.h("div", { class: "alert__content" }, renderer.h("div", { part: "icon", class: "alert__icon" }, renderer.h("slot", { name: "icon" })), renderer.h("div", { part: "message", class: "alert__message" }, renderer.h("slot", null)), this.closable && (renderer.h("div", { class: "alert__close" }, renderer.h("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), renderer.h("div", { class: "alert__footer" }, renderer.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 }, renderer.h("div", { class: "alert__main", part: "main" }, renderer.h("div", { part: "icon", class: "alert__icon" }, renderer.h("slot", { name: "icon" })), renderer.h("div", { part: "content", class: "alert__content", "aria-live": this.isModal ? 'assertive' : 'polite' }, this.slotCtrl.has('heading') && (renderer.h("div", { class: "alert__heading" }, renderer.h("slot", { name: "heading" }))), this.slotCtrl.has('title') && (renderer.h("div", { class: "alert__title" }, renderer.h("slot", { name: "title" }))), this.slotCtrl.has('[default]') && (renderer.h("div", { class: "alert__body" }, renderer.h("slot", null))), this.slotCtrl.has('footer') && (renderer.h("div", { part: "footer", class: "alert__footer" }, renderer.h("slot", { name: "footer" })))), this.closable && (renderer.h("div", { class: "alert__close", part: "close" }, renderer.h("nano-icon-button", { iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), this.duration < Infinity && [
+            renderer.h("div", { role: "timer", class: "alert__timer" }, this.remainingTime),
+            this.countdown ? (renderer.h("div", { class: "alert__countdown" }, renderer.h("div", { ref: (e) => (this.countdownElement = e), class: "alert__countdown-elapsed" }))) : (''),
+        ]));
     };
     render() {
-        return (renderer.h(index.Host, { key: '0279c18aae2396ad177089cc75566e883d90e13c', class: { ...theme.createColorClasses(this.color), 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
-            renderer.h("div", { key: 'bf3e853b342bdd95fa760ce9318c280fc7763ac6', part: "overlay", class: {
+        return (renderer.h(index.Host, { key: '5e937f25c5029d3e2ec86f0d240b5f4336de9a51', class: { 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
+            renderer.h("div", { key: 'b21cc499555d44cde911efa637662363cb296c71', part: "overlay", class: {
                     alert__overlay: true,
                     'alert__overlay--open': this.open,
                 }, ref: (div) => (this.overlay = div) }),
-            renderer.h("div", { key: 'e1834c979a55eff1022d7c768d5d1f698afcfade', class: "alert__modal-wrap", onClick: (e) => {
+            renderer.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);
-                } }, renderer.h(this.Panel, { key: 'd30e62e22c1ea9b97b57590d9fe926bb0623b893' })),
-        ], !this.isModal && renderer.h(this.Panel, { key: 'cd72c23c11e27ea221ca7ab3327288f34cd8a597' })));
+                } }, renderer.h(this.Panel, { key: 'ca7f6ae3565e6a4249ccef33d868a166141b01e0' })),
+        ], !this.isModal && renderer.h(this.Panel, { key: 'f401f5e740a3af18c298b8ad4492b872b611a1f2' })));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -298,8 +349,6 @@ const Alert = class {
         "hoist": ["handleHoistChange"]
     }; }
 };
-Alert.style = NanoAlertStyle0;
+Alert.style = alertCss;
 
 exports.nano_alert = Alert;
-
-//# sourceMappingURL=nano-alert.cjs.entry.js.map

package/dist/cjs/nano-algolia-filter.cjs.entry.js

@@ -1,18 +1,15 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var componentStore = require('./component-store-DKMzj8Ei.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var algoliaData = require('./algolia-data-JweofGji.js');
+require('./throttle-CrRDOkln.js');
 
-const index = require('./index-615cdb64.js');
-const componentStore = require('./component-store-b8d4bd91.js');
-const renderer = require('./renderer-cd8b6098.js');
-const algoliaData = require('./algolia-data-ca9cd58e.js');
-require('./throttle-46a497fb.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 = class {
     constructor(hostRef) {
@@ -285,10 +282,10 @@ const AlgoliaFilter = class {
             this.showFilter = true;
     }
     render() {
-        return (renderer.h(index.Host, { key: '81d343828cf739b8e85cab7f56fa48ad1c3fc34e', class: {
+        return (renderer.h(index.Host, { key: 'c1d229a764c08c92c4f25093d98bf51e1b4f6bcf', class: {
                 'show-filter': this.showFilter,
                 'nano-filter': true,
-            } }, renderer.h("div", { key: '909831f2c2e4605163227a188df31b3b130fd7d1', ref: (div) => (this.outputEle = div) }, renderer.h("slot", { key: '854cff616358aaee8cb6594db55a4a49d4322b74', name: "output" }))));
+            } }, renderer.h("div", { key: '21f66d2dcd03e19aa46face1220459dce136ccd1', ref: (div) => (this.outputEle = div) }, renderer.h("slot", { key: '3ec8e00ee477c651e48e96db7888f0a751573a3e', name: "output" }))));
     }
     static get watchers() { return {
         "value": ["valueSet"],
@@ -307,8 +304,6 @@ algoliaData.Wormhole(AlgoliaFilter, [
     'changeEvent',
 ]);
 let filterIds = 0;
-AlgoliaFilter.style = NanoAlgoliaFilterStyle0;
+AlgoliaFilter.style = algoliaFilterCss;
 
 exports.nano_algolia_filter = AlgoliaFilter;
-
-//# sourceMappingURL=nano-algolia-filter.cjs.entry.js.map

package/dist/cjs/nano-algolia-pagination.cjs.entry.js

@@ -1,12 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const algoliaData = require('./algolia-data-ca9cd58e.js');
+var index = require('./index-DYD4xvxr.js');
+var algoliaData = require('./algolia-data-JweofGji.js');
 
 const AlgoliaPagination = class {
     constructor(hostRef) {
@@ -61,9 +59,9 @@ const AlgoliaPagination = class {
         this.updateContent();
     }
     render() {
-        return (index.h(index.Host, { key: '12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8', class: {
+        return (index.h(index.Host, { key: '488332e371953208f90e754ebdceff321795177c', class: {
                 'show-pagination': this.show,
-            } }, index.h("div", { key: '70dc4683c476084346dc69246acb2092719d0b60', ref: (div) => (this.outputEle = div) }, index.h("slot", { key: '04f51858db37f6a25cae5fead48c5016a4159944', name: "output" }))));
+            } }, index.h("div", { key: '9f24519df07b4f022297a5e6f1ace601efc71e2b', ref: (div) => (this.outputEle = div) }, index.h("slot", { key: '363d87eb251ba2db6e6c3346e32f5dcb8b8d3a0c', name: "output" }))));
     }
     static get watchers() { return {
         "currentPage": ["currentPageChange"],
@@ -78,5 +76,3 @@ algoliaData.Wormhole(AlgoliaPagination, [
 ]);
 
 exports.nano_algolia_pagination = AlgoliaPagination;
-
-//# sourceMappingURL=nano-algolia-pagination.cjs.entry.js.map

package/dist/cjs/nano-algolia-results.cjs.entry.js

@@ -1,13 +1,11 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const algoliaData = require('./algolia-data-ca9cd58e.js');
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var algoliaData = require('./algolia-data-JweofGji.js');
 
 const AlgoliaResults = class {
     constructor(hostRef) {
@@ -116,7 +114,7 @@ const AlgoliaResults = class {
         if (!this.infiniteScrollBar ||
             !this.infiniteScroll ||
             this.io ||
-            !index.Build.isBrowser ||
+            false ||
             typeof window === 'undefined' ||
             !window.IntersectionObserver)
             return;
@@ -199,10 +197,10 @@ const AlgoliaResults = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: 'e5124d09c5619d77f6debca38bd5059ecfb9dce5', class: {
+        return (renderer.h(index.Host, { key: '14939adaa742d13214faf5375692737010467a7c', class: {
                 'show-results': this.showResults,
                 'nano-results': true,
-            } }, renderer.h("div", { key: '773924ac30cd4e8c57d6767f96a8c9173d6e9ec6', class: "default" }, renderer.h("slot", { key: '5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d' })), renderer.h("div", { key: '3a716202a7364efa1eeb90ea525670c4da5fc7e1', ref: (div) => (this.outputEle = div) }, renderer.h("slot", { key: 'af5860bd4dc7e2472d18f1b86175f5772bac426b', name: "start-output" }), renderer.h("slot", { key: '7b57ec404897b71f60a06ca661558624d5db1ac0', name: "result-output" }), renderer.h("div", { key: 'cff39c4ed229e1081f9160d8a447d56841209b4e', ref: (div) => (this.infiniteScrollBar = div) }), renderer.h("slot", { key: '79c19d45895d5f7a285e0beb640f84251d37b558', name: "end-output" }))));
+            } }, renderer.h("div", { key: '8153995d81af56df593694ca7902e93f6efb0565', class: "default" }, renderer.h("slot", { key: '60e2c4a10cdf5f6fbd609972114be5d04ccfe3f0' })), renderer.h("div", { key: 'cf589b852a52ffc84b8d9dd48c193603e733f02e', ref: (div) => (this.outputEle = div) }, renderer.h("slot", { key: 'aad8bfb81edca4af57503bc80b4eac5cbe69a97e', name: "start-output" }), renderer.h("slot", { key: '30e848bcf8b1d0f03d57b65cb805abcca87aefd5', name: "result-output" }), renderer.h("div", { key: '8663b935facbe62a5b30d4e6446cc978083369d7', ref: (div) => (this.infiniteScrollBar = div) }), renderer.h("slot", { key: 'b8652a198cd7fefe5a127b8bc9387305971be922', name: "end-output" }))));
     }
     static get watchers() { return {
         "results": ["addContentIndex", "resultsChange"],
@@ -225,5 +223,3 @@ algoliaData.Wormhole(AlgoliaResults, [
 ]);
 
 exports.nano_algolia_results = AlgoliaResults;
-
-//# sourceMappingURL=nano-algolia-results.cjs.entry.js.map

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

@@ -1,17 +1,15 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-890872fc.js');
-const dom = require('./dom-b99a1aec.js');
-const componentStore = require('./component-store-b8d4bd91.js');
-const throttle = require('./throttle-46a497fb.js');
-const renderer = require('./renderer-cd8b6098.js');
-const algoliaData = require('./algolia-data-ca9cd58e.js');
+var index = require('./index-DYD4xvxr.js');
+var algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-DWj6KfUw.js');
+var dom = require('./dom-a3wgHxbn.js');
+var componentStore = require('./component-store-DKMzj8Ei.js');
+var throttle = require('./throttle-CrRDOkln.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var algoliaData = require('./algolia-data-JweofGji.js');
 
 var multiverse = new Map();
 var updateConsumer = function (_a, state) {
@@ -1087,20 +1085,20 @@ function render(template, data, env, cb) {
     }
 }
 
-const squirrel = /*#__PURE__*/Object.freeze({
+var squirrel = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    compileToString: compileToString,
+    compile: compile,
     compileScope: compileScope,
     compileScopeIntoFunction: compileScopeIntoFunction,
-    compile: compile,
-    parse: parse,
-    render: render,
+    compileToString: compileToString,
+    defaultConfig: defaultConfig,
+    filters: filters,
+    getConfig: getConfig,
     helpers: helpers,
     nativeHelpers: nativeHelpers,
-    filters: filters,
-    templates: templates,
-    defaultConfig: defaultConfig,
-    getConfig: getConfig
+    parse: parse,
+    render: render,
+    templates: templates
 });
 
 filters.define('date_long', (str, options = {
@@ -1171,8 +1169,7 @@ filters.define('capitalise', (str) => (str = str.charAt(0).toUpperCase() + str.s
 filters.define('lowercase', (str) => (str = str.toLowerCase()));
 const Squirrel = squirrel;
 
-const algoliaCss = ":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{position:relative;display:block}:host ::slotted([slot=search-template]){display:none !important}.loader{opacity:0;position:fixed;block-size:100%;inline-size:100%;min-block-size:100%;max-block-size:100vh !important;max-inline-size:100vw !important;inset-inline-start:0;inset-block-start:0;z-index:-10;font-size:60px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s ease, z-index 0.01s ease 0.2s}.loader.loading{opacity:1;z-index:10;transition:z-index 0.01s ease, opacity 0.2s ease 0.01s}.default{block-size:100%}.default:focus{outline:none}.results{opacity:0;outline:none;overflow:auto;transition:transform 0.3s ease, opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s;transform:translate(0, 100px);visibility:hidden;z-index:-1;position:absolute;inset-block-start:0;inset-inline-start:0;display:none}.results-container{position:relative}.results.show{transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.3s ease 0.01s, opacity 0.3s ease 0.01s, overflow 0.01s ease 0.31s;transform:translate(0, 0);visibility:visible;opacity:1;z-index:10;overflow:hidden}.results.shown{block-size:auto !important;inline-size:auto !important;display:block;position:static;transform:none;z-index:auto;visibility:inherit;opacity:initial;overflow:visible}";
-const NanoAlgoliaStyle0 = algoliaCss;
+const algoliaCss = ":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{position:relative;display:block}:host ::slotted([slot=search-template]){display:none !important}.loader{opacity:0;position:fixed;block-size:100%;inline-size:100%;min-block-size:100%;max-block-size:100vh !important;max-inline-size:100vw !important;inset-inline-start:0;inset-block-start:0;z-index:-10;font-size:60px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s ease, z-index 0.01s ease 0.2s}.loader.loading{opacity:1;z-index:10;transition:z-index 0.01s ease, opacity 0.2s ease 0.01s}.default{block-size:100%}.default:focus{outline:none}.results{opacity:0;outline:none;overflow:auto;transition:transform 0.3s ease, opacity 0.3s ease, visibility 0.01s ease 0.3s, z-index 0.01s ease 0.3s;transform:translate(0, 100px);visibility:hidden;z-index:-1;position:absolute;inset-block-start:0;inset-inline-start:0;display:none}.results-container{position:relative}.results.show{transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.3s ease 0.01s, opacity 0.3s ease 0.01s, overflow 0.01s ease 0.31s;transform:translate(0, 0);visibility:visible;opacity:1;z-index:10;overflow:hidden}.results.shown{block-size:auto !important;inline-size:auto !important;display:block;position:static;transform:none;z-index:auto;visibility:inherit;opacity:initial;overflow:visible}";
 
 const Algolia = class {
     constructor(hostRef) {
@@ -1847,14 +1844,14 @@ const Algolia = class {
             globalStoreMethod: this.storeMethod,
             isLoading: this.isLoading,
         };
-        return (renderer.h(index.Host, { key: 'f0ae1895d779c2a59dd459fbc7cde8780b1ac9f8', class: {
+        return (renderer.h(index.Host, { key: 'e5a080bf3b11c991465f1b44521b75539f80d5ec', class: {
                 'show-results': this.showResults,
                 'is-loading': this.isLoading,
                 'nano-algolia': true,
-            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (renderer.h("div", { key: '15e48727d32a3afa360fec13edb8aca3d211737c', hidden: !this.isLoading }, renderer.h("slot", { key: 'a5ec5e6a5ec997540d2dd60fd95a8c82c0c506c2', name: "loader" }))), !this.hasLoadSlot && (renderer.h("div", { key: '96275ed0b3486691bc9f5154f5f115cd09274990', class: {
+            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (renderer.h("div", { key: '586696526af9ba7b721ebfe8aeba2b5a45b8a19a', hidden: !this.isLoading }, renderer.h("slot", { key: '40556633911954fd20b756fedf71aea7e15b15e1', name: "loader" }))), !this.hasLoadSlot && (renderer.h("div", { key: 'e5ee4968b6864b656b3537ec46b69e64ebe76370', class: {
                 loader: true,
                 loading: this.isLoading,
-            } }, renderer.h("nano-spinner", { key: 'd2b86328009cfdb943c5d702e55e9c51ae569f9d', overlay: true, type: "circle" }))), renderer.h(Universe.Provider, { key: 'e3465b7980720e2be4d481b7e71a7a033fe52ae1', state: wormholeState }, renderer.h("slot", { key: '161554c21e77aa7e662491e787c69d402d00035f', name: "search-input" }), renderer.h("div", { key: '4f1c30d75e84a609fc621afce96233bfd678518f', class: "results-container", "aria-live": "polite" }, renderer.h("div", { key: '1bce8a2a0c2cd7f71f64750f7c18ff63aefeadd1', ref: (div) => (this.resultsDiv = div), class: "results" }, renderer.h("slot", { key: '70582027504c1d2cba99f80e99d51d711247d0ab', name: "output" })))), renderer.h("div", { key: 'd4fcea375a1c86191135ba43f85e66e93b076d63', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, renderer.h("slot", { key: '7e291158dfbcb83181bb91e0506eb0a1b6cfb13b' }))));
+            } }, renderer.h("nano-spinner", { key: '63bbc6292b6a7183fe21a2527ffbd3002548871b', overlay: true, type: "circle" }))), renderer.h(Universe.Provider, { key: '64e8d5149940ad9c3353709db00677805f0d9946', state: wormholeState }, renderer.h("slot", { key: '700649f3a918fce90e0e4c533c849942b9c0ad5c', name: "search-input" }), renderer.h("div", { key: '5e5c54c6365ea0725a5b995115c196eb5b1026ca', class: "results-container", "aria-live": "polite" }, renderer.h("div", { key: '0a9559ae98ab627e5529dca1026ac1312127d824', ref: (div) => (this.resultsDiv = div), class: "results" }, renderer.h("slot", { key: 'cf30d2970741dfb1631fca008317e4420d228a98', name: "output" })))), renderer.h("div", { key: '4d9cf66b3c2c3d0e10e1a443002db80d686530f7', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, renderer.h("slot", { key: 'fc365faa7953cdf3a0aa2887716e2f0f3af464fa' }))));
     }
     static get watchers() { return {
         "listenTo": ["handleListenToChange"],
@@ -1872,8 +1869,6 @@ const Algolia = class {
         "filters": ["handleFilterpropChange"]
     }; }
 };
-Algolia.style = NanoAlgoliaStyle0;
+Algolia.style = algoliaCss;
 
 exports.nano_algolia = Algolia;
-
-//# sourceMappingURL=nano-algolia.cjs.entry.js.map

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

@@ -1,12 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
 const bounce = [
     {
@@ -1214,7 +1212,7 @@ const NanoAnimation = class {
         this.animation?.finish();
     }
     render() {
-        return (renderer.h(index.Host, { key: '72df233f997594e16f18fbe6009d5bc3849e8248', class: "nano-animation" }, renderer.h("slot", { key: 'cc651438b3697408a642e28369b77efe7c781716', ref: (slot) => {
+        return (renderer.h(index.Host, { key: '69ede16e4ecb0155cdfc63a56e04ca38c5e56412', class: "nano-animation" }, renderer.h("slot", { key: '73a9ec636c4fe8b72570906bce645529b4343606', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }
@@ -1237,5 +1235,3 @@ const NanoAnimation = class {
 NanoAnimation.style = ":host {\n      display: contents;\n    }";
 
 exports.nano_animation = NanoAnimation;
-
-//# sourceMappingURL=nano-animation.cjs.entry.js.map