nanosplash 4.1.1 → 4.1.3

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.
package/README.md CHANGED
@@ -33,6 +33,12 @@ const [user, posts] = await ns.show([
33
33
 
34
34
  Still just two functions. Accessible out of the box (`role="status"`, `aria-live="polite"`, `aria-busy`, `prefers-reduced-motion`) and themeable via `--ns-*` CSS custom properties.
35
35
 
36
+ ## Live demo
37
+
38
+ **[Try every feature live →](https://raw.githack.com/isakhauge/nanosplash/main/docs/index.html)**
39
+
40
+ Self-contained, runs the real library, no build step. Prefer to run it yourself? Clone the repo and open [`docs/index.html`](./docs/index.html) directly in a browser — no server required.
41
+
36
42
  ## Installation
37
43
 
38
44
  ```bash
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@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}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}`,t=()=>globalThis.document,n=()=>globalThis.document.body,r=e=>Array.from(e),i=(e,t)=>r(e.querySelectorAll(t)),a=(e,t)=>i(e,t)[0]??null,o=e=>e instanceof Element?e:a(t(),e),s=(e,...n)=>{let r=t().createElement(`div`);return e&&r.classList.add(e),r.append(...n),r},c=e=>{let t=s();return t.innerHTML=e,t.firstChild},l={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},u={ns:`.`+l.ns,nsHost:`.`+l.nsHost,nsText:`.`+l.nsText,nsSpinner:`.`+l.nsSpinner},d=`4.1.1`,f=1,p=e=>Array.isArray(e)&&typeof e[1]==`function`,m=m=>{let h=()=>i(t(),u.ns),g=()=>{let e=c(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=s(l.ns,s(l.nsText),s(l.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=f++,t},_=()=>h().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),v=()=>_()[0]??null,y=(e,t)=>{if(a(e,u.nsText)?.remove(),!t)return;let n=s(l.nsText,t);e.insertBefore(n,e.firstChild)},b=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(l.nsHost),t.setAttribute(`aria-busy`,`true`)},x=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=m?.showDelay??0,e.nsMinDuration=m?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},S=e=>r(e.children).find(e=>e.classList.contains(l.ns)),C=(e,t)=>{let r=t?o(t):n();if(!r)return null;k();let i,a=S(r);if(a?(i=a,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=g(),b(i,r)),x(i,r),y(i,e??``),r===n()){let e=scrollY+`px`;n().style.setProperty(`--ns-top`,e)}return i.nsId},w=e=>{let t=e.parentElement;t&&(t.classList.remove(l.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},T=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>w(e),i);return}w(e)},E=e=>h().find(t=>t.nsId===e)??null,D=e=>{e===`*`?h().forEach(T):T(typeof e==`number`?E(e):v())},O=()=>c(`<style id="ns">${e}</style>`),k=()=>{let e=a(t(),`#ns`),n=O();if(!e){t().head.append(n);return}e.textContent!==n.textContent&&e.replaceWith(n)},A=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=C(i,t),n.push(await a())}finally{r!==null&&D(r)}return n};return{show:((e,t)=>p(e)?A([e],t).then(e=>e[0]):Array.isArray(e)?A(e,t):C(e,t)),hide:D,version:d}};exports.useNs=m;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-shadow-color:#00000040;--ns-show-delay:0s}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}}:where(:root[data-theme=dark]){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);--shadowColor:var(--ns-shadow-color);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh:before,body.nsh>.ns{position:fixed;inset:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;max-width:80dvw;text-shadow:0 0 .06rem var(--shadowColor);filter:drop-shadow(0 0 .07rem var(--shadowColor));animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);filter:drop-shadow(0 0 .07rem var(--shadowColor));display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}`,t=()=>globalThis.document,n=()=>globalThis.document.body,r=e=>Array.from(e),i=(e,t)=>r(e.querySelectorAll(t)),a=(e,t)=>i(e,t)[0]??null,o=e=>e instanceof Element?e:a(t(),e),s=(e,...n)=>{let r=t().createElement(`div`);return e&&r.classList.add(e),r.append(...n),r},c=e=>{let t=s();return t.innerHTML=e,t.firstChild},l={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},u={ns:`.`+l.ns,nsHost:`.`+l.nsHost,nsText:`.`+l.nsText,nsSpinner:`.`+l.nsSpinner},d=`4.1.3`,f=1,p=e=>Array.isArray(e)&&typeof e[1]==`function`,m=m=>{let h=()=>i(t(),u.ns),g=()=>{let e=c(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=s(l.ns,s(l.nsText),s(l.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=f++,t},_=()=>h().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),v=()=>_()[0]??null,y=(e,t)=>{if(a(e,u.nsText)?.remove(),!t)return;let n=s(l.nsText,t);e.insertBefore(n,e.firstChild)},b=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(l.nsHost),t.setAttribute(`aria-busy`,`true`)},x=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=m?.showDelay??0,e.nsMinDuration=m?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},S=e=>r(e.children).find(e=>e.classList.contains(l.ns)),C=(e,t)=>{let r=t?o(t):n();if(!r)return null;k();let i,a=S(r);return a?(i=a,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=g(),b(i,r)),x(i,r),y(i,e??``),i.nsId},w=e=>{let t=e.parentElement;t&&(t.classList.remove(l.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},T=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>w(e),i);return}w(e)},E=e=>h().find(t=>t.nsId===e)??null,D=e=>{e===`*`?h().forEach(T):T(typeof e==`number`?E(e):v())},O=()=>c(`<style id="ns">${e}</style>`),k=()=>{let e=a(t(),`#ns`),n=O();if(!e){t().head.append(n);return}e.textContent!==n.textContent&&e.replaceWith(n)},A=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=C(i,t),n.push(await a())}finally{r!==null&&D(r)}return n};return{show:((e,t)=>p(e)?A([e],t).then(e=>e[0]):Array.isArray(e)?A(e,t):C(e,t)),hide:D,version:d}};exports.useNs=m;
package/dist/es/ns.es.js CHANGED
@@ -15,7 +15,7 @@ var e = () => globalThis.document, t = () => globalThis.document.body, n = (e) =
15
15
  nsHost: "." + c.nsHost,
