nanosplash 4.0.18 → 4.0.20

package/README.md

@@ -7,145 +7,27 @@
 
 ---
 
-### Nanosplash is a 3KB zero-dependency library for effortless loading screens. Its 2-function API lets you add fullscreen or container-based spinners in seconds, fully customizable with CSS. Fast, beautiful, and simple.
-
 ```js
-// Display spinner fullscreen
-show('Loading')
+// Fullscreen
+ns.show('Loading')
 
-// Display spinner in target
-show('Loading', '#my-div')
+// Specific element
+ns.show('Loading', '#my-div')
 
-// Hide spinner
-hide()
+// Hide
+ns.hide()
 ```
 
-## Features
-
-- **Tiny**: Only 3KB
-- **Performance**: Created to be fast.
-- **Zero dependencies**: Pure JS.
-- **Beautiful**: Good and generic design.
-- **Modules**: Supports ESM, CJS, and IIFE.
-- **TypeScript support**: Fully typed.
-- **2 Function API**: Easy to use.
-
 ## Installation
-
-Include Nanosplash in your project via your preferred method (e.g., CDN, module bundler). Example:
-
-```html
-<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
-```
-
-or
-
+Add to your project and get the typing and docs.
 ```bash
 npm install nanosplash
 ```
 
-## API Documentation
-
-### Show
-
-The show function displays a Nanosplash loading indicator on your page.
-You can pass in optional text to display with the spinner, and an optional target element (or CSS selector) to control where it appears.
-If no target is provided, Nanosplash will create a fullscreen splash covering the entire viewport.
-
-```ts
-show(text?: string, target?: string | Element): number
-```
-
-#### Examples:
-
-**Fullscreen spinner only:**
-
-  ```js
-  ns.show()
-  ```
-
-**Fullscreen text and spinner:**
-
-  ```js
-  ns.show('Loading...')
-  ```
-
-**Spinner only within a specific element:**
-
-  ```js
-  ns.show(null, '#my-div')
-  ```
-
-**Text and spinner within a specific element:**
-
-  ```js
-  ns.show('Please wait', '#my-div')
-  ```
-
-### Hide
-
-The hide function removes one or more Nanosplash loading indicators from your page.
-By default, it removes the oldest fullscreen splash (FIFO). If you want to remove a specific splash, you can pass its ID (returned by show).
-You can also remove all splashes at once by passing the wildcard '*'.
-
-```ts
-hide(id?: number | '*'): void
-```
-#### Examples:
-
-**Remove the oldest (FIFO) fullscreen Nanosplash:**
-
-  ```js
-  ns.hide()
-  ```
-
-**Remove a specific Nanosplash by ID:**
-
-  ```js
-  const id = ns.show() // 1700000000000
-  ns.hide(id)
-  ```
-
-**Remove all Nanosplashes:**
-
-  ```js
-  ns.hide('*')
-  ```
-
-## Customization
-
-Nanosplash is designed to be fully customizable with CSS. You can style its key parts using these selectors:
-
-| Selector        | Description                              |
-|------------------|------------------------------------------|
-| `.nsh::before`  | Backdrop                                  |
-| `.ns`           | Main wrapper for the splash               |
-| `.nst`          | Text element                              |
-| `.nss`          | Spinner element                           |
-
-## Examples
-
-Here’s a quick snippet to show a loading indicator while fetching data:
-
+Or add the script tag to your HTML.
 ```html
-<div id="my-div"></div>
-
-<script>
-  // Show a splash while loading
-  ns.show('Fetching data...', '#my-div')
-
-  fetch('/api/data')
-    .then(res => res.json())
-    .then(data => {
-      // Process data
-    })
-    .finally(() => {
-      // Hide splash
-      ns.hide()
-    })
-</script>
+<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-## 💖 Contributing & Feedback
-
-Found a bug or have a feature request? Visit the [GitHub repository](https://github.com/isakhauge/nanosplash) and open an issue or pull request!
+## Documentation
+[Read the full docs here](./docs.md)

package/dist/cjs/ns.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,l=()=>globalThis.document.body,y=s=>Array.from(s),u=(s,o)=>y(s.querySelectorAll(o)),h=(s,o)=>u(s,o)[0]??null,N=s=>s instanceof Element?s:h(d(),s),c=(s,...o)=>{const i=d().createElement("div");return s&&i.classList.add(s),i.append(...o),i},m=s=>{const o=c();return o.innerHTML=s,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},v={ns:"."+r.ns,nsText:"."+r.nsText},A="4.0.18",E=()=>{const s=()=>u(d(),v.ns),o=()=>{const t=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=c(r.ns,c(r.nsText),c(r.nsSpinner,t));return n.nsId=Date.now(),n},i=()=>s().sort((e,t)=>e.nsId-t.nsId),b=()=>i()[0]??null,g=(e,t)=>{if(h(e,v.nsText)?.remove(),!t)return;const n=c(r.nsText,t);e.insertBefore(n,e.firstChild)},x=(e,t)=>{const n=t.firstElementChild;n&&t.insertBefore(e,n),t.append(e),t.classList.add(r.nsHost)},w=e=>y(e.children).find(n=>n.classList.contains(r.ns)),k=(e,t)=>{const n=t?N(t)??l():l();let a;const p=w(n);if(p?a=p:(a=o(),x(a,n)),g(a,e??""),n===l()){const T=scrollY+"px";l().style.setProperty("--ns-top",T)}return a.nsId},f=e=>{e?.parentElement?.classList.remove(r.nsHost),e?.remove()},z=e=>s().find(t=>t.nsId===e)??null,S=e=>{e==="*"?s().forEach(f):f(typeof e=="number"?z(e):b())};return(()=>{h(d(),"#ns")?.remove();const e=m(`<style id="ns">${I}</style>`);l().append(e)})(),{show:k,hide:S,version:A}};exports.useNs=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,l=()=>globalThis.document.body,u=s=>Array.from(s),y=(s,o)=>u(s.querySelectorAll(o)),f=(s,o)=>y(s,o)[0]??null,N=s=>s instanceof Element?s:f(d(),s),c=(s,...o)=>{const i=d().createElement("div");return s&&i.classList.add(s),i.append(...o),i},m=s=>{const o=c();return o.innerHTML=s,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},v={ns:"."+r.ns,nsText:"."+r.nsText},A="4.0.20",E=()=>{const s=()=>y(d(),v.ns),o=()=>{const t=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=c(r.ns,c(r.nsText),c(r.nsSpinner,t));return n.nsId=Date.now(),n},i=()=>s().sort((e,t)=>e.nsId-t.nsId),b=()=>i()[0]??null,g=(e,t)=>{if(f(e,v.nsText)?.remove(),!t)return;const n=c(r.nsText,t);e.insertBefore(n,e.firstChild)},x=(e,t)=>{const n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(r.nsHost)},w=e=>u(e.children).find(n=>n.classList.contains(r.ns)),k=(e,t)=>{const n=t?N(t)??l():l();let a;const p=w(n);if(p?a=p:(a=o(),x(a,n)),g(a,e??""),n===l()){const T=scrollY+"px";l().style.setProperty("--ns-top",T)}return a.nsId},h=e=>{e&&(e.parentElement?.classList.remove(r.nsHost),e.remove())},z=e=>s().find(t=>t.nsId===e)??null,S=e=>{e==="*"?s().forEach(h):h(typeof e=="number"?z(e):b())};return(()=>{f(d(),"#ns")?.remove();const e=m(`<style id="ns">${I}</style>`);l().append(e)})(),{show:k,hide:S,version:A}};exports.useNs=E;

package/dist/es/ns.es.js

@@ -1,9 +1,9 @@
-const T = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', d = () => globalThis.document, l = () => globalThis.document.body, y = (e) => Array.from(e), u = (e, o) => y(e.querySelectorAll(o)), h = (e, o) => u(e, o)[0] ?? null, A = (e) => e instanceof Element ? e : h(d(), e), c = (e, ...o) => {
+const T = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', d = () => globalThis.document, l = () => globalThis.document.body, y = (s) => Array.from(s), u = (s, o) => y(s.querySelectorAll(o)), f = (s, o) => u(s, o)[0] ?? null, A = (s) => s instanceof Element ? s : f(d(), s), c = (s, ...o) => {
   const i = d().createElement("div");
-  return e && i.classList.add(e), i.append(...o), i;
-}, m = (e) => {
+  return s && i.classList.add(s), i.append(...o), i;
+}, m = (s) => {
   const o = c();
-  return o.innerHTML = e, o.firstChild;
+  return o.innerHTML = s, o.firstChild;
 }, r = {
   ns: "ns",
   nsHost: "nsh",
@@ -12,43 +12,41 @@ const T = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%
 }, v = {
   ns: "." + r.ns,
   nsText: "." + r.nsText
-}, N = "4.0.18", H = () => {
-  const e = () => u(d(), v.ns), o = () => {
+}, N = "4.0.20", H = () => {
+  const s = () => u(d(), v.ns), o = () => {
     const t = m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), n = c(
       r.ns,
       c(r.nsText),
       c(r.nsSpinner, t)
     );
     return n.nsId = Date.now(), n;
-  }, i = () => e().sort((s, t) => s.nsId - t.nsId), b = () => i()[0] ?? null, g = (s, t) => {
-    if (h(s, v.nsText)?.remove(), !t) return;
+  }, i = () => s().sort((e, t) => e.nsId - t.nsId), b = () => i()[0] ?? null, g = (e, t) => {
+    if (f(e, v.nsText)?.remove(), !t) return;
     const n = c(r.nsText, t);
-    s.insertBefore(n, s.firstChild);
-  }, x = (s, t) => {
+    e.insertBefore(n, e.firstChild);
+  }, x = (e, t) => {
     const n = t.firstElementChild;
-    n && t.insertBefore(s, n), t.append(s), t.classList.add(r.nsHost);
-  }, w = (s) => y(s.children).find(
-    (n) => n.classList.contains(r.ns)
-  ), k = (s, t) => {
+    n ? t.insertBefore(e, n) : t.append(e), t.classList.add(r.nsHost);
+  }, w = (e) => y(e.children).find((n) => n.classList.contains(r.ns)), k = (e, t) => {
     const n = t ? A(t) ?? l() : l();
     let a;
     const p = w(n);
-    if (p ? a = p : (a = o(), x(a, n)), g(a, s ?? ""), n === l()) {
+    if (p ? a = p : (a = o(), x(a, n)), g(a, e ?? ""), n === l()) {
       const S = scrollY + "px";
       l().style.setProperty("--ns-top", S);
     }
     return a.nsId;
-  }, f = (s) => {
-    s?.parentElement?.classList.remove(r.nsHost), s?.remove();
-  }, z = (s) => e().find((t) => t.nsId === s) ?? null, I = (s) => {
-    s === "*" ? e().forEach(f) : f(typeof s == "number" ? z(s) : b());
+  }, h = (e) => {
+    e && (e.parentElement?.classList.remove(r.nsHost), e.remove());
+  }, z = (e) => s().find((t) => t.nsId === e) ?? null, I = (e) => {
+    e === "*" ? s().forEach(h) : h(typeof e == "number" ? z(e) : b());
   };
   return (() => {
-    h(d(), "#ns")?.remove();
-    const s = m(
+    f(d(), "#ns")?.remove();
+    const e = m(
       `<style id="ns">${T}</style>`
     );
-    l().append(s);
+    l().append(e);
   })(), {
     show: k,
     hide: I,

package/dist/iife/ns.iife.js

@@ -1 +1 @@
-(function(){"use strict";const b='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,i=()=>globalThis.document.body,f=t=>Array.from(t),p=(t,o)=>f(t.querySelectorAll(o)),h=(t,o)=>p(t,o)[0]??null,g=t=>t instanceof Element?t:h(d(),t),a=(t,...o)=>{const c=d().createElement("div");return t&&c.classList.add(t),c.append(...o),c},v=t=>{const o=a();return o.innerHTML=t,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},m={ns:"."+r.ns,nsText:"."+r.nsText},x="4.0.18",w=()=>{const t=()=>p(d(),m.ns),o=()=>{const e=v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=a(r.ns,a(r.nsText),a(r.nsSpinner,e));return n.nsId=Date.now(),n},c=()=>t().sort((s,e)=>s.nsId-e.nsId),k=()=>c()[0]??null,z=(s,e)=>{if(h(s,m.nsText)?.remove(),!e)return;const n=a(r.nsText,e);s.insertBefore(n,s.firstChild)},I=(s,e)=>{const n=e.firstElementChild;n&&e.insertBefore(s,n),e.append(s),e.classList.add(r.nsHost)},S=s=>f(s.children).find(n=>n.classList.contains(r.ns)),T=(s,e)=>{const n=e?g(e)??i():i();let l;const y=S(n);if(y?l=y:(l=o(),I(l,n)),z(l,s??""),n===i()){const E=scrollY+"px";i().style.setProperty("--ns-top",E)}return l.nsId},u=s=>{s?.parentElement?.classList.remove(r.nsHost),s?.remove()},A=s=>t().find(e=>e.nsId===s)??null,N=s=>{s==="*"?t().forEach(u):u(typeof s=="number"?A(s):k())};return(()=>{h(d(),"#ns")?.remove();const s=v(`<style id="ns">${b}</style>`);i().append(s)})(),{show:T,hide:N,version:x}};window.addEventListener("load",function(){this.ns=w()})})();
+(function(){"use strict";const b='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,i=()=>globalThis.document.body,p=s=>Array.from(s),v=(s,o)=>p(s.querySelectorAll(o)),h=(s,o)=>v(s,o)[0]??null,g=s=>s instanceof Element?s:h(d(),s),a=(s,...o)=>{const l=d().createElement("div");return s&&l.classList.add(s),l.append(...o),l},m=s=>{const o=a();return o.innerHTML=s,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},u={ns:"."+r.ns,nsText:"."+r.nsText},x="4.0.20",w=()=>{const s=()=>v(d(),u.ns),o=()=>{const t=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=a(r.ns,a(r.nsText),a(r.nsSpinner,t));return n.nsId=Date.now(),n},l=()=>s().sort((e,t)=>e.nsId-t.nsId),k=()=>l()[0]??null,z=(e,t)=>{if(h(e,u.nsText)?.remove(),!t)return;const n=a(r.nsText,t);e.insertBefore(n,e.firstChild)},I=(e,t)=>{const n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(r.nsHost)},S=e=>p(e.children).find(n=>n.classList.contains(r.ns)),T=(e,t)=>{const n=t?g(t)??i():i();let c;const y=S(n);if(y?c=y:(c=o(),I(c,n)),z(c,e??""),n===i()){const E=scrollY+"px";i().style.setProperty("--ns-top",E)}return c.nsId},f=e=>{e&&(e.parentElement?.classList.remove(r.nsHost),e.remove())},A=e=>s().find(t=>t.nsId===e)??null,N=e=>{e==="*"?s().forEach(f):f(typeof e=="number"?A(e):k())};return(()=>{h(d(),"#ns")?.remove();const e=m(`<style id="ns">${b}</style>`);i().append(e)})(),{show:T,hide:N,version:x}};window.addEventListener("load",function(){this.ns=w()})})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nanosplash",
   "private": false,
-  "version": "4.0.18",
+  "version": "4.0.20",
   "type": "module",
   "author": {
     "name": "Isak K. Hauge",