nanosplash 3.0.0 → 3.0.1

package/docs/index.f34144dc.js

@@ -0,0 +1 @@
+var S=Object.defineProperty;var N=(t,e,n)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var c=(t,e,n)=>(N(t,typeof e!="symbol"?e+"":e,n),n);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const l of o.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&r(l)}).observe(document,{childList:!0,subtree:!0});function n(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(s){if(s.ep)return;s.ep=!0;const o=n(s);fetch(s.href,o)}})();const v="3.0.1";var u=(t=>(t.Add="add",t.Remove="remove",t))(u||{});const d=class d{constructor(){c(this,"id");c(this,"element");this.element=p(),this.element.id=this.id=d.generateGUID()}static generateGUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const n=Math.random()*16|0;return(e==="x"?n:n&3|8).toString(16)})}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}getId(){return this.id}getNSElement(){return this.element}setText(e){return this.getNSTextElement().innerText=e,e.length>0?this.showText():this.hideText(),this}showText(){return E(this.getNSTextElement()),this}hideText(){return I(this.getNSTextElement()),this}remove(){var e;return this.element&&((e=this.element.parentElement)==null||e.removeChild(this.element),delete this.element),this}};c(d,"NSClass","ns"),c(d,"NSHostClass","nsh");let a=d;function p(){return new DOMParser().parseFromString('<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function y(t,e){e.children.length>0?e.insertBefore(t,e.children.item(0)):e.append(t)}function f(t,e){t==null||t.classList[e](a.NSHostClass)}function w(t){f(t.getNSElement().parentElement,u.Remove)}function E(t){t.style.display="flex"}function I(t){t.style.display="none"}function x(t){return t instanceof Element?t:document.querySelector(t||"")}function C(t){var e;return((e=t==null?void 0:t.classList)==null?void 0:e.contains(a.NSClass))??!1}function m(t,e){f(t.parentElement,u.Remove),f(e,u.Add),y(t,e)}function g(t){const e=t.firstElementChild;if(e!==null&&C(e)){const s=e.id;return h.getInstance().nsStack.find(l=>l.getId()===s)??null}return null}const i=class i{constructor(){c(this,"version");c(this,"nsStack");this.version=v,this.nsStack=[]}findIndex(e){return this.nsStack.findIndex(e)}find(e){return this.nsStack.find(e)}static getInstance(){return i.instance||(i.instance=new i),i.instance}static assignToWindow(){Object.defineProperty(window,i.WindowAccessorKey,{value:i.getInstance(),writable:!1})}static start(){i.assignToWindow(),window.addEventListener("load",()=>{window[i.WindowAccessorKey]instanceof i||i.assignToWindow()})}createNS(e){const n=new a;return n.setText(e||""),this.nsStack.push(n),n}cleanAndRemove(e){return w(e),e.remove().getId()}stackDelete(e){let n=this.findIndex(r=>r.getId()===e.getId());return n<0?null:(this.nsStack.splice(n,1),e.getId())}deleteNS(e){const n=this.find(e);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(e){let n=g(document.body);return n||(n=this.createNS(),m(n.getNSElement(),document.body)),n.setText(e||"").getId()}showInside(e,n){const r=x(e);if(r){let s=g(r);return s||(s=this.createNS()),m(s.getNSElement(),r),s.setText(n||"").getId()}return null}hide(){const e=this.nsStack.pop();return e?this.cleanAndRemove(e):null}hideAll(){this.nsStack.forEach(this.cleanAndRemove),this.nsStack.splice(0,this.nsStack.length)}hideId(e){return this.deleteNS(n=>n.getId()===e)}hideInside(e){const n=x(e),r=s=>s.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};c(i,"WindowAccessorKey","ns"),c(i,"instance");let h=i;try{h.start()}catch(t){console.warn(t)}

package/docs/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Nanosplash</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+		<script type="module" crossorigin src="/nanosplash/index.f34144dc.js"></script>
+		<link rel="stylesheet" href="/nanosplash/index.74dbd99e.css">
+	</head>
+	<body class="bg-slate-50 min-w-full min-h-screen">
+		<div
+			id="main"
+			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
+			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
+				Nanosplash
+			</div>
+			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
+				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
+				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
+				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
+			</div>
+			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
+				<button
+					id="run"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">magic_button</span>
+					Run demo
+				</button>
+				<a
+					id="doc"
+					href="https://github.com/isakhauge/nanosplash"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">menu_book</span>
+					Documentation
+				</a>
+			</div>
+			<div
+				id="wrapper"
+				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
+				<div
+					id="a"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
+				</div>
+				<div
+					id="b"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
+				</div>
+				<div
+					id="c"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
+				</div>
+			</div>
+		</div>
+		
+		<script>
+			const wait = (ms) => new Promise(r => setTimeout(r, ms))
+			const ref = (selector) => document.querySelector(selector)
+			const run = ref('#run')
+			run.onclick = async () => {
+				console.log('Running demo')
+				const sec = (n) => n * 1000
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.show('Tiny loading screen')
+				await wait(sec(2))
+				ns.show('For web artisans')
+				await wait(sec(2))
+				ns.hide()
+				ns.showInside('#wrapper', 'Display over elements')
+				await wait(sec(2.25))
+				ns.hide()
+				ns.showInside('#a', 'Like this')
+				await wait(sec(0.5))
+				ns.showInside('#b', 'This')
+				await wait(sec(0.5))
+				ns.showInside('#c', 'Or this')
+				await wait(sec(1))
+				ns.hideAll()
+				ns.show('Simple API')
+				await wait(sec(1.5))
+				ns.show('1.5kb minzipped')
+				await wait(sec(1.5))
+				ns.show('No dependencies')
+				await wait(sec(1.5))
+				ns.show('99% test coverage')
+				await wait(sec(1.5))
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.hide()
+			}
+		</script>
+	</body>
+</html>

package/index.html

@@ -3,50 +3,103 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Nanosplash 3</title>
+		<title>Nanosplash</title>
 		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 	</head>
-	<body>
-	<div
-		id="main"
-		class="bg-slate-50 h-screen flex flex-col justify-center items-center">
-		<div class="text-slate-700 text-5xl">Nanosplash</div>
-		<div class="text-slate-400 text-xl mt-5">Demo of v3.0.0</div>
-		<div class="mt-20 mb-10 text-lg font-mono text-slate-500">ns.showInside(<span class="text-slate-700 font-bold">selectorOrElement</span>, <span class="text-slate-700 font-bold">text</span>)</div>
-		<div class="flex gap-x-3">
-			<input id="code" type="text" class="appearance-none w-[500px] box-content flex p-4 bg-slate-700 font-mono text-white rounded shadow-xl" placeholder="Write JS code here">
-			<button id="run" type="button" class="p-4 bg-slate-500 text-white rounded shadow-xl">Run code</button>
-		</div>
+	<body class="bg-slate-50 min-w-full min-h-screen">
 		<div
-			id="wrapper"
-			class="relative mt-20 flex gap-x-5 justify-center items-center bg-slate-200 p-20 border border-4 border-black/10 rounded shadow-xl">
-			<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #wrapper</div>
-			<div
-				id="a"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #a</div>
-				<div class="text-white text-2xl font-medium">This is element A</div>
+			id="main"
+			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
+			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
+				Nanosplash
 			</div>
-			<div
-				id="b"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #b</div>
-				<div class="text-white text-2xl font-medium">This is element B</div>
+			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
+				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
+				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
+				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
+			</div>
+			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
+				<button
+					id="run"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">magic_button</span>
+					Run demo
+				</button>
+				<a
+					id="doc"
+					href="https://github.com/isakhauge/nanosplash"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">menu_book</span>
+					Documentation
+				</a>
 			</div>
 			<div
-				id="c"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #c</div>
-				<div class="text-white text-2xl font-medium">This is element C</div>
+				id="wrapper"
+				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
+				<div
+					id="a"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
+				</div>
+				<div
+					id="b"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
+				</div>
+				<div
+					id="c"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
+				</div>
 			</div>
 		</div>
-	</div>
-	<script type="module" src="/src/main.ts"></script>
-	<script>
-		const ref = id => document.getElementById(id)
-		const code = ref('code')
-		const run = ref('run')
-		run.onclick = () => eval(code.value)
-	</script>
+		<script type="module" src="src/ts/main.ts"></script>
+		<script>
+			const wait = (ms) => new Promise(r => setTimeout(r, ms))
+			const ref = (selector) => document.querySelector(selector)
+			const run = ref('#run')
+			run.onclick = async () => {
+				console.log('Running demo')
+				const sec = (n) => n * 1000
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.show('Tiny loading screen')
+				await wait(sec(2))
+				ns.show('For web artisans')
+				await wait(sec(2))
+				ns.hide()
+				ns.showInside('#wrapper', 'Display over elements')
+				await wait(sec(2.25))
+				ns.hide()
+				ns.showInside('#a', 'Like this')
+				await wait(sec(0.5))
+				ns.showInside('#b', 'This')
+				await wait(sec(0.5))
+				ns.showInside('#c', 'Or this')
+				await wait(sec(1))
+				ns.hideAll()
+				ns.show('Simple API')
+				await wait(sec(1.5))
+				ns.show('1.5kb minzipped')
+				await wait(sec(1.5))
+				ns.show('No dependencies')
+				await wait(sec(1.5))
+				ns.show('99% test coverage')
+				await wait(sec(1.5))
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.hide()
+			}
+		</script>
 	</body>
 </html>

package/package.json

@@ -2,7 +2,7 @@
   "name": "nanosplash",
   "description": "The tiny loading screen for web artisans",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "author": {
     "name": "Isak K. Hauge",
@@ -32,36 +32,57 @@
     "url": "https://github.com/isakhauge/nanosplash.git"
   },
   "license": "MIT",
-  "main": "./dist/ns.js",
-  "module": "./dist/ns.es.js",
-  "source": "./src/Nanosplash.ts",
-  "unpkg": "./dist/ns.iife.js",
-  "style": "./dist/main.css",
+  "main": "./dist/latest/es/ns.js",
+  "module": "./dist/latest/es/ns.js",
+  "source": "./src/main.ts",
+  "unpkg": "./dist/latest/iife/ns.iife.js",
+  "style": "./dist/latest/es/style.css",
   "exports": {
     ".": {
-      "import": "./dist/ns.es.js",
-      "require": "./dist/ns.cjs.js",
-      "default": "./dist/ns.es.js"
+      "types": {
+        "require": "./src/ts/types/global.d.ts",
+        "default": "./src/ts/types/global.d.ts"
+      },
+      "browser": {
+        "require": "./dist/latest/cjs/ns.cjs",
+        "default": "./dist/latest/es/ns.js"
+      },
+      "default": {
+        "require": "./dist/latest/cjs/ns.cjs",
+        "default": "./dist/latest/es/ns.js"
+      }
     }
   },
-  "types": "./src/ts/types",
+  "types": "./src/ts/types/global.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "yarn build:all && yarn build:all:versioned && yarn build:demo",
+    "build:es": "tsc && cross-env entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
+    "build:cjs": "tsc && cross-env entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
+    "build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
+    "build:es:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
+    "build:cjs:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
+    "build:iife:ver": "tsc && cross-env versioned=true entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
+    "build:all": "yarn build:es && yarn build:cjs && yarn build:iife",
+    "build:all:versioned": "yarn build:es:ver && yarn build:cjs:ver && yarn build:iife:ver",
+    "build:demo": "tsc && vite build -m production --c vite.demo.config.ts",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest --coverage"
   },
   "devDependencies": {
-    "@types/jsdom": "^21.1.1",
-    "@vitest/coverage-c8": "^0.31.4",
-    "@vitest/ui": "^0.31.4",
+    "@types/jsdom": "^21.1.2",
+    "@types/node": "^20.5.9",
+    "@types/rollup": "^0.54.0",
+    "@vitest/coverage-v8": "^0.34.3",
+    "@vitest/ui": "^0.34.3",
+    "cross-env": "^7.0.3",
     "jsdom": "^22.1.0",
-    "sass": "^1.62.1",
-    "terser": "^5.17.7",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.31.4"
+    "sass": "^1.66.1",
+    "terser": "^5.19.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3"
   }
 }