16
16
  nsText: "." + c.nsText,
17
17
  nsSpinner: "." + c.nsSpinner
18
- }, u = "4.1.1", d = 1, f = (e) => Array.isArray(e) && typeof e[1] == "function", p = (p) => {
18
+ }, u = "4.1.3", d = 1, f = (e) => Array.isArray(e) && typeof e[1] == "function", p = (p) => {
19
19
  let m = () => r(e(), l.ns), h = () => {
20
20
  let e = s("<svg viewBox=\"0 0 50 50\"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>");
21
21
  e.setAttribute("aria-hidden", "true");
@@ -35,11 +35,7 @@ var e = () => globalThis.document, t = () => globalThis.document.body, n = (e) =
35
35
  if (!r) return null;
36
36
  O();
37
37
  let i, o = x(r);
38
- if (o ? (i = o, clearTimeout(i.nsHideTimer), i.nsHideTimer = void 0) : (i = h(), y(i, r)), b(i, r), v(i, e ?? ""), r === t()) {
39
- let e = scrollY + "px";
40
- t().style.setProperty("--ns-top", e);
41
- }
42
- return i.nsId;
38
+ return o ? (i = o, clearTimeout(i.nsHideTimer), i.nsHideTimer = void 0) : (i = h(), y(i, r)), b(i, r), v(i, e ?? ""), i.nsId;
43
39
  }, C = (e) => {
44
40
  let t = e.parentElement;
45
41
  t && (t.classList.remove(c.nsHost), t.removeAttribute("aria-busy"), t.style.removeProperty("--ns-show-delay")), e.remove();
@@ -53,7 +49,7 @@ var e = () => globalThis.document, t = () => globalThis.document.body, n = (e) =
53
49
  C(e);
54
50
  }, T = (e) => m().find((t) => t.nsId === e) ?? null, E = (e) => {
55
51
  e === "*" ? m().forEach(w) : w(typeof e == "number" ? T(e) : _());
56
- }, D = () => s("<style id=\"ns\">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@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}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:\"Inter\", \"Helvetica\", \"Arial\";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:\"\";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>"), O = () => {
52
+ }, D = () => s("<style id=\"ns\">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:\"Inter\", \"Helvetica\", \"Arial\";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-shadow-color:#00000040;--ns-show-delay:0s}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}}:where(:root[data-theme=dark]){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);--shadowColor:var(--ns-shadow-color);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:\"\";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh:before,body.nsh>.ns{position:fixed;inset:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;max-width:80dvw;text-shadow:0 0 .06rem var(--shadowColor);filter:drop-shadow(0 0 .07rem var(--shadowColor));animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);filter:drop-shadow(0 0 .07rem var(--shadowColor));display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>"), O = () => {
57
53
  let t = i(e(), "#ns"), n = D();
58
54
  if (!t) {
59
55
  e().head.append(n);
@@ -1 +1 @@
1
- (function(){var e=()=>globalThis.document,t=()=>globalThis.document.body,n=e=>Array.from(e),r=(e,t)=>n(e.querySelectorAll(t)),i=(e,t)=>r(e,t)[0]??null,a=t=>t instanceof Element?t:i(e(),t),o=(t,...n)=>{let r=e().createElement(`div`);return t&&r.classList.add(t),r.append(...n),r},s=e=>{let t=o();return t.innerHTML=e,t.firstChild},c={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},l={ns:`.`+c.ns,nsHost:`.`+c.nsHost,nsText:`.`+c.nsText,nsSpinner:`.`+c.nsSpinner},u=`4.1.1`,d=1,f=e=>Array.isArray(e)&&typeof e[1]==`function`,p=p=>{let m=()=>r(e(),l.ns),h=()=>{let e=s(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=o(c.ns,o(c.nsText),o(c.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=d++,t},g=()=>m().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),_=()=>g()[0]??null,v=(e,t)=>{if(i(e,l.nsText)?.remove(),!t)return;let n=o(c.nsText,t);e.insertBefore(n,e.firstChild)},y=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(c.nsHost),t.setAttribute(`aria-busy`,`true`)},b=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=p?.showDelay??0,e.nsMinDuration=p?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},x=e=>n(e.children).find(e=>e.classList.contains(c.ns)),S=(e,n)=>{let r=n?a(n):t();if(!r)return null;O();let i,o=x(r);if(o?(i=o,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=h(),y(i,r)),b(i,r),v(i,e??``),r===t()){let e=scrollY+`px`;t().style.setProperty(`--ns-top`,e)}return i.nsId},C=e=>{let t=e.parentElement;t&&(t.classList.remove(c.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},w=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>C(e),i);return}C(e)},T=e=>m().find(t=>t.nsId===e)??null,E=e=>{e===`*`?m().forEach(w):w(typeof e==`number`?T(e):_())},D=()=>s(`<style id="ns">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@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}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>`),O=()=>{let t=i(e(),`#ns`),n=D();if(!t){e().head.append(n);return}t.textContent!==n.textContent&&t.replaceWith(n)},k=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=S(i,t),n.push(await a())}finally{r!==null&&E(r)}return n};return{show:((e,t)=>f(e)?k([e],t).then(e=>e[0]):Array.isArray(e)?k(e,t):S(e,t)),hide:E,version:u}};window.addEventListener(`load`,()=>{window.ns=p()})})();
1
+ (function(){var e=()=>globalThis.document,t=()=>globalThis.document.body,n=e=>Array.from(e),r=(e,t)=>n(e.querySelectorAll(t)),i=(e,t)=>r(e,t)[0]??null,a=t=>t instanceof Element?t:i(e(),t),o=(t,...n)=>{let r=e().createElement(`div`);return t&&r.classList.add(t),r.append(...n),r},s=e=>{let t=o();return t.innerHTML=e,t.firstChild},c={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},l={ns:`.`+c.ns,nsHost:`.`+c.nsHost,nsText:`.`+c.nsText,nsSpinner:`.`+c.nsSpinner},u=`4.1.3`,d=1,f=e=>Array.isArray(e)&&typeof e[1]==`function`,p=p=>{let m=()=>r(e(),l.ns),h=()=>{let e=s(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=o(c.ns,o(c.nsText),o(c.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=d++,t},g=()=>m().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),_=()=>g()[0]??null,v=(e,t)=>{if(i(e,l.nsText)?.remove(),!t)return;let n=o(c.nsText,t);e.insertBefore(n,e.firstChild)},y=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(c.nsHost),t.setAttribute(`aria-busy`,`true`)},b=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=p?.showDelay??0,e.nsMinDuration=p?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},x=e=>n(e.children).find(e=>e.classList.contains(c.ns)),S=(e,n)=>{let r=n?a(n):t();if(!r)return null;O();let i,o=x(r);return o?(i=o,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=h(),y(i,r)),b(i,r),v(i,e??``),i.nsId},C=e=>{let t=e.parentElement;t&&(t.classList.remove(c.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},w=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>C(e),i);return}C(e)},T=e=>m().find(t=>t.nsId===e)??null,E=e=>{e===`*`?m().forEach(w):w(typeof e==`number`?T(e):_())},D=()=>s(`<style id="ns">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-shadow-color:#00000040;--ns-show-delay:0s}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}}:where(:root[data-theme=dark]){--ns-color:#fafafa;--ns-bg:#09090bd9;--ns-shadow-color:#ffffff59}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);--shadowColor:var(--ns-shadow-color);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh:before,body.nsh>.ns{position:fixed;inset:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;max-width:80dvw;text-shadow:0 0 .06rem var(--shadowColor);filter:drop-shadow(0 0 .07rem var(--shadowColor));animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);filter:drop-shadow(0 0 .07rem var(--shadowColor));display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>`),O=()=>{let t=i(e(),`#ns`),n=D();if(!t){e().head.append(n);return}t.textContent!==n.textContent&&t.replaceWith(n)},k=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=S(i,t),n.push(await a())}finally{r!==null&&E(r)}return n};return{show:((e,t)=>f(e)?k([e],t).then(e=>e[0]):Array.isArray(e)?k(e,t):S(e,t)),hide:E,version:u}};window.addEventListener(`load`,()=>{window.ns=p()})})();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nanosplash",
3
- "version": "4.1.1",
3
+ "version": "4.1.3",
4
4
  "private": false,