package/src/sass/ns.sass

@@ -11,54 +11,63 @@
 	justify-content: center
 	align-items: center
 
-.ns-host
-	--text-color: DarkSlateGray
-	--font-size: 20px
-	--proportional-size: calc(var(--font-size) * 0.9)
-	--font-family: 'Helvetica', 'Arial', sans-serif
-	--font-weight: 400
-	--background: rgba(255, 255, 255, 0.8)
-	--z-index: 999999999
-	--blur-filter: blur(10px)
+// Nanosplash host scoped varibles
+.nsh
+	--color: DarkSlateGray
+	--size: 20px
+	--relSize: calc(var(--size) * 0.9)
+	--font: 'Helvetica', 'Arial', sans-serif
+	--weight: 400
+	--bg: #{ rgba(White, 0.8) }
+	--zIdx: 999999999
+	--blur: blur(10px)
 
-.ns-host
+// Nanosplash host
+.nsh
 	position: relative
-	z-index: var(--z-index)
+	z-index: var(--zIdx)
 	&::before
 		@extend %maximize
 		@extend %upper-left
 		position: absolute
-		background-color: var(--background)
+		background-color: var(--bg)
 		content: ''
-		backdrop-filter: var(--blur-filter)
-		-webkit-backdrop-filter: var(--blur-filter)
-		z-index: calc(var(--z-index) + 1)
+		backdrop-filter: var(--blur)
+		-webkit-backdrop-filter: var(--blur)
+		z-index: calc(var(--zIdx) + 1)
+		border-radius: inherit
 
-body.ns-host
+// When Nanosplash host is the document body
+body.nsh
 	height: 100vh
 
+// Nanosplash (main element)
 .ns
 	@extend %maximize
 	@extend %upper-left
 	@extend %flex-center-xy
 	position: absolute
-	z-index: calc(var(--z-index) + 2)
+	z-index: calc(var(--zIdx) + 2)
 
-.ns-content
+// Nanosplash container
+.nsc
 	@extend %flex-center-xy
+	filter: drop-shadow(0 0 0.1rem #{ rgba(LightGray, 0.5) })
 
-.ns-text
-	color: var(--text-color)
-	font-size: var(--font-size)
-	font-family: var(--font-family)
-	font-weight: var(--font-weight)
-	margin-right: var(--proportional-size)
+// Nanosplash text
+.nst
+	color: var(--color)
+	font-size: var(--size)
+	font-family: var(--font)
+	font-weight: var(--weight)
+	margin-right: var(--relSize)
+	text-shadow: 0 0 0.06rem #{ rgba(DarkSlateGray, .25) }
 
-// Spinner node
-.ns-spinner
+// Nanosplash spinner
+.nss
 	display: block
-	width: var(--proportional-size)
-	height: var(--proportional-size)
+	width: var(--relSize)
+	height: var(--relSize)
 	& > svg
 		animation: Rotate 2s linear infinite
 		position: relative
@@ -66,7 +75,7 @@ body.ns-host
 		height: inherit
 		stroke-width: 8
 	& .path
-		stroke: var(--text-color)
+		stroke: var(--color)
 		stroke-linecap: round
 		animation: Dash 1.5s ease-in-out infinite
 

package/src/ts/core/Dom.ts

@@ -0,0 +1,160 @@
+// @ts-strict
+
+import { Reference, GUIDString, ClassListAction } from '../types/Types'
+import { Service } from './Service'
+import { Splash } from './Splash'
+
+/**
+ * # DOM Utilities
+ * A collection of functions that are used by the Nanosplash classes.
+ * @see Splash
+ * @see Service
+ * @author Isak K. Hauge <isakhauge@icloud.com>
+ */
+
+/**
+ * # Create Element
+ * Return the main Nanosplash element.
+ */
+export function createElement(): HTMLDivElement {
+	return new DOMParser().parseFromString(
+		'<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',
+		'text/html'
+	).body.firstChild as HTMLDivElement
+}
+
+/**
+ * # Inject	as First Child
+ * Insert element into the target element as its first child.
+ * @param element Element to inject.
+ * @param targetElement Element in which the first element is to be injected.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/children
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
+ * @see https://developer.mozilla.org/docs/Web/API/NodeList/item
+ */
+export function injectAsFirstChild(
+	element: Element,
+	targetElement: Element
+): void {
+	const targetHasChild = targetElement.children.length > 0
+	if (targetHasChild) {
+		targetElement.insertBefore(element, targetElement.children.item(0))
+	} else {
+		targetElement.append(element)
+	}
+}
+
+/**
+ * # Set NS Host Class
+ * Add or remove the `nsHostClassName` class to the `element`.
+ * @param element Element to which the `nsHostClassName` class will be added or removed.
+ * @param action Action to perform ('add' or 'remove').
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove
+ */
+export function setNSHostClass(
+	element: Element | null,
+	action: ClassListAction
+): void {
+	element?.classList[action](Splash.NSHostClass)
+}
+
+/**
+ * # Prepare Parent Of
+ * Add the `nsHostClassName` class to the parent of the `ns` element.
+ * @param ns Nanosplash instance.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/parentElement
+ */
+export function prepareParentOf(ns: Splash): void {
+	setNSHostClass(ns.getNSElement().parentElement, ClassListAction.Add)
+}
+
+/**
+ * # Clean NS Parent Of
+ * Remove the `nsHostClassName` class from the parent of the `ns` element.
+ * @param ns Nanosplash instance.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/parentElement
+ */
+export function cleanNSParentOf(ns: Splash): void {
+	setNSHostClass(ns.getNSElement().parentElement, ClassListAction.Remove)
+}
+
+/**
+ * # Show Element
+ * Set the `display` property of the `element` to `flex`.
+ * @param element Element to show.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+ */
+export function showElement(element: HTMLElement): void {
+	element.style.display = 'flex'
+}
+
+/**
+ * # Hide Element
+ * Set the `display` property of the `element` to `none`.
+ * @param element Element to hide.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+ */
+export function hideElement(element: HTMLElement): void {
+	element.style.display = 'none'
+}
+
+/**
+ * # Element From
+ * Convert the element reference to an element.
+ * @param ref Reference to an element.
+ * @returns { Element | null } Element or null.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Node
+ */
+export function elementFrom(ref: Reference): Element | null {
+	return ref instanceof Element ? ref : document.querySelector(ref || '')
+}
+
+/**
+ * # Element Is NS
+ * Check if the element is a Nanosplash element.
+ * This is determined by the presence of the `ns` class on the element.
+ * @param element Element to check.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains
+ */
+export function elementIsNS(element: Element): boolean {
+	return element?.classList?.contains(Splash.NSClass) ?? false
+}
+
+/**
+ * # Move
+ * Move an Element to another Element.
+ * @param element Element to move
+ * @param targetElement Target element
+ */
+export function move(element: Element, targetElement: Element): void {
+	// Clean the current NS host element.
+	setNSHostClass(element.parentElement, ClassListAction.Remove)
+	// Assign new NS host element.
+	setNSHostClass(targetElement, ClassListAction.Add)
+	injectAsFirstChild(element, targetElement)
+}
+
+/**
+ * # Get Recycled NS
+ * Return the Nanosplash instance inside the target element if it exists.
+ * @param targetElement Element wherein the Nanosplash instance is to reside.
+ * @returns { Nanosplash | null } Nanosplash instance or null.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild
+ */
+export function getRecycledNS(targetElement: Element): Splash | null {
+	const firstChild = targetElement.firstElementChild
+	const hasChild = firstChild !== null
+	const targetAlreadyHasNS = hasChild && elementIsNS(firstChild)
+	if (targetAlreadyHasNS) {
+		const id: GUIDString = firstChild.id
+		const nss = Service.getInstance()
+		return nss.nsStack.find((ns: Splash) => ns.getId() === id) ?? null
+	}
+
+	return null
+}