5
5
  "description": "The tiny loading screen for web artisans",
6
6
  "keywords": [
@@ -33,6 +33,7 @@
33
33
  "source": "./src/composables/ns.ts",
34
34
  "files": [
35
35
  "dist",
36
+ "!dist/docs",
36
37
  "types",
37
38
  "README.md",
38
39
  "LICENSE"
@@ -52,10 +53,11 @@
52
53
  },
53
54
  "scripts": {
54
55
  "dev": "vp dev",
55
- "build": "bun run build:es && bun run build:cjs && bun run build:iife",
56
+ "build": "bun run build:es && bun run build:cjs && bun run build:iife && bun run build:docs",
56
57
  "build:es": "tsc && cross-env entry=./src/composables/ns.ts format=es vp build -m production --outDir ./dist/es",
57
58
  "build:cjs": "tsc && cross-env entry=./src/composables/ns.ts format=cjs vp build -m production --outDir ./dist/cjs",
58
59
  "build:iife": "tsc && cross-env entry=./src/iife.ts format=iife vp build -m production --outDir ./dist/iife",
60
+ "build:docs": "tsc && cross-env entry=./src/docs.ts format=iife vp build -m production --outDir ./dist/docs && bun ./scripts/build-docs.ts",
59
61
  "preview": "vp preview",
60
62
  "lint": "vp lint",
61
63
  "format": "vp fmt",
@@ -66,10 +68,8 @@
66
68
  "@types/node": "^25.3.0",
67
69
  "@vitest/coverage-v8": "4.1.11",
68
70
  "cross-env": "^10.1.0",
69
- "cssnano": "^7.1.2",
70
71
  "dotenv": "^17.3.1",
71
72
  "jsdom": "^28.1.0",
72
- "postcss": "^8.5.6",
73
73
  "typescript": "7.0.2",
74
74
  "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
75
75
  "vite-plus": "0.3.0